vue项目实践2——封装弹框模块

前言

本文承接前一篇文章vue项目实践1——构建项目，在构建项目的基础上进行弹框组件的封装。弹框组件强调js动态调用、异步处理用户交互事件。

另外，关于弹框模块实现上基础的网上有很多讲解，进阶的封装借鉴了C#的语法和Qt的弹窗，封装后使用方便，但封装的思想和实现不太好讲清楚。有兴趣的可以去看我的github：https://github.com/sunhuili/v...。

开发前配置

基于当前构建的项目，我们需要再进行一些配置，以便更便捷舒适的开发体验。当前项目目录结构如下：

配置资源文件路径别名

如下图所示：

配置

在webpack的配置文件webpack.base.conf.js中加入scss、assets、static三个文件的路径别名即可（重启项目后生效）。

使用

• 1、scss文件的引用

• 2、图片的引用

• 3、动态图片引用

  data() {
    return {
      loadingSrc: require('static/images/loading.gif'),
    }
  },

原理

• 1、static与assets的区别
  assets：项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，编译后文件名会加上版本hash作为后缀。
  static：不会被webpack处理、解析，会被直接复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过config.js文件中的build.assetsPublicPath和build.assetsSubDirectory链接来确定的。任何放在static中的文件都需要以绝对路径的形式引用“/static/[filename]”。

  综上：根据webpack的特性，总的来说就是static放不会变动的第三方文件，assets放可能会变动的文件。

• 2、动态加载和静态加载的区别
  静态加载：直接在template标签内引用，直接按路径来就可以了。
  动态绑定：script标签内的引用，因为webpack中图片资源是作为模块引入的，所以不能直接用路径。
• 3、配路径别名的重要性
  更舒适的编程体验：使用别名后可以直接用绝对路径，不用一直../向上查找相对路径。
  便于模块化处理：使用别名后便于迁移，不会因为换个路径就报一堆错。
  可以配合基路由的配置：这个是最重要一点，前端项目编译后不一定有专门的前端服务器，很可能是前套在后端服务器的文件路径中，如http://192.168.3.10/qianduan/... ,其中‘qianduan’就是我们的基路由，这时候因为static文件夹下文件用绝对路径引用，就会导致开发和线上路径不一致，从而导致各种问题。而设置了路径别名后就不需要担心开发和线上路径不一致的问题了。

基础样式配置

如图所示，定义好基色调、常用样式（这里多用flex布局）。

配套路由和测试页面

测试页面一览

封装弹框组件

如图所示目录，弹框组件放在‘src/plugin/dialog’目录下。

dialog文件夹下各文件介绍

• 1、dialog/index.js是给外部调用的文件；
• 2、dialog.scss是弹框的样式（这里省事的所有弹框用了同一套）；
• 3、alert、confirm等文件夹里是具体弹框的实现。

具体弹框实现，以alert为例

alert文件夹下包含两个文件：alert.vue、index.js

• 1、alert.vue：alert弹框组件（同一般的vue组件），实现alert的界面显示。
• 2、index.js：alert调用方法，封装使我们可以通过js语法动态调用alert弹框，包括js弹出窗口、js关闭窗口、异步获取用户点击事件。
  实现如下图：

  

使用方式

• 1、直接引用

  

• 2、绑定为Vue的属性

  

结语

github上vue项目持续更新https://github.com/sunhuili/v... ，主要是项目中积累的公用模块和实用配置，欢迎大家一起交流技术。