问题场景
Vue项目中使用el-dialog，希望将弹出框及遮罩层限制在指定元素内
解决方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div class="conn2">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="50%"
:modal-append-to-body="false"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
|
1
2
3
4
5
6
7
8
9
10
| <script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {},
};
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style lang="scss" scoped>
.conn2 {
height: 400px;
border: 1px solid blue;
position: relative;
}
.conn2::v-deep {
.el-dialog__wrapper,
.v-modal {
position: absolute;
}
}
</style>
|
1.为el-dialog设置:modal-append-to-body="false"将遮罩层插入至 Dialog 的父元素上
2.设置父元素属性position: relative;
3.利用vue样式穿透，对遮罩层及弹出的对话框设置绝对定位position: absolute;
相关知识
1.样式穿透需要配合scoped属性使用，scoped属性为当前组件所有元素及子组件最外层元素添加了data-v-XXXX属性
2.编译为CSS语法后，::v-deep相当于属性选择器[data-v-XXXX]
3.::v-deep在CSS选择器前后不同位置有区别
本例中，若使用.v-modal::v-deep语法则不生效。因为 .v-modal::v-deep编译后的CSS选择器为.v-modal[data-v-XXXX]，而.v-modal所在元素作为el-dialog子组件的子元素，无法添加[data-v-XXXX]属性。所以属性选择器无法进行匹配，样式无法生效。
实现效果
