欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js 插件开发详解

程序员文章站 2022-06-09 08:53:53
前言 随着 vue.js 越来越火,vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我...

前言

随着 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 来安装了。

源码地址:

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