一种可复用嵌套性公共模态窗口的方法与流程

技术特征：
1.一种可复用嵌套性公共模态窗口的方法，其特征在于，包括以下过程：s1.首先定义一个名为commmodal的vue组件文件，并编写好template分片文件；s2.通过组件javascript逻辑体props属性接收5个外部属性值，具体为：
①
title：类型为string，默认值为提示；
②
confirmfn：类型为function；
③
isshow：类型为boolean，默认值为false；
④
isfooter：类型为boolean，默认值为false；
⑤
diawidth：类型为string，无默认值，为必传；
⑥
confirmtext：类型为string，默认值为“确定”。s3.组件最外层根节点使用v-if定义模态框是否显示，值为配置的dialogshow；s4.组件当被关闭前的方法before-close采用自定义公有方法handleclose，el-dialog组件第一个节点自带slot具名插槽title,此插槽将接收一个同名称为title的变量作为对话框的自定义标题；s5.将插槽内容注入到ele-dialog组件的title内部插槽里面；s6.当外部事件未触发模态对话框显示，该组件内部控制显示的dialogshow值默认为false，el-dialog对话框虽然存在，但不会显示；s7.当props接受到isshow值变成true后，将会改变组件内控制显示的值dialogshow为true，此时对话框出现；s8.当成功执行后会给上级组件呈递一个名为finishcb的自定义事件，该事件将会携带isshow值为false的数据对象，提示上级组件关闭对话框。2.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述组件的第一层子元素为elementui组件el-dialog，使用其自带属性visible配置为我们定义的dialogshow共有属性值，用以控制对话框是否显示与隐藏，对话框宽度width使用公有属性值diawidth。3.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s5中组件的第二个节点slot具名插槽为container，用来接收commmodal组件外自定义内容的注入。4.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s5中组件的第三个节点为footer，同样是内部具名插槽接收内容，将会注入到el-dialog组件里面。5.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s5中插槽内容主要存放主组件el-dialog点击确定后所触发的行为，该内容包含两个元素节点，确定与取消按钮，确定按钮所绑定的事件是所定的公有方法confirm函数，取消按钮则为该组件内定义方法handclose函数，确定按钮还会接收自定义文字内容。6.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s6中组件内watch时刻检测着isshow的变化，外部事件会给我们定义的commmodal组件传递各个方法与值。7.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s7中对话框出现的同时外部事件会传递title标题文字、本次对话框的宽度、点击关闭前
所触发的回调函数handleclose，以及接收点击确定后所触发的自定义函数。8.根据权利要求1所述的一种可复用嵌套性公共模态窗口的方法，其特征在于：所述步骤s8中成功执行后如果用户点击取消则会不执行任何行为事件直接传值关闭对话框。

技术总结
本发明提供一种可复用嵌套性公共模态窗口的方法，涉及公共模态窗口技术领域。该可复用嵌套性公共模态窗口的方法，包括以下过程：S1.首先定义一个名为commModal的vue组件文件，并编写好template分片文件；S2.通过组件javascript逻辑体props属性接收5个外部属性值，具体为：


技术研发人员：舒兴杰 王垚 孙立 杜玉卓 申大伟 丁光辉 胡罡 孙风伟 王泽广 矫行洲 王延生 隋凯 孙艺萌 王小东 杨小帅 刘写辉
受保护的技术使用者：北京天地和兴科技有限公司
技术研发日：2022.08.16
技术公布日：2022/11/15