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

前言

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

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

开发前配置

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

clipboard.png

配置资源文件路径别名

如下图所示:

clipboard.png

配置

在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布局)。

clipboard.png

clipboard.png

配套路由和测试页面

clipboard.png

测试页面一览

clipboard.png

封装弹框组件

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

clipboard.png

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关闭窗口、异步获取用户点击事件。
    实现如下图:

    clipboard.png

使用方式

  • 1、直接引用

    clipboard.png

  • 2、绑定为Vue的属性

    clipboard.png

结语

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

你可能感兴趣的:(dialog,vue.js)