在Vue 3中二次封装el-dialog组件可以帮助你更灵活地复用和管理对话框逻辑。以下是详细的步骤和示例代码,帮助你完成这个任务: 1. 理解el-dialog组件的基本用法和属性 el-dialog是Element Plus库中的一个对话框组件,用于显示模态对话框。它有一些基本的属性和事件,如visible(控制对话框的显示与隐藏)、title(对话框的...
一、利用一个小时简单二次封装了element-plus的弹框el-dialog,根据项目需求主要增加了最小化、最小化icon、弹出位置、 title字体色、header背景色、关闭图标色。 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 3...
<template><el-dialogcustom-class="subDialog":title="title"v-model="dialogPopVisible":width="width":before-close="onBeforeClose":center="true"v-bind="option"><div><component:is="comps"></component></div></el-dialog></template><script>import { ElDialog } from "element-plus"; export d...
<el-dialog @close="close" @open="open" :close-on-click-modal="false" :model-value="props.visible" :width="props.width" :custom-class="className" :modal="modal" :top="top" > <template #title> <keep-alive> <div ref="headerRef" class="header" > <span class="font16 cfff fwb">...
在src的同级下面新建packages目录,在这里添加自己封装的要发布的组件。 例如,新建qe-modal文件夹,再接着新建src文件夹,里面新建qe-modal.vue,在这里写组件的代码: <template> <el-dialog :title="title":visible="dialogVisible"@close="$emit('update:dialogVisible', false)":width="width"> ...
到这里,整个模态框的基本逻辑都组成了,在这基础下,就可基于需求下完善模态框与定制内容,也可通过该方法,二次封装 el-dialog 组件,只需要将 components/Modal/index.vue 的逻辑修改一下即可,下一篇文章,我们在这基础下在进行完善,使得组件能完全胜任业务需求。
<!-- DialogModal就是二次封装的弹框组件,在前面已经进行全局导入了,所以这里可以直接使用 --> <DialogModal :title="''" ref="dialogModalRef" @close="close"> <template #text="{ row }"> <!-- <el-button @click="openModal(row)">打开弹框</el-button> --> ...
如果你想整个弹窗实现loading效果,请把v-loading移到最外层元素即可。注意不能是el-dialog元素上,否则无法实现 可能是el-dialog使用了teleport组件,导致v-loading无法正常工作。等有空研究一下 ~ 试试看中间的效果 剩下一些细节处理 在组件提供了很多个属性供用户选择,但我们现在封装的组件只使用到了一小部分属性。
如果我这个对话框多个地方使用的话还要创建多个变量,甚至关闭之后还要清空一些变量,应该可以简化一点。我写vue的时候奉行的都是数据驱动,像刚才那种写法没...