Vue插件编写

栏目: JavaScript · 发布时间: 5年前

内容简介:有时候要写一个弹窗或者 Toast 组件,用的时候总不可能要打它引入到 template 中,这时候就需要 Vue 的自定义插件了这里以一个 toast 插件为例

有时候要写一个弹窗或者 Toast 组件,用的时候总不可能要打它引入到 template 中,这时候就需要 Vue 的自定义插件了

插件通常会为 Vue 添加全局功能

  1. 添加全局方法或者属性,如: vue-custom-element

  2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch

  3. 通过全局 mixin 方法添加一些组件选项,如: vue-router

  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router

Toast 插件编写

这里以一个 toast 插件为例

<template>
  <transition name="slideup">
    <div v-show="active">
      <span></span>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      active: false,
      text: " "
    };
  },
  methods: {
    show(text) {
      if (text) {
        this.text = text;
      }
      this.active = true;
      setTimeout(() => this.hide(), 2000);
    },
    hide() {
      this.active = false;
      // 结束动画时间, 记得销毁
      setTimeout(() => this.$destroy(), 350);
    }
  },
  destroyed() {
    // 销毁时候移除DOM
    document.body.removeChild(this.$el);
  },
  install(Vue) {
    // 创建组件
    const VueToast = Vue.extend(this);
    // 导出方法到Vue.prototype
    Vue.prototype.$toast = params => {
      // 创建实例
      var toast = new VueToast();
      // 渲染生成html,toast.$el
      toast.$mount();
      // html放到dom上
      document.body.appendChild(toast.$el);
      toast.show(params);
    };
  }
};
</script>

可以看出比一般的组件多了 install 方法和执行生命周期的一些方法,因此需要熟悉组件和 Vue 生命周期

核心方法是 install,把$toast 绑定在 Vue.prototype 上

Vue插件编写

Toast 插件使用

import Toast from './components/Toast.vue'
Vue.use(Toast)

Vue.use 注册一次即可在任何地方使用。多注册也不用担心 Vue.use 会自动阻止多次注册相同插件,届时只会注册一次该插件

在任意组件内通过 this.$toast("提示信息"); 即可使用

另一种写法

还有一种就是把 install 方法拆分出去形成一个单独的 js 文件,代码如下。

此种的好处是不对组件干扰,也可以使用 Vue.extend 对组件进行拓展

import Toast from './components/Toast.js'
Vue.use(Toast)
<template>
  <transition name="slideup">
    <div v-show="active">
      <span></span>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      active: false,
      text: " "
    };
  },
  methods: {
    show(text) {
      if (text) {
        this.text = text;
      }
      this.active = true;
    },
    hide() {
      this.active = false;
    }
  }
};
</script>
import Toast_Vue from './Toast.vue'

const Toast = {
  install(Vue) {
    // 返回构造器
    let creater = Vue.extend(Toast_Vue)
    function toast(param) {
      let instance = new creater()
      instance.$mount()
      instance.text = param
      document.body.appendChild(instance.$el)
      instance.active = true
      setTimeout(() => instance.hide(), 2000)
      setTimeout(() => {
        document.body.removeChild(instance.$el)
        instance.$destroy()
      }, 2500)
    }
    Vue.prototype.$toast = toast
  }
}

export default Toast

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

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web程序设计

Web程序设计

(美)塞巴斯塔 / 王春智、刘伟梅 / 清华大学出版社 / 2011-1 / 69.00元

《Web程序设计(第6版)》浓墨重彩地描述客户端和服务器端Web开发技术,深入分析Web站点构造和维护工具,并透彻讲解主流Web编程语言。《Web程序设计(第6版)》对上一版内容做了全面细致的修改,并融入了NetBeans 6.7、Visual Studio 8和ASP.NET Web服务等最新技术。《Web程序设计(第6版)》既可以作为高校教材,也可供专业Web编程人员参考使用。一起来看看 《Web程序设计》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具