[发明专利]基于Vue的弹框组件实现方法及装置

说明书

本发明涉及前端开发领域，本发明旨在解决现有的弹框组件实现方法存在流程不完整以及通用性较低的问题，提出一种基于Vue的弹框组件实现方法及装置，方案概括为：在Vue页面中引入弹框组件并在components中注册并使用，弹框组件包括统一封装的公共内容以及通过slot插槽展示的自定义内容；弹框组件的类型在弹框组件中混入相应的mixin文件；为弹框组件绑定弹框属性并添加相应的逻辑代码；在弹框视图展示之前，根据editData属性中的内容判断是否需要在expandOpen()内获取数据，若是，则获取数据；接收用户的点击事件，根据用户的点击事件改变visible属性实现弹框视图的展示，在弹框视图展示之后，根据用户的点击事件改变visible属性实现弹框视图的隐藏。本发明提高了弹框组件的通用性。

技术领域

本发明涉及前端开发领域，具体来说涉及一种基于Vue的弹框组件实现方法及装置。

背景技术

前端开发的技术逐步走向成熟，框架的出现给前端发开工作带来了许多的便利。Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue.js的出现降低了前端学习和使用难度，让前端开发能更加的简洁、高效，所以受众越来越多。目前前端的主要作用就是把后台数据展示给用户以供交互，为了让用户更方便的去查看数据，通常会使用弹框代替页面的跳转，通过弹框对数据进行展示和编辑更加的直观和方便。因为Vue是组件化开发，很多情况下弹框会被作为一个单独的组件进行封装。

但是目前来说，相对全面和深入的弹框组件还是比较缺乏的，大部分组件只涵盖了表单的输入的验证，但是表单的提交往往伴随着数据的请求和弹框的关闭、组件的刷新等一系列操作，其流程并不完整。此外，由于表单输入的方式各有不同，所以会造成组件通用性较低的问题，无形之中增加了开发的成本，也不利于提高开发的效率。

发明内容

本发明旨在解决现有的弹框组件实现方法存在流程不完整以及通用性较低的问题，提出一种基于Vue的弹框组件实现方法及装置。

本发明解决上述技术问题所采用的技术方案是：基于Vue的弹框组件实现方法，包括以下步骤：

步骤1、在Vue页面中引入弹框组件并在components中注册并使用，所述弹框组件包括统一封装的公共内容以及通过slot插槽展示的自定义内容；

步骤2、获取弹框组件的类型，根据所述弹框组件的类型在弹框组件中混入相应的mixin文件；

步骤3、为弹框组件绑定弹框属性并添加相应的逻辑代码，所述弹框属性至少包括visible属性和editData属性；

步骤4、在弹框视图展示之前，根据所述editData属性中的内容判断弹框子组件是否需要在expandOpen()内获取数据，若是，则获取数据后进入步骤5，否则，直接进入步骤5；

步骤5、接收用户的点击事件，弹框父组件根据用户的点击事件改变visible属性实现弹框视图的展示，在弹框视图展示之后，弹框父组件根据用户的点击事件改变visible属性实现弹框视图的隐藏。

进一步的，所述弹框组件的类型至少包括表单的弹框组件；所述步骤2还包括：在requestMethod()内编写接口请求相关逻辑；所述步骤5还包括：在弹框视图展示之后，判断是否有请求需要提交，若是，则调用requestMethod()方法进行数据的请求。

进一步的，还包括：在表单弹框提交时通过elementUI的表单组件绑定rules进行基础校验或自定义规则校验。

进一步的，所述公共内容包括：弹头部、底部、确认按钮、取消按钮、关闭标志、弹框内容子组件插槽的位置、默认样式、通用属性和自定义事件。

进一步的，所述默认样式为能够通过title()、width()或showFooter()进行修改的默认样式。