欢迎光临
我的个人博客网站

vuejs怎样封装一个插件(以封装vue-toast为例扩展)


插件介绍

插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种:

  • 1.添加全局方法或者属性,如: vue-custom-element
  • 2.添加全局资源:指令/过滤器/过渡等,如 vue-touch
  • 3.通过全局 mixin 方法添加一些组件选项,如: vue-router
  • 4.添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 5.一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router

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

MyPlugin.install = function (Vue, options) {   // 1. 添加全局方法或属性   Vue.myGlobalMethod = function () {     // 逻辑...   }    // 2. 添加全局资源   Vue.directive('my-directive', {     bind (el, binding, vnode, oldVnode) {       // 逻辑...     }     ...   })    // 3. 注入组件   Vue.mixin({     created: function () {       // 逻辑...     }     ...   })    // 4. 添加实例方法   Vue.prototype.$myMethod = function (methodOptions) {     // 逻辑...   } }

使用方式很简单,通过全局方法Vue.use()来使用插件。

下面开发一个简单的在控制台打印消息插件,新建一个toast.js:

var Toast = {}; Toast.install = function (Vue, options) {     Vue.prototype.$msg = 'Hello World'; } export default Toast;

在main.js中引入该toast.js并使用vue.use()安装该toast插件:

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

然后我们在任意vue页面就可以调用:

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

 开发vue-toast插件

该插件实现的效果:

  • 1.提示内容可以显示在不同的位置(顶部、底部、中间),调用方式this.$toast.top(‘填写的提示内容’)this.$toast.center(‘填写的提示内容’)this.$toast.bottom(‘填写的提示内容’)
  • 2.通过this.$toast(‘填写的提示内容’)调用该插件,默认展示在底部;
  • 3.toast有默认的展示持续时间,也可配置toast展示的持续时间。

toast.js实现代码如下:

let Toast = {}; Toast.install = function(Vue,options) {   let opts = {     type: 'bottom', // 显示位置     duration: 2500  // 持续时间   }   for(let prop in options) {     if(options.hasOwnProperty(prop)) {       opts[prop] = options[prop];     }   }      Vue.prototype.$toast = (tips,type) => {     if(type) {       opts.type = type;     }     if(document.getElementsByClassName('vue-toast').length) {       return false;     }     let ToastEl = Vue.extend({       template: `<div class="vue-toast vue-toast__${opts.type}">${tips}</div>`     })     let toastElement = new ToastEl().$mount().$el;     document.body.append(toastElement);     setTimeout(() => {       document.body.removeChild(toastElement);     },opts.duration);   }      ['top','center','bottom'].forEach((type) => {     Vue.prototype.$toast[type] = (tips) => {      return Vue.prototype.$toast(tips,type)     }   }) }  export default Toast;

 优化vue-toast

调用方式更通用,如下所示:

this.toast = this.$toast({         message: '这是一段信息',         position: 'top',         duration: 0       });

可以手动关闭弹框

this.toast.close();

实现方式就是封装成一个构造函数,整体代码如下:

function Toast() {   this.toastTimer = false; // toastTimer:toast定时器   this.toastVM = null; // toastVM:存储toast VM   this.install = function(Vue,options) {     let opts = {       message: '', // 文本内容       position: 'bottom', // 显示位置       duration: 2500,  // 展示时长(ms),值为 0 时,toast 不会消失       className: ''  // 自定义类名     }      /** toast提示方法      * @params {Object|String} config 配置,如果为字符串=message      * */     Vue.prototype.$toast = (config) => {       let option = {};       let self = this;       Object.assign(option,opts,options);        if(typeof config === 'object') {         Object.assign(option,config)       } else { // 如果是字符串,传递的是message文本内容         option.message = config;       }        if(this.toastTimer) { // 如果toast还在,则取消上次消失时间         clearTimeout(this.toastTimer);         this.toastVM.show = false;       }        if(!this.toastVM) {         let ToastEl = Vue.extend({           data() {             return {               show: false,               message: option.message,               className: option.className             }           },           methods: {             // 关闭toast             close() {               self.toastVM.show = false;             }           },           render(createElement) {             if(!this.show) {               return false;             }             return createElement(             'div',             {               class: ['lx-toast',`lx-toast-${option.position}`,this.className],               show: this.show,               domProps: {                 innerHTML: this.message               }             },             )           }         })         this.toastVM = new ToastEl();         document.body.append(this.toastVM.$mount().$el);       }       this.toastVM.show = true;       this.toastVM.message = option.message;       this.toastVM.className = option.className;       this.toastVM.position = option.position;        if(option.duration != 0) {// 为0的时候一直显示         this.toastTimer = setTimeout(() => {             this.toastVM.show = this.toastTimer = false;         },option.duration)       }       return this.toastVM;     }   } }  export default new Toast();

使用方式:

<template>   <div class="test">     <button @click="open">开启弹框</button>     <button @click="close">关闭弹框</button>   </div> </template>  <script> export default {   data () {     return {       toast: null     }   },    methods: {     open() {       this.toast = this.$toast({         message: '这是一段信息',         position: 'top',         duration: 0       });     },     close() {       this.toast.close();     }   } } </script>

添加loading方法

完整代码:

function Toast() {   this.toastTimer = false; // toastTimer:toast定时器   this.toastVM = null; // toastVM:存储toast VM   this.showLoad = false;  // 存储loading显示状态   this.loadNode = null; // 存储loading节点元素   this.install = function(Vue,options) {     let opts = {       message: '', // 文本内容       position: 'bottom', // 显示位置       duration: 2500,  // 展示时长(ms),值为 0 时,toast 不会消失       className: ''  // 自定义类名     }      /** toast提示方法      * @params {Object|String} config 配置,如果为字符串=message      * */     Vue.prototype.$toast = (config) => {       let option = {};       let self = this;       Object.assign(option,opts,options);        if(typeof config === 'object') {         Object.assign(option,config)       } else { // 如果是字符串,传递的是message文本内容         option.message = config;       }        if(this.toastTimer) { // 如果toast还在,则取消上次消失时间         clearTimeout(this.toastTimer);         this.toastVM.show = false;       }        if(!this.toastVM) {         let ToastEl = Vue.extend({           data() {             return {               show: false,               message: option.message,               className: option.className             }           },           methods: {             // 关闭toast             close() {               self.toastVM.show = false;             }           },           render(createElement) {             if(!this.show) {               return false;             }             return createElement(             'div',             {               class: ['lx-toast',`lx-toast-${option.position}`,this.className],               show: this.show,               domProps: {                 innerHTML: this.message               }             },             )           }         })         this.toastVM = new ToastEl();         document.body.append(this.toastVM.$mount().$el);       }       this.toastVM.show = true;       this.toastVM.message = option.message;       this.toastVM.className = option.className;       this.toastVM.position = option.position;        if(option.duration != 0) {// 为0的时候一直显示         this.toastTimer = setTimeout(() => {             this.toastVM.show = this.toastTimer = false;         },option.duration)       }       return this.toastVM;     }      /** $loading加载      * @params {Object|String} config 配置,如果为字符串=message      * */     Vue.prototype.$loading = (config) => {       let option = {};       let self = this;       if(typeof config === 'object') {         Object.assign(option,config)       } else { // 传递的字符串         option.message = config;       }        if(option.type == 'close') {         if(this.loadNode) {            this.loadNode.show = this.showLoad = false;         }       } else {         if(this.showLoad && this.loadNode) {           this.loadNode.message = option.message;           return false;         }         const loadEl = Vue.extend({           data() {             return {               show: false,               message: option.message             }           },           methods: {             close() {               self.loadNode.show = self.showLoad = false;             }           },           render(h) {             if(!this.show) {               return false;             }             return h('div',{               class: 'lx-load-mark',               show: this.show             },[               h('div',{                 class: 'lx-load-box'               },[                 h('div',{                   class: this.message ? 'lx-loading':'lx-loading-nocontent'                 },Array.apply(null,{length: 12}).map((value,index) => {                   return h('div',{                     class: ['loading_leaf',`loading_leaf_${index}`]                   })                 })),                 h('div',{                   class: 'lx-load-content',                   domProps: {                     innerHTML: this.message                   }                 })               ])             ])           }         })          this.loadNode = new loadEl();         document.body.appendChild(this.loadNode.$mount().$el);         this.loadNode.show = this.showLoad = true;       }       return this.loadNode;     }      ['open','close'].forEach(type => {       Vue.prototype.$loading[type] = (message) => {         return Vue.prototype.$loading({type,message})       }     })   } }  export default new Toast();

完整的调用方式:

<template>   <div class="test">     <button @click="open">开启弹框</button>     <button @click="close">关闭弹框</button>   </div> </template>  <script> export default {   data () {     return {       toast: null     }   },    mounted() {     let loading = this.$loading({       message: '这是loading文字'     })      setTimeout(() => { // 5s 后关闭弹框       loading.close();     },5000);   },    methods: {     open() {       this.toast = this.$toast({         message: '这是一段信息',         position: 'top',         duration: 0       });     },     close() {       this.toast.close();     }   } } </script>

 toast.css代码:

.lx-toast {     position: fixed;     bottom: 100px;     left: 50%;     -webkit-box-sizing: border-box;             box-sizing: border-box;     max-width: 80%;     height: 40px;     line-height: 20px;     padding: 10px 20px;     transform: translateX(-50%);     -webkit-transform: translateX(-50%);     text-align: center;     z-index: 9999;     font-size: 14px;     color: #fff;     border-radius: 5px;     background: rgba(0, 0, 0, 0.7);     animation: show-toast .5s;     -webkit-animation: show-toast .5s;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; }  .lx-toast.lx-word-wrap {     width: 80%;     white-space: inherit;     height: auto; }  .lx-toast.lx-toast-top {     top: 50px;     bottom: inherit; }  .lx-toast.lx-toast-center {     top: 50%;     margin-top: -20px;     bottom: inherit; }  @-webkit-keyframes show-toast {     from {         opacity: 0;     }     to {         opacity: 1;     } }  @keyframes show-toast {     from {         opacity: 0;     }     to {         opacity: 1;     } }  .lx-load-mark {     position: fixed;     left: 0;     top: 0;     width: 100%;     height: 100%;     z-index: 9999; }  .lx-load-box {     position: fixed;     z-index: 3;     width: 7.6em;     min-height: 7.6em;     top: 180px;     left: 50%;     margin-left: -3.8em;     background: rgba(0, 0, 0, 0.7);     text-align: center;     border-radius: 5px;     color: #FFFFFF; }  .lx-load-content {     margin-top: 64%;     font-size: 14px; }  .lx-loading, .lx-loading-nocontent {     position: absolute;     width: 0px;     left: 50%;     top: 38%; }  .lx-loading-nocontent {     top: 50%; }  .loading_leaf {     position: absolute;     top: -1px;     opacity: 0.25; }  .loading_leaf:before {     content: " ";     position: absolute;     width: 9.14px;     height: 3.08px;     background: #d1d1d5;     -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;             box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;     border-radius: 1px;     -webkit-transform-origin: left 50% 0px;     transform-origin: left 50% 0px; }  .loading_leaf_0 {     -webkit-animation: opacity-0 1.25s linear infinite;     animation: opacity-0 1.25s linear infinite; }  .loading_leaf_0:before {     -webkit-transform: rotate(0deg) translate(7.92px, 0px);     transform: rotate(0deg) translate(7.92px, 0px); }  .loading_leaf_1 {     -webkit-animation: opacity-1 1.25s linear infinite;     animation: opacity-1 1.25s linear infinite; }  .loading_leaf_1:before {     -webkit-transform: rotate(30deg) translate(7.92px, 0px);     transform: rotate(30deg) translate(7.92px, 0px); }  .loading_leaf_2 {     -webkit-animation: opacity-2 1.25s linear infinite;     animation: opacity-2 1.25s linear infinite; }  .loading_leaf_2:before {     -webkit-transform: rotate(60deg) translate(7.92px, 0px);     transform: rotate(60deg) translate(7.92px, 0px); }  .loading_leaf_3 {     -webkit-animation: opacity-3 1.25s linear infinite;     animation: opacity-3 1.25s linear infinite; }  .loading_leaf_3:before {     -webkit-transform: rotate(90deg) translate(7.92px, 0px);     transform: rotate(90deg) translate(7.92px, 0px); }  .loading_leaf_4 {     -webkit-animation: opacity-4 1.25s linear infinite;     animation: opacity-4 1.25s linear infinite; }  .loading_leaf_4:before {     -webkit-transform: rotate(120deg) translate(7.92px, 0px);     transform: rotate(120deg) translate(7.92px, 0px); }  .loading_leaf_5 {     -webkit-animation: opacity-5 1.25s linear infinite;     animation: opacity-5 1.25s linear infinite; }  .loading_leaf_5:before {     -webkit-transform: rotate(150deg) translate(7.92px, 0px);     transform: rotate(150deg) translate(7.92px, 0px); }  .loading_leaf_6 {     -webkit-animation: opacity-6 1.25s linear infinite;     animation: opacity-6 1.25s linear infinite; }  .loading_leaf_6:before {     -webkit-transform: rotate(180deg) translate(7.92px, 0px);     transform: rotate(180deg) translate(7.92px, 0px); }  .loading_leaf_7 {     -webkit-animation: opacity-7 1.25s linear infinite;     animation: opacity-7 1.25s linear infinite; }  .loading_leaf_7:before {     -webkit-transform: rotate(210deg) translate(7.92px, 0px);     transform: rotate(210deg) translate(7.92px, 0px); }  .loading_leaf_8 {     -webkit-animation: opacity-8 1.25s linear infinite;     animation: opacity-8 1.25s linear infinite; }  .loading_leaf_8:before {     -webkit-transform: rotate(240deg) translate(7.92px, 0px);     transform: rotate(240deg) translate(7.92px, 0px); }  .loading_leaf_9 {     -webkit-animation: opacity-9 1.25s linear infinite;     animation: opacity-9 1.25s linear infinite; }  .loading_leaf_9:before {     -webkit-transform: rotate(270deg) translate(7.92px, 0px);     transform: rotate(270deg) translate(7.92px, 0px); }  .loading_leaf_10 {     -webkit-animation: opacity-10 1.25s linear infinite;     animation: opacity-10 1.25s linear infinite; }  .loading_leaf_10:before {     -webkit-transform: rotate(300deg) translate(7.92px, 0px);     transform: rotate(300deg) translate(7.92px, 0px); }  .loading_leaf_11 {     -webkit-animation: opacity-11 1.25s linear infinite;     animation: opacity-11 1.25s linear infinite; }  .loading_leaf_11:before {     -webkit-transform: rotate(330deg) translate(7.92px, 0px);     transform: rotate(330deg) translate(7.92px, 0px); }  @-webkit-keyframes opacity-0 {     0% {         opacity: 0.25;     }     0.01% {         opacity: 0.25;     }     0.02% {         opacity: 1;     }     60.01% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @keyframes opacity-0 {     0% {         opacity: 0.25;     }     0.01% {         opacity: 0.25;     }     0.02% {         opacity: 1;     }     60.01% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @-webkit-keyframes opacity-1 {     0% {         opacity: 0.25;     }     8.34333% {         opacity: 0.25;     }     8.35333% {         opacity: 1;     }     68.3433% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @keyframes opacity-1 {     0% {         opacity: 0.25;     }     8.34333% {         opacity: 0.25;     }     8.35333% {         opacity: 1;     }     68.3433% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @-webkit-keyframes opacity-2 {     0% {         opacity: 0.25;     }     16.6767% {         opacity: 0.25;     }     16.6867% {         opacity: 1;     }     76.6767% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @keyframes opacity-2 {     0% {         opacity: 0.25;     }     16.6767% {         opacity: 0.25;     }     16.6867% {         opacity: 1;     }     76.6767% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @-webkit-keyframes opacity-3 {     0% {         opacity: 0.25;     }     25.01% {         opacity: 0.25;     }     25.02% {         opacity: 1;     }     85.01% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @keyframes opacity-3 {     0% {         opacity: 0.25;     }     25.01% {         opacity: 0.25;     }     25.02% {         opacity: 1;     }     85.01% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @-webkit-keyframes opacity-4 {     0% {         opacity: 0.25;     }     33.3433% {         opacity: 0.25;     }     33.3533% {         opacity: 1;     }     93.3433% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @keyframes opacity-4 {     0% {         opacity: 0.25;     }     33.3433% {         opacity: 0.25;     }     33.3533% {         opacity: 1;     }     93.3433% {         opacity: 0.25;     }     100% {         opacity: 0.25;     } }  @-webkit-keyframes opacity-5 {     0% {         opacity: 0.270958333333333;     }     41.6767% {         opacity: 0.25;     }     41.6867% {         opacity: 1;     }     1.67667% {         opacity: 0.25;     }     100% {         opacity: 0.270958333333333;     } }  @keyframes opacity-5 {     0% {         opacity: 0.270958333333333;     }     41.6767% {         opacity: 0.25;     }     41.6867% {         opacity: 1;     }     1.67667% {         opacity: 0.25;     }     100% {         opacity: 0.270958333333333;     } }  @-webkit-keyframes opacity-6 {     0% {         opacity: 0.375125;     }     50.01% {         opacity: 0.25;     }     50.02% {         opacity: 1;     }     10.01% {         opacity: 0.25;     }     100% {         opacity: 0.375125;     } }  @keyframes opacity-6 {     0% {         opacity: 0.375125;     }     50.01% {         opacity: 0.25;     }     50.02% {         opacity: 1;     }     10.01% {         opacity: 0.25;     }     100% {         opacity: 0.375125;     } }  @-webkit-keyframes opacity-7 {     0% {         opacity: 0.479291666666667;     }     58.3433% {         opacity: 0.25;     }     58.3533% {         opacity: 1;     }     18.3433% {         opacity: 0.25;     }     100% {         opacity: 0.479291666666667;     } }  @keyframes opacity-7 {     0% {         opacity: 0.479291666666667;     }     58.3433% {         opacity: 0.25;     }     58.3533% {         opacity: 1;     }     18.3433% {         opacity: 0.25;     }     100% {         opacity: 0.479291666666667;     } }  @-webkit-keyframes opacity-8 {     0% {         opacity: 0.583458333333333;     }     66.6767% {         opacity: 0.25;     }     66.6867% {         opacity: 1;     }     26.6767% {         opacity: 0.25;     }     100% {         opacity: 0.583458333333333;     } }  @keyframes opacity-8 {     0% {         opacity: 0.583458333333333;     }     66.6767% {         opacity: 0.25;     }     66.6867% {         opacity: 1;     }     26.6767% {         opacity: 0.25;     }     100% {         opacity: 0.583458333333333;     } }  @-webkit-keyframes opacity-9 {     0% {         opacity: 0.687625;     }     75.01% {         opacity: 0.25;     }     75.02% {         opacity: 1;     }     35.01% {         opacity: 0.25;     }     100% {         opacity: 0.687625;     } }  @keyframes opacity-9 {     0% {         opacity: 0.687625;     }     75.01% {         opacity: 0.25;     }     75.02% {         opacity: 1;     }     35.01% {         opacity: 0.25;     }     100% {         opacity: 0.687625;     } }  @-webkit-keyframes opacity-10 {     0% {         opacity: 0.791791666666667;     }     83.3433% {         opacity: 0.25;     }     83.3533% {         opacity: 1;     }     43.3433% {         opacity: 0.25;     }     100% {         opacity: 0.791791666666667;     } }  @keyframes opacity-10 {     0% {         opacity: 0.791791666666667;     }     83.3433% {         opacity: 0.25;     }     83.3533% {         opacity: 1;     }     43.3433% {         opacity: 0.25;     }     100% {         opacity: 0.791791666666667;     } }  @-webkit-keyframes opacity-11 {     0% {         opacity: 0.895958333333333;     }     91.6767% {         opacity: 0.25;     }     91.6867% {         opacity: 1;     }     51.6767% {         opacity: 0.25;     }     100% {         opacity: 0.895958333333333;     } }  @keyframes opacity-11 {     0% {         opacity: 0.895958333333333;     }     91.6767% {         opacity: 0.25;     }     91.6867% {         opacity: 1;     }     51.6767% {         opacity: 0.25;     }     100% {         opacity: 0.895958333333333;     } }

参考

赞(0) 打赏
未经允许不得转载:张拓的天空 » vuejs怎样封装一个插件(以封装vue-toast为例扩展)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏