el-dialog使用动态class

需求：给el-dialog（弹窗组件）更换动态class

HTML

<el-dialog
      v-model="dialogVisible"
      :width="dialogWidth"
      :before-close="handleClose"
      :custom-class="largeDialog // 第一步：这里设置自定义动态class
>
</el-dialog>

CSS

 // 第二步：设置css属性  （解释一下，因为要改变elementUI样式，所以用到deep）
 ::v-deep .largeDialog {
    width: auto !important;
    margin: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 2 * 20px);
  }

script

<script lang="ts" setup>
      import { computed } from 'vue'
     
       const isZoom = ref(false)
      const largeDialog = computed(() => [isZoom.value ? 'largeDialog' : ''])  // 第三步：进行三目运算
</script>

结果： 得到一个可以放大缩小的弹窗

弹窗缩小

弹窗放大

vue3+TS持续学习中...