这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何优雅的基于 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...
src/components/Dialog/index.js importDialogfrom"./Dialog.vue";import{h,render}from"vue";letcreateMount=(opts)=>{constmountNode=document.createElement("div");document.body.appendChild(mountNode);constvnode=h(Dialog,{...opts,modelValue:true,remove(){document.body.removeChild(mountNode);},});vnode...
4.6.2子组件控制dialog的显示和隐藏 子组件控制dialog的显示和隐藏,不能直接修改父组件传递过来的值,需要使用回调触发父组件中的值进行修改,这里就使用到了上面介绍的sync语法糖。 首先在父组件中使用:visible.sync="visible"向子组件进行传值并且接收子组件回调。 <div class="row"> <one-dialog :visible.sync="...
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" ...
BaseDialogProps { title: string; visible: boolean; width?: string; fullscreen?: boolean; modal?: boolean; modalClass?: string; showClose?: boolean; showFooter?: boolean; draggable?: boolean; } // 接受父组件参数,配置默认值 const props = withDefaults(defineProps<BaseDialogProps>(), { ...
{{dialogProps.isCommTitle }} 使用组件 ElDialogSp1 ElDialogSp2 ElDialogSp1中间内容 ElDialogSp1 方案二 思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用 缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码 main.js ...
constdialogTitle = ref<string>(''); consthandleOpenDialog ==>{ dialogVisible.value =true; dialogTitle.value ='父组件弹窗'; }; consthandleComp1Dialog ==>{ dialogVisible.value =true; dialogTitle.value ='子组件1弹窗'; }; consthandleComp2Dialog ==>{ ...
import { ElFormItem, ElInput, ElDialog } from 'element-plus' const props = defineProps({ dialogVisible: { type: Boolean, default: () => false }, }) var dialogVisibleOn = ref() var form = reactive({ ticketIndex: "" }) watch( ...
1. dialog 组件全屏的实现方式是基于 CSS 样式和 JavaScript 控制的结合。 2. 通过 JavaScript 控制,监听全屏按钮的点击事件。当点击全屏按钮时,触发相应的 JavaScript 函数。 3. JavaScript 函数中会调用 Element Plus 封装的 API,将 dialog 组件设置为全屏模式。这涉及到改变 dialog 组件的宽度、高度等样式。 4....