Vue3+elementPlus的对话框模板

在学习过程中做了一个Vue3+elementPlus的对话框模板，使用父子组件传值，下面注释的内容是用于在父组件中控制对话框的打开与关闭的函数，可以修改掉$开头的字符串改成自己项目的对应名称，也可以存到idea或者webstorm的文件模板。

如有错误敬请指正

<template>
  <el-dialog
    title="${TITLE}"
    width="40%"
    :model-value="visible"
    @closed="closed(false)"
  >
    <div class="${COMPONENT_NAME}-Box">
        <!-- 在这里编写内容 -->
    </div>
  </el-dialog>
</template>

<script>
import {reactive, toRefs} from "vue";
export default {
name: "${COMPONENT_NAME}",
  components: {},
  props:{
    //从父组件传来，对话框的开启和关闭的属性
    visible: {
      type:Boolean,
      default:false
    }
  },
  emits:['closeDialog'],
  setup(props,{emit}) {
    
    const data = reactive({
      
    })

    //对话框的关闭，需要传值
    const closeDialog=(val)=>{
      emit('closeDialog',{val})
    }

     //用于@closed指令对话框的关闭，也可以直接使用closeDialog
    const closed = (val) => {
      closeDialog(val)
    }
   
    return{
      ...toRefs(data),
      closeDialog,
      closed
    }
  },


    /**
         以下是复制到父组件的内容
         将data,openDialog,closeDialog复制到调用对话框的页面的setup里
    
        //visible可加入父组件的自定义的属性组里，或者写进是data()
       const data=reactive({
            visible:false
       })

      //开启对话框    
      const openDialog = () => {
       data.visible=true
     }

    //关闭对话框，需要传值    
     const closeDialog = (val) => {
       data.visible=val
     }

    //如何引入组件？
    //先import组件
    //然后在components写引入的组件名，将下面的标签写入template的第二级节点
    <组件名  :visible="visible" @closeDialog="closeDialog(false)"/>
       

    **/
}
</script>

<style scoped>
.${COMPONENT_NAME}Box{

}
</style>