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

现在 vue3 官网更新了新方法 defineModel() ，这就是最简单方便的方法了

<template>
  <el-dialog
    title="title"
    v-model="visible"
    width="480px"
    :close-on-click-modal="false"
  >
    <span></span>
    <template #footer>
      <span>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
const visible = defineModel()

</script>

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

———————— 下面是以前的方法——————————

编辑弹窗：

<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
}