element-ui公用模态框自定义样式与scoped样式生效问题解决方案

//先插如效果图

里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样.

//下面这个图片为初始样式

//拖动模态框指令需要插件.详情看我下一篇,以下是地址

https://www.cnblogs.com/maruihua/p/10986082.html

<!–公用模态框使用时传入{dialogtitle:’模态框的title’,(可以为空)dialogstatus:true显示模态框,false隐藏模态框(可以为空)}–><template><div class=”dia ” ><el-dialog:title=”dialogtitle”:visible.sync=”dialogstatus”:close-on-click-modal=”false”v-el-drag-dialog@dragDialog=”handleDrag”:close-on-press-escape=”false”><slot></slot></el-dialog></div></template><script>import elDragDialog from ‘../../directive/el-dragDialog/index’export default { //自定义指令:拖动模态框 directives: { elDragDialog }, //接受模态框数组[title,status] props: [‘publicdialogarray’], components: {}, data() { return { dialogtitle: this.publicdialogarray.dialogtitle, //传入模态框的title dialogstatus: this.publicdialogarray.dialogstatu //传入模态框的显示与隐藏 } }, created() {}, methods: { handleDrag() {} //拖动模态框事件 }, watch: { //监听prop数组变化 publicdialogarray: { handler() { this.dialogtitle = this.publicdialogarray.dialogtitle || ” this.dialogstatus = this.publicdialogarray.dialogstatu || false }, immediate: true, deep: true } }}</script>

//给dialog外边加一个div,然后在dialog添加/deep/就可以控制样式了//因为添加scoped后不会污染全局样式,如果不怕污染全局样式可以直接不加scoped.即可!