Vue.js 插件开发详解


Posted in Javascript onMarch 29, 2017

前言

随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用。

认识插件

想要开发插件,先要认识一个插件是什么样子的。

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
 Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element
 // 逻辑...
 }
 Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
 bind (el, binding, vnode, oldVnode) {
 // 逻辑...
 }
 ...
 })
 Vue.mixin({
 created: function () { // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
 // 逻辑...
 }
 ...
 })
 Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
 // 逻辑...
 }
}

接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件:toast.js

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
 Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;

在 main.js 中,需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件:

// main.js
import Vue from 'vue';
import Toast from './toast.js';
Vue.use(Toast);

然后,我们在组件中来获取该插件定义的 $msg 属性。

// App.vue
export default {
 mounted(){
 console.log(this.$msg);  // Hello World
 }
}

可以看到,控制台成功的打印出了 Hello World 。既然 $msg 能获取到,那么我们就可以来实现我们的 vue-toast 插件了。

开发 vue-toast

需求:在组件中通过调用 this.$toast('网络请求失败') 来弹出提示,默认在底部显示。可以通过调用 this.$toast.top() 或 this.$toast.center() 等方法来实现在不同位置显示。

整理一下思路,弹出提示的时候,我可以在 body 中添加一个 div 用来显示提示信息,不同的位置我通过添加不同的类名来定位,那就可以开始写了。

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
 Vue.prototype.$toast = (tips) => {
  let toastTpl = Vue.extend({  // 1、创建构造器,定义好提示信息的模板
   template: '<div class="vue-toast">' + tips + '</div>'
  });
  let tpl = new toastTpl().$mount().$el; // 2、创建实例,挂载到文档以后的地方
  document.body.appendChild(tpl);  // 3、把创建的实例添加到body中
  setTimeout(function () {  // 4、延迟2.5秒后移除该提示
   document.body.removeChild(tpl);
  }, 2500)
 }
}
module.exports = Toast;

好像很简单,我们就实现了 this.$toast() ,接下来显示不同位置。

// toast.js
['bottom', 'center', 'top'].forEach(type => {
 Vue.prototype.$toast[type] = (tips) => {
  return Vue.prototype.$toast(tips,type)
 }
})

这里把 type 传给 $toast 在该方法里进行不同位置的处理,上面说了通过添加不同的类名(toast-bottom、toast-top、toast-center)来实现,那 $toast 方法需要小小修改一下。

Vue.prototype.$toast = (tips,type) => {  // 添加 type 参数
 let toastTpl = Vue.extend({    // 模板添加位置类
  template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>'
 });
 ...
}

好像差不多了。但是如果我想默认在顶部显示,我每次都要调用 this.$toast.top() 好像就有点多余了,我能不能 this.$toast() 就直接在我想要的地方呢?还有我不想要 2.5s 后才消失呢?这时候注意到 Toast.install(Vue,options) 里的 options 参数,我们可以在 Vue.use() 通过 options 传进我们想要的参数。最后修改插件如下:

var Toast = {};
Toast.install = function (Vue, options) {
 let opt = {
  defaultType:'bottom', // 默认显示位置
  duration:'2500'   // 持续时间
 }
 for(let property in options){
  opt[property] = options[property]; // 使用 options 的配置
 }
 Vue.prototype.$toast = (tips,type) => {
  if(type){
   opt.defaultType = type;   // 如果有传type,位置则设为该type
  }
  if(document.getElementsByClassName('vue-toast').length){
   // 如果toast还在,则不再执行
   return;
  }
  let toastTpl = Vue.extend({
   template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
  });
  let tpl = new toastTpl().$mount().$el;
  document.body.appendChild(tpl);
  setTimeout(function () {
   document.body.removeChild(tpl);
  }, opt.duration)
 }
 ['bottom', 'center', 'top'].forEach(type => {
  Vue.prototype.$toast[type] = (tips) => {
   return Vue.prototype.$toast(tips,type)
  }
 })
}
module.exports = Toast;

这样子一个简单的 vue 插件就实现了,并且可以通过 npm 打包发布,下次就可以使用 npm install 来安装了。

源码地址:vue-toast

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jQuery插件制作的实例教程
May 16 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 #Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 #Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
jQuery插件之validation插件
Mar 29 #jQuery
Vue.js实现移动端短信验证码功能
Mar 29 #Javascript
Angular2入门--架构总览
Mar 29 #Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 #Javascript
You might like
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
javascript定时器完整实例
2015/02/10 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
Python中的多重装饰器
2015/04/11 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
详解python中docx库的安装过程
2019/11/08 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
python中的时区问题
2021/01/14 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
严以律己学习心得体会
2016/01/13 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python