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

Posted 2022-05-03 web半晨

目录

• 1、HTML
• 2、JavaScript
• 3、css

---

1、html

<el-dialog
  custom-class="schedule_task_diaog"
  :show-close="false"
  :center="true"
  :visible.sync="dialogTableVisible"
  :close-on-click-modal="false"
>
  <div>内容... ...</div>
</el-dialog>

---

2、javascript

export default 
  data() 
    return 
      dialogTableVisible: false,
    ;
  ,

  methods: 
    // 父组件通过ref触发子组件方法（函数）打开本弹窗
    openPanel(obj) 
      // 控制弹窗的显示与隐藏
      this.dialogTableVisible = true;

      this.$nextTick(() => 
        // 获取DOM
        let dialogBox = document.getElementsByClassName("schedule_task_diaog"),
           width, height, borderRadius, top  = obj;

        for (let i = 0; i < dialogBox.length; i++) 
          // 设置width
          dialogBox[i].style.width = width || "360px";
          // 设置height
          dialogBox[i].style.height = height || "360px";
          // 设置top
          dialogBox[i].style.top = top || "152px";
          // 设置border-radius
          dialogBox[i].style.borderRadius = borderRadius || "10px";
        
      );
    ,
  ,
;

---

3、css

// 重置dialog对话框
/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;