vue3封装ElementUI plus Dialog弹窗

因为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

复制代码

<template>
  <el-dialog :title="title" :width="width" :fullscreen="fullscreen" :top="top" :modal="modal" :modal-class="modalClass"
    :append-to-body="appendToBody" :append-to="appendTo" :lock-scroll="lockScroll" :custom-class="customClass"
    :open-delay="openDelay" :close-delay="closeDelay" :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape" :show-close="showClose" :before-close="beforeClose"
    :draggable="draggable" :overflow="overflow" :center="center" :align-center="alignCenter"
    :destroy-on-close="destroyOnClose" :close-icon="closeIcon" :z-index="ZIndex" :header-aria-level="headerAriaLevel">
    <template v-if="isCommTitle" #header="{ isCommTitle }">
      <span :key="isCommTitle">{{dialogProps.isCommTitle  }} </span>
    </template>
    <slot></slot>
    <template #footer>
      <span>
        <slot name="footer"></slot>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps, defineComponent } from 'vue'

import { ElDialog } from 'element-plus'
const dialogProps = defineProps({
  isCommTitle: {
    type: String
  },
})
ElDialog.props = Object.assign(ElDialog.props, { ...dialogProps })
console.log('ElDialog', ElDialog)
defineComponent({
  ...ElDialog,
})
</script>
<style scoped></style>

使用组件

复制代码

<template>
  <el-button plain @click="dialogVisible = true">
    ElDialogSp1
  </el-button>
  
  <el-button plain @click="dialogVisible1 = true">
    ElDialogSp2
  </el-button>

  <ElDialogSp1 :isCommTitle="'没错我是ElDialogSp1的标题'"  v-model="dialogVisible">
    ElDialogSp1中间内容
    <template #footer>
      <el-button plain @click="dialogVisible = false">
        ElDialogSp1
      </el-button>
    </template>
  </ElDialogSp1>
</template>

<script setup>
import {  ref } from "vue";

const dialogVisible = ref(false);
</script>

方案二

思路:封装一个组件,组件内部嵌套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

复制代码

<template>
  <el-dialog v-model="dialogVisible">
    <template #header="{title}">
     <span :key="title"> {{props.title }}</span>
    </template>
    <slot></slot>
    <template #footer>
      <el-button @click="cancel()">Cancel</el-button>
      <el-button type="primary" @click="confirm()">
        Confirm
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {  ref,watch,defineProps,defineEmits } from "vue";
const emit = defineEmits(['cancel','confirm'])
const props= defineProps({
  dialogVisible:{
    type:Boolean
  },
  title:{
    type: String
  }
})
const dialogVisible = ref(props.dialogVisible)
function cancel() {
  emit('cancel')
}
function confirm() {
  emit('confirm')
}
watch(()=>props.dialogVisible,(newValue)=>{
  dialogVisible.value = newValue
}) 

</script>

使用组件

复制代码

<template>
  <el-button plain @click="dialogVisible1 = true">
    ElDialogSp2
  </el-button>
  <ElDialogSp2 @confirm="()=>{dialogVisible1= false![请添加图片描述](https://img-blog.csdnimg.cn/direct/c1418a0e2a644e44bedf8a06cd331d52.gif)
}" 
    @cancel="()=>{dialogVisible1= false}"
    :title="'没错我是ElDialogSp2的标题'"  :dialogVisible="dialogVisible1">
    ElDialogSp2中间内容
  </ElDialogSp2>
</template>

<script setup>
import {  ref } from "vue";
const dialogVisible1 = ref(false);
</script>

效果图