ElementPlus Dialog的奇淫技巧

Hello，大家好，我是大山，今天不讲nestJs后端相关的知识，今天讲讲ElementPlus Dialog的奇淫技巧，简单容易粗暴的技巧，可以满足一些稀奇古怪的需求。

今天共是Dialog拖拽、Dialog可缩放大小、平行多个Dialog三个奇淫技巧，没有大量的js去控制，只有几句简单的css和加个属性。

版本Vue3和TypeScript

一、Dialog弹窗可拖拽

加个draggable 就可以拖拽了，不过它的缺点是没有动画~

xml 复制代码

<el-dialog draggable></el-dialog>

二、Dialog可缩放大小

这个稍微复杂点，多了几行代码，代码如下

xml 复制代码

<el-dialog draggable class="asyncit-dialog"></el-dialog>

<style>
    .asyncit-dialog {
      resize: both; // div可拖拽
      overflow: auto; // 超出高度滚动，给浏览器识别

      .el-dialog__header,
      .el-dialog__body,
      .el-dialog__footer {
        pointer-events: auto !important; // 事件不穿透、基于它本身dom的事件（平行多个Dialog的css）
      }
    }
    :has(> .el-overlay-dialog .asyncit-dialog) {
      pointer-events: none !important;  // 事件穿透 （平行多个Dialog的css）
    }
</style>

三、平行多个Dialog

在表格列表中，想打开两个或者多个编辑的Dialog，可以在后端返回的对象数组里加个visible: false

表格列表代码：

ini 复制代码

<template>
    // 其余业务代码
    <k-table
      ref="tableRef"
      v-bind="tableData"
      :callback="getListApi"
      :loading="loading"
      stripe
      current-row-key="id"
    >
      <template #actions="{ row }">
        <el-button type="primary" plain size="small" @click="clickEditEvent(row)"
          >编辑</el-button
        >
      </template>
    </k-table>
    
    // 编辑弹窗
    <Edit
      v-for="item in dialogs"
      :key="item.id"
      v-model="item.visible"
      :curr-id="item.id"
      @change="updateSuccess">
    </Edit>
</template>
<script>
// 我用的是ts，没用ts的话可以删除ICreateOrUpdate[]
const dialogs = ref<ICreateOrUpdate[]>([])
// data.list是后端返回的对象数组，我懒了点，就不贴请求api返回后处理数据的代码了
dialogs.value = data.list.map((item: DiscountApiResult) => ({
  ...item,
  visible: false
}))
const clickEditEvent = (row: ICreateOrUpdate) => {
  const isExit = dialogs.value.find((item) => item.id === row.id)
  if (isExit) {
    isExit.visible = true
  }
}
</script>

组件中Dialog的代码如下

ini 复制代码

<template>
    <el-dialog
        title="编辑"
        v-model="visible"
        top="10vh"
        width="600px"
        :before-close="handleClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :modal="false" // 取消遮罩
        class="asyncit-dialog"
        draggable // 可拖拽
        append-to-body // 追加dom，避免打开页面则渲染，给浏览器减负
      >
      // 业务代码
      </el-dialog>
 </template>
 <script lang="ts" setup>
     const props = defineProps({
      modelValue: {
        type: Boolean,
        required: true,
        default: false
      },
      currId: {
        type: String,
        required: true,
        default: ''
      },
    })
    watch(
      () => props.modelValue,
      async () => {
        visible.value = props.modelValue
        if (props.modelValue && props.currId) {
          // 执行接下来的逻辑
        }
      }
    )
 </script>

OK，代码贴完，让我们看看效果吧

完美！但是代码里的updateSuccess方法是刷新表格，会导致其中一个Dialog点击确定后，也关闭其它的Dialog，可以在后端返回的对象数组后，Dialogs数组和对象数组对比，判断visible等于true的，这个对象的visible则为true，也可以选择不改动这个对象，具体改动的是这段代码：

javascript 复制代码

dialogs.value = data.list.map((item: DiscountApiResult) => ({
  ...item,
  visible: false
}))

OK，今天的记录就到这里了