这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何优雅的基于 element-plus,封装一个梦中情 dialog 优点 摆脱繁琐的 visible 的命名,以及反复的重复 dom。 想法 将 dialog 封装成一个函数就能唤起的组件。如下: addDialog({ 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...
4.6.2子组件控制dialog的显示和隐藏 子组件控制dialog的显示和隐藏,不能直接修改父组件传递过来的值,需要使用回调触发父组件中的值进行修改,这里就使用到了上面介绍的sync语法糖。 首先在父组件中使用:visible.sync="visible"向子组件进行传值并且接收子组件回调。 <div class="row"> <one-dialog :visible.sync="...
BaseDialogProps { title: string; visible: boolean; width?: string; fullscreen?: boolean; modal?: boolean; modalClass?: string; showClose?: boolean; showFooter?: boolean; draggable?: boolean; } // 接受父组件参数,配置默认值 const props = withDefaults(defineProps<BaseDialogProps>(), { ...
el-dialog__body里面全变成了我新写的那个dialog里的内容 新写的dialog,在子组件里 <el-dialog v-model="showChildView" :before-close="closeHandle" width="calc(100vw-200px)" class="show_file_dialog" :title="props.name" :space="space" align-center destroy-on-close :append-to-body="false" ...
ElDialogSp1中间内容 ElDialogSp1 方案二 思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用 缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码 main.js import { createApp } from 'vue' import ElementPlus from 'element-plus' ...
将dialog 封装成一个函数就能唤起的组件。如下: addDialog({title:"测试",//弹窗名component:TestVue,//组件width:"400px",//弹窗大小props: {//传给组件的参数id:0},callBack:(data:any) =>{//当弹窗任务结束后,调用父页面的回掉函数。(比如我新增完成了需要刷新列表页面)console.log("回调函数", data...
before-close只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在footer具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入before-close的相关逻辑。 自定义内容# 对话框的内容可以是任何东西,甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用 Element Plus 的表格和表...
<script setup lang="ts">import{reactive,watch,ref}from'vue'import{ElFormItem,ElInput,ElDialog}from'element-plus'constprops=defineProps({dialogVisible:{type:Boolean,default:()=>false},})vardialogVisibleOn=ref()varform=reactive({ticketIndex:""})watch(()=>props?.dialogVisible,async(val)=>{...