通过以上步骤,你已经成功地在Vue 3项目中封装了Element-Plus的Dialog组件,并可以在项目中方便地使用它。
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何优雅的基于 element-plus,封装一个梦中情 dialog 优点 摆脱繁琐的 visible 的命名,以及反复的重复 dom。 想法 将 dialog 封装成一个函数就能唤起的组件。如下: addDialog({ title:
封装弹框组件 如图所示目录,弹框组件放在‘src/plugin/dialog’目录下。 dialog文件夹下各文件介绍 1、dialog/index.js是给外部调用的文件; 2、dialog.scss是弹框的样式(这里省事的所有弹框用了同一套); 3、alert、confirm等文件夹里是具体弹框的实现。 具体弹框实现,以alert为例 alert文件夹下包含两个文件:a...
functionshow(props) {const{ title ='温馨提示', delContent ='确定要删除所选记录吗?', confirm, close } = props;// 创建dom并插入到body中div =document.createElement('div'); div.setAttribute('id','cu-dialog-id');document.body.appendChild(div);// 创建组件app =createApp(CuDialog, { title,...
BaseDialogProps { title: string; visible: boolean; width?: string; fullscreen?: boolean; modal?: boolean; modalClass?: string; showClose?: boolean; showFooter?: boolean; draggable?: boolean; } // 接受父组件参数,配置默认值 const props = withDefaults(defineProps<BaseDialogProps>(), { ...
在对公司旧项目升级的时候,有一些vue2的代码对使用全局弹窗是通过this.$dialog(xxx)这种方式进行使用,那么今天我就介绍一些二次封装element-plus的dialog。不废话直接上代码。 src/components/Dialog/index.js importDialogfrom"./Dialog.vue";import{h,render}from"vue";letcreateMount=(opts)=>{constmountNode=docu...
ElDialogSp1中间内容 ElDialogSp1 方案二 思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用 缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码 main.js import { createApp } from 'vue' import ElementPlus from 'element-plus' ...
1.Dialog组件的UI部分实现 我这里使用的是element-plus。 首先在components文件夹下新建文件DialogModal.vue 用来写这个组件 UI部分没什么难点,我这里直接贴代码了,根据自己需求进行修改: <template><el-dialog:before-close="handleClose"v-model="show":title="editData ? '编辑收支信息' : '添加收支信息'"><el...
将dialog 封装成一个函数就能唤起的组件。如下: addDialog({title:"测试",//弹窗名component:TestVue,//组件width:"400px",//弹窗大小props: {//传给组件的参数id:0},callBack:(data:any) =>{//当弹窗任务结束后,调用父页面的回掉函数。(比如我新增完成了需要刷新列表页面)console.log("回调函数", data...