手把手教你用vue2.0写个弹窗组件

在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍（https://cn.vuejs.org/v2/guide/plugins.html）

预览地址：http://haogewudi.me/kiko/index.html

源码地址：https://github.com/rascalHao/kiko

搭建项目

1.vue-cli将你的vue项目初始化建好 vue init webpack my-project

2.平常我们引入插件的流程是：

所以可以在node_modules下面新建一个你的开发目录，我这里命名为kiko，所以现在大概引入我们的开发插件的步骤为(项目最终构建完会采取发布npm包的形式)

3.在你的项目目录下通过npm init指令来初始化一个package.json文件，默认指定你的入口文件index.js,并在你的项目根目录下新建一个index.js入口文件

4.这里会构建4中类型的弹窗组件（message、toolTip、confirm、loading）,基本的结构如图所示：

入口文件（可以先略过）

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象;通过全局方法 Vue.use() 使用插件;可以再次看下vue官网的插件介绍

message

在项目的根目录创建message组件，通过

来添加实例方法全局以调用this.$kiko_message()的方式来调用message

message组件结构

main.vue

index.js

到这里的时候可以看下前面的入口文件介绍，你需要通过Vue.component注册为组件，并把Message.installMessage方法绑定到Vue.prototype.$kiko_message上。

toolTip

没有选择通过固化在页面中的方式来引入toolTip,因为考虑到可能在页面中的任何地方引入toolTip,如果固化了，将会大大限制toolTip的使用场景。所以采用了一个绑定到Vue.prototype的this.$kiko_tooltip全局方法来触发，这样就可以自定义触发方式，只需要通过传入$event就可以自动地定位任何有需要的元素了。

toolTip组件结构

同message组件结构

main.vue

index.js

通过Element.getBoundingClientRect()方法获取元素的大小及其相对于视口的位置，之后对提示信息进行fixed定位。

confirm

confirm在保留页面的情况下会弹出一个对话框，适合一些场景更大的情况。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过title属性来显示任意标题，通过width属性来修改显示区域的宽度。

confirm组件结构

同message组件

main.vue

index.js

这里通过组件的方式进行引入，可以只是简单地信息提示，也可以自己进行一些复杂的校验。对组件的显示与隐藏这里引用了.sync修饰符,也可以通过v-if指令。运用slot来分发内容。

loading

考虑到可能不需要整屏渲染,只需要局部加载loading,在指定的位置可以按需通过自定义指令来实现，通过Element.getBoundingClientRect()方法根据需要的元素位置、区域大小自动定位；若想整屏渲染，则需要加个.fullscreen修饰符。

loading组件结构

同message组件

main.vue

index.js

npm 发包

确保你的项目的根目录的package.json文件已经建好

登录npm官网注册

在你的项目目录下登录npm login（之后按提示填写信息）

发包npm publish

如果执行npm publish出现错误，可能是你的包名已经被注册过，在npm 官网上搜索一下是否已被注册了。若发包成功，你就可以在npm官网上搜索到自己的包。

发包成功后，就可以通过

引入你的插件啦。

由于本人学识有限，有很多需要提升的地方，望大家多多指教。