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

相关推荐
自出洞来无敌手(曾令瑶)5 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江21 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码22 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说27 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015527 分钟前
最常用的JS加解密场景MD5
前端
Hilaku28 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球34 分钟前
mo契官网建设与SEO实践
前端
神仙别闹40 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c1 小时前
react当中的this指向
前端·javascript·react.js
Java水解1 小时前
Web API基础
前端