封装弹窗-抽屉，使用hook函数形式减少template内部代码

对弹窗/抽屉进行封装，使用钩子函数减少模板内部代码，抽屉也是如此。MyDrawer.vue首先，自定义一个对话框组件。该组件暴露了控制弹窗显示和隐藏的方法以及设置属性的方法。getCurrentInstance是vue提供的获取组件实例的方法。具体代码如下————除了自定义组件内部的一些处理，useDialog.ts还需要提供一个暴露一些操作的popup窗口方法的useDialog方法，也就是常说的钩子函数，这里暴露了一个register方法，使用时需要绑定自定义对话框组件。dialog组件创建时会触发register方法，将dialog实例和内部提供的方法传递出去，然后在父组件中使用。import{ref,unref}from'@vue/reactivity'import{isInSetup}from'/@/utils/help/vue'import{DialogPropsModel,ResultModel,MethodsModel}from"./types";exportfunctionuseDialog(props?:DialogPropsModel):ResultModel{//监听setup中是否调用了isInSetup()constinstanceRef=ref()constuuidRef=ref()functionregister(dialogInstance:any,uuid:string){instanceRef.value=dialogInstanceuuidRef.value=uuidprops&&methods.setProps(props)}constgetInstance=()=>{constinstance=unref(instanceRef);if(!instance){console.error('useModal实例未定义！');}返回实例；};常量方法：MethodsModel={actionDialog(open=true){getInstance()?.actionDialog(open)},setProps(props:any){getInstance()?.setProps(props)}}return[register,methods]}home具体使用.vue时，在父组件中调用对应的TestDialog组件，然后使用useDialog函数暴露register注册函数和actionDialog操作显式和隐藏函数，register绑定了TestDialog，这样组件创建的时候会触发emit暴露方法，通过useDialog即actionDialog函数返回，绑定对应的triggerDom就OK了。TestDialog.vueTestDialog组件只需要调用MyDialog并使用v-bind="$attrs"将所有属性和事件传递给MyDialog。然后就可以在MyDialog中编写弹窗显示的内容了。弹窗的属性可以通过useDialog传递，也可以直接写在TestDialog中。对弹窗代码进行拆解，hook形式的代码完成。实现了设置对话框属性和设置显示隐藏的简单功能。这样拆解之后，Home组件内部的弹窗模板代码就少了，可以在js或者子组件中随意设置属性。虽然功能不复杂，但是写起来舒服多了。否则如果在Home组件中调用element原有的dialog组件，需要在模板中传入很多属性。如果直接抽取，需要在子组件中监听显式和隐藏变量，而父组件监听显式和隐藏事件，写了很多和数据不相关的代码，代码不好看如此愉快。