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

1.本发明涉及公共模态窗口技术领域，具体为一种可复用嵌套性公共模态窗口的方法。


背景技术：

2.在软件产品的开发过程中出现最多的就是交互对话框这种人机交互操作用来配置相关的数据，用来下发给服务器，服务器接收读取相关数据，调用系统命令执行各项操作，这种对话框我们称之为模态框。
3.目前业界处理模态框的实现方案有多种方法，但做到引用值统一复用配置是需要基于现在项目代码而定，这需要涉及对应项目需求及设计方案，因产品需要有大量配置层面的数据注入，会有不少单层模态框和多级模态框出现，这就需要封装一套完备的可复用组件方法。
4.我们常规开发过程中使用较多的是layer插件，该插件基于jquery封装，但是该方法缺少固定的模态框主框架，需要根据不同型号定制不同元素，导致内容过多，代码不易维护，并且代码量偏大，函数利用率不高，公用代码混写过多，结构管理不够清晰，会导致开发人员工作量加大，后期延展版本分支不易维护，冗余代码过多，使对象数据调试性变差，与中间件人员沟通变复杂。


技术实现要素：

5.(一)解决的技术问题
6.针对现有技术的不足，本发明提供了一种可复用嵌套性公共模态窗口的方法，解决了常规的开发过程缺少固定的模态框主框架，需要根据不同型号定制不同元素，导致内容过多，代码不易维护，并且代码量偏大，函数利用率不高，公用代码混写过多，结构管理不够清晰，会导致开发人员工作量加大，后期延展版本分支不易维护，冗余代码过多，使对象数据调试性变差，与中间件人员沟通变复杂的问题。
7.(二)技术方案
8.为实现以上目的，本发明通过以下技术方案予以实现：一种可复用嵌套性公共模态窗口的方法，包括以下过程：
9.s1.首先定义一个名为commmodal的vue组件文件，并编写好template分片文件；
10.s2.通过组件javascript逻辑体props属性接收5个外部属性值，具体为：
11.①
title：类型为string，默认值为提示；
12.②
confirmfn：类型为function；
13.③
isshow：类型为boolean，默认值为false；
14.④
isfooter：类型为boolean，默认值为false；
15.⑤
diawidth：类型为string，无默认值，为必传；
16.⑥
confirmtext：类型为string，默认值为“确定”。
17.s3.组件最外层根节点使用v-if定义模态框是否显示，值为配置的dialogshow；
18.s4.组件当被关闭前的方法before-close采用自定义公有方法handleclose，el-dialog组件第一个节点自带slot具名插槽title,此插槽将接收一个同名称为title的变量作为对话框的自定义标题；
19.s5.将插槽内容注入到ele-dialog组件的title内部插槽里面；
20.s6.当外部事件未触发模态对话框显示，该组件内部控制显示的dialogshow值默认为false，el-dialog对话框虽然存在，但不会显示；
21.s7.当props接受到isshow值变成true后，将会改变组件内控制显示的值dialogshow为true，此时对话框出现；
22.s8.当成功执行后会给上级组件呈递一个名为finishcb的自定义事件，该事件将会携带isshow值为false的数据对象，提示上级组件关闭对话框。
23.优选的，所述组件的第一层子元素为elementui组件el-dialog，使用其自带属性visible配置为我们定义的dialogshow共有属性值，用以控制对话框是否显示与隐藏，对话框宽度width使用公有属性值diawidth。
24.优选的，所述步骤s5中组件的第二个节点slot具名插槽为container，用来接收commmodal组件外自定义内容的注入。
25.优选的，所述步骤s5中组件的第三个节点为footer，同样是内部具名插槽接收内容，将会注入到el-dialog组件里面。
26.优选的，所述步骤s5中插槽内容主要存放主组件el-dialog点击确定后所触发的行为，该内容包含两个元素节点，确定与取消按钮，确定按钮所绑定的事件是所定的公有方法confirm函数，取消按钮则为该组件内定义方法handclose函数，确定按钮还会接收自定义文字内容。
27.优选的，所述步骤s6中组件内watch时刻检测着isshow的变化，外部事件会给我们定义的commmodal组件传递各个方法与值。
28.优选的，所述步骤s7中对话框出现的同时外部事件会传递title标题文字、本次对话框的宽度、点击关闭前所触发的回调函数handleclose，以及接收点击确定后所触发的自定义函数。
29.优选的，所述步骤s8中成功执行后如果用户点击取消则会不执行任何行为事件直接传值关闭对话框。
30.(三)有益效果
31.本发明提供了一种可复用嵌套性公共模态窗口的方法。具备以下有益效果：
32.1、本发明提供了一种可复用嵌套性公共模态窗口的方法，该方法对项目开发选用目前领域较热门的vue框架，采用的是elementui组件集里面的dialog组件，对话框自带相关的api方法，合理应用自带的api方法二次封装成一个能够复用、拥有固定子框架的公用模态框，通过外部方法控制对话框的显示与隐藏，以及自定义对话框的模态框宽度、触发行为事件等实现可复用嵌套性公共模态窗口，实现逻辑更清晰、可读性强的效果。
33.2、本发明提供了一种可复用嵌套性公共模态窗口的方法，该方法对于开发团队的分工明确，更加容易控制，并且充分利用可以重用的代码，抽象出可公用的模块,具有可维护性强的特点，使用效果更好。
34.3、本发明提供了一种可复用嵌套性公共模态窗口的方法，该方法提供的公共模态窗口可兼容不同类型的弹框组件，从而能够更好的实现复用的嵌套性。
附图说明
35.图1为本发明的可复用模态框值传递映射示意图；
36.图2为本发明的模态框元素主结构示意图。
具体实施方式
37.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
38.实施例：
39.如图1-2所示，本发明实施例提供一种可复用嵌套性公共模态窗口的方法，包括以下过程：
40.s1.首先定义一个名为commmodal的vue组件文件，并编写好template分片文件；
41.s2.通过组件javascript逻辑体props属性接收5个外部属性值，具体为：
42.①
title：类型为string，默认值为提示；
43.②
confirmfn：类型为function；
44.③
isshow：类型为boolean，默认值为false；
45.④
isfooter：类型为boolean，默认值为false；
46.⑤
diawidth：类型为string，无默认值，为必传；
47.⑥
confirmtext：类型为string，默认值为“确定”。
48.s3.组件最外层根节点使用v-if定义模态框是否显示，值为配置的dialogshow；
49.s4.组件当被关闭前的方法before-close采用自定义公有方法handleclose，el-dialog组件第一个节点自带slot具名插槽title,此插槽将接收一个同名称为title的变量作为对话框的自定义标题；
50.s5.将插槽内容注入到ele-dialog组件的title内部插槽里面；
51.s6.当外部事件未触发模态对话框显示，该组件内部控制显示的dialogshow值默认为false，el-dialog对话框虽然存在，但不会显示；
52.s7.当props接受到isshow值变成true后，将会改变组件内控制显示的值dialogshow为true，此时对话框出现；
53.s8.当成功执行后会给上级组件呈递一个名为finishcb的自定义事件，该事件将会携带isshow值为false的数据对象，提示上级组件关闭对话框。
54.组件的第一层子元素为elementui组件el-dialog，使用其自带属性visible配置为我们定义的dialogshow共有属性值，用以控制对话框是否显示与隐藏，对话框宽度width使用公有属性值diawidth。
55.步骤s5中组件的第二个节点slot具名插槽为container，用来接收commmodal组件外自定义内容的注入，组件的第三个节点为footer，同样是内部具名插槽接收内容，将会注
入到el-dialog组件里面，并且插槽内容主要存放主组件el-dialog点击确定后所触发的行为，该内容包含两个元素节点，确定与取消按钮，确定按钮所绑定的事件是所定的公有方法confirm函数，取消按钮则为该组件内定义方法handclose函数，确定按钮还会接收自定义文字内容。
56.步骤s6中组件内watch时刻检测着isshow的变化，外部事件会给我们定义的commmodal组件传递各个方法与值。
57.步骤s7中对话框出现的同时外部事件会传递title标题文字、本次对话框的宽度、点击关闭前所触发的回调函数handleclose，以及接收点击确定后所触发的自定义函数。
58.步骤s8中成功执行后如果用户点击取消则会不执行任何行为事件直接传值关闭对话框。
59.尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。