vue3+TS+element-plus 封装Dialog 对话框 啵崽崽关注IP属地: 四川 2024.11.25 13:47:26字数4阅读96 <template> <div class="BaseDialogClass"> <el-dialog :title="title" v-model="visible" :width="width" :fullscreen="fullscreen" :modal="modal" :modal-class="modalClass" :show-close="show...
框架:vue3.0,ruoyi,element-plus 语言:ts 子组件 <el-dialog v-model="visible" @close="handleClose"></el-dialog> <script setup
1.Dialog组件的UI部分实现 我这里使用的是element-plus。 首先在components文件夹下新建文件DialogModal.vue 用来写这个组件 UI部分没什么难点,我这里直接贴代码了,根据自己需求进行修改: <template><el-dialog:before-close="handleClose"v-model="show":title="editData ? '编辑收支信息' : '添加收支信息'"><el...
Dialog.vue弹窗组件,可以直接在vue中以<Dialog></Dialog>组件嵌入的形式使用,使用Teleport将组件挂载至外层body中(Teleport在不使用函数方式调起弹窗时有用,如果只使用Dialog.ts,则可以不要) Dialog.ts函数式调用的封装,可以直接使用函数调起弹窗。弹窗函数式调起(动态创建)一般有(createApp+monted) 和 (render+h)...
<script setup lang="ts"> import { reactive, watch, ref } from 'vue' import { ElFormItem, ElInput, ElDialog } from 'element-plus' const props = defineProps({ dialogVisible: { type: Boolean, default: () => false }, }) var dialogVisibleOn = ref() ...
基于el-dialog 进行初步封装 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // index.ts import { reactive } from "vue" type dialogOptions = { title: string component: any props?: Object width: string visible?: any callBack?: Function } export const dialogList: dialogOp...
后台管理常见的业务进行一个封装,比如表格,表格的新增删改查这些必备的操作,很多通用的属性,方法,我们把他封装到一个类中,这样使得我们的代码更加简约。 看不懂请看视频讲解,暂时还没录视频~~ import{reactive,ref,UnwrapNestedRefs,UnwrapRefSimple}from"vue";import{Response,}from"@/types/common";import{ElMess...
到这里,整个模态框的基本逻辑都组成了,在这基础下,就可基于需求下完善模态框与定制内容,也可通过该方法,二次封装 el-dialog 组件,只需要将 components/Modal/index.vue 的逻辑修改一下即可,下一篇文章,我们在这基础下在进行完善,使得组件能完全胜任业务需求。
封装一个showPasswordDialog函数 首先我们来看看期望如何使用showPasswordDialog函数? 我们希望showPasswordDialog函数返回一个Promise,resolve的值就是弹窗中输入的表单。例如,我们可以使用以下代码使用showPasswordDialog函数: try { // 调用这个就会弹出弹窗 const res: RuleForm = await showPasswordDialog(); ...
到这里,整个模态框的基本逻辑都组成了,在这基础下,就可基于需求下完善模态框与定制内容,也可通过该方法,二次封装 el-dialog 组件,只需要将 components/Modal/index.vue 的逻辑修改一下即可,下一篇文章,我们在这基础下在进行完善,使得组件能完全胜任业务需求。