因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下

方案一

思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用

新建一个组件,将官网暴露的属性全部引用了

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import ElDialogSp1 from './ElDialogSp1.vue'
const app = createApp(App)
app.use(ElementPlus)
app.component('ElDialogSp1',ElDialogSp1)
app.mount('#app')

ElDialogSp1.vue

使用组件

方案二

思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用

缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import ElDialogSp2 from './ElDialogSp2.vue'
const app = createApp(App)
app.use(ElementPlus)
app.component('ElDialogSp2',ElDialogSp2)
app.mount('#app')

ElDialogSp2.vue

使用组件

效果图