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,今天的记录就到这里了

相关推荐
喧星Aries7 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺9 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福11 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户408128120038111 分钟前
JWT 和 token 区别
前端
盏茶作酒2912 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天13 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪13 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽13 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课14 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤1514 分钟前
封装axios二方包
前端·http