vue+elementUi自定义dialog对话框、多个组件实例动态设置宽高、getElementsByClassName

1、HTML

<el-dialog custom-class="schedule_task_diaog" :show-close="false" :center="true" :visible.sync="dialogTableVisible" :close-on-click-modal="false" > <div>内容... ... data() { return { dialogTableVisible: false, }; }, methods: { openPanel(obj) { this.dialogTableVisible = true; this.$nextTick(() => { let dialogBox = document.getElementsByClassName("schedule_task_diaog"), { width, height, borderRadius, left, top } = obj; for (let i = 0; i < dialogBox.length; i++) { dialogBox[i].style.width = width || "360px"; dialogBox[i].style.height = height || "360px"; dialogBox[i].style.left = left || ""; dialogBox[i].style.top = top || ""; dialogBox[i].style.borderRadius = borderRadius || "10px"; } }); }, }, }; 

3、css

/deep/ .schedule_task_diaog { padding: 0 !important; } ::v-deep .schedule_task_diaog .el-dialog__header { width: 100%; padding: 0px !important; } /deep/ .schedule_task_diaog .el-dialog__body { width: 100%; padding: 0 !important; }