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

前言

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

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

开发前配置

基于当前构建的项目，咱们须要再进行一些配置，以便更便捷温馨的开发体验。当前项目目录结构以下：

配置资源文件路径别名

以下图所示：

配置

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

使用

• 一、scss文件的引用

  <style lang="scss" scoped="">
      @import '~scss/_variable.scss';
  </style>

• 二、图片的引用

  <img src="~static/images/loading.gif">

• 三、动态图片引用

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

原理

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

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

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

基础样式配置

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

配套路由和测试页面

测试页面一览

封装弹框组件

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

dialog文件夹下各文件介绍

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

具体弹框实现，以alert为例

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

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

使用方式

• 一、直接引用

• 二、绑定为Vue的属性

结语

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