一、利用一个小时简单二次封装了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...
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.appContext=Modal._context;rende...
BaseDialogProps { title: string; visible: boolean; width?: string; fullscreen?: boolean; modal?: boolean; modalClass?: string; showClose?: boolean; showFooter?: boolean; draggable?: boolean; } // 接受父组件参数,配置默认值 const props = withDefaults(defineProps<BaseDialogProps>(), { ...
因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下 方案一 思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用 新建一个组件,将官网暴露的属性全部引用了 mAIn.JS import { createApp } fro...
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" ...
首先搭建起来dialog组件的框架,暂时不加入插槽,只构建出基本的框架和样式。 框架分为三个部分,头部(header)、内容(body)、底部(footer),基本框架如下: <template> <div class="one-dialog_wrapper"> <div class="one-dialog"> <div class="one-dialog_header"> ...
import CuDialog from '@/components/CuDialog.vue' 创建两个全局变量(命名随意),一个是存储createApp创建的组件,一个是放组件的dom letapp =null;letdiv =null; 定义两个方法,一个是显示弹窗,一个是隐藏弹窗 我这里是把两个方法放在了一个对象里面,方便页面的调用,你们可以根据自己的喜好自由设计 ...
import { ElFormItem, ElInput, ElDialog } from 'element-plus' const props = defineProps({ dialogVisible: { type: Boolean, default: () => false }, }) var dialogVisibleOn = ref() var form = reactive({ ticketIndex: "" }) watch( ...
Bug Type: Other Environment Vue Version: 3.4.15 Element Plus Version: 2.5.3 Browser / OS: chrome 127.0.6533.120/mac os 13.6 Build Tool: Vite Reproduction Related Component el-dialog el-date-picker el-select Reproduction Link Github Repo ...
el-dialog子组件的封装 baseDialog.vue <template><div><el-dialogv-model="getShow"width="65%":before-close="handlerCancer"><div>{{props.title}}</div><slot/><template#footer><span><button@click="handlerCancer">取消</button><button@click="handlerSubmit">确定</button></span></template></...