Vue3 ElementPlus Dialog封装

引言

多个页面中需要录入用户数据（弹窗内容相同），重复写弹窗代码比较繁琐。因此封装一下组件，使用效果如下：
本例中模型较简单，记录下使用方法和原理

实现原理

参考VUE官方两个例子，基本父子件通信如下

官方文档

官方演练场

MyDialog使用如下:

<MyDialog v-model:visible="visible" v-model="dialogValue" />

<MyDialog v-model:visible="visible" v-model:modelValue="dialogValue" />

因此组件中需要定义两个prop和emit

const props = defineProps(['visible', 'modelValue'])
const emit = defineEmits(['update:visible', 'update:modelValue'])

emit触发由弹框点击了确认或者关闭按钮适合调用

	//	点击取消时候设置visible为false关闭
    emit('update:visible', false)
  //	点击取消时候设置visible为false关闭，并触发'update:modelValue' 返回结果，更新父组件的v-model值
    emit('update:visible', false)
    emit('update:modelValue', { name, email })

完整代码

MyDialog.vue

<template>
    <el-dialog v-model="visible" title="用户录入">
        <el-form>
            <el-form-item label="姓名">
                <el-input v-model="name" autocomplete="off" />
            el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="email" autocomplete="off" />
            el-form-item>
        el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取消el-button>
                <el-button type="primary" @click="handleClick">确认el-button>
            span>
        template>
    el-dialog>
template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps(['visible', 'modelValue'])
const emit = defineEmits(['update:visible', 'update:modelValue'])


const visible = computed({
    get() {
        return props.visible
    },
    set(value) {
        emit('update:visible', value)
    }
})

const name = ref('')
const email = ref('')

const handleClick = () => {
    emit('update:visible', false)
    emit('update:modelValue', { name, email })
}
script>

App.vue

<template>
    <el-button type="primary" @click="handleClick">点击获取组件值el-button>
    <MyDialog v-model:visible="visible" v-model="dialogValue" />
    <h1>弹窗结果是: {{ dialogValue }}h1>

    <el-button type="primary" @click="handleClick2">点击获取组件值2el-button>
    <MyDialog v-model:visible="visible2" v-model="dialogValue2" />
    <h1>弹窗2结果是: {{ dialogValue2 }}h1>
template>

<script setup lang="ts">
import { ref } from "vue";
import MyDialog from "~/components/MyDialog.vue";

const visible = ref(false)
const dialogValue = ref({ name: '', email: '' })

const handleClick = () => {
    visible.value = true;
}

const visible2 = ref(false)
const dialogValue2 = ref({ name: '', email: '' })

const handleClick2 = () => {
    visible2.value = true;
}
script>