Vue3 + Element-plus，el-dialog 最简易好用的封装方法

编辑弹窗：

<template>
    <el-dialog v-model="visible" title="Tips" width="30%" >
        <span>This is a message</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">Cancel</el-button>
                <el-button type="primary" @click="visible = false">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const props = defineProps({
    visible: Boolean,
})
const emits = defineEmits(['update:visible'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: val => emits('update:visible', val),
})
</script>

<style lang="scss" scoped></style>

父组件：

<el-button type="primary" @click="openDialog"></el-button>
<edit-dialog v-model:visible="dialogVisible"></edit-dialog>

const openDialog = () =>{
  dialogVisible.value = true
}