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

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

查看所有标签

猜你喜欢:

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

程序设计语言

程序设计语言

斯科特 / 裘宗燕 / 电子工业出版社 / 2005-1 / 88.00元

这是一本很有特色的教材,其核心是讨论程序设计语言的工作原理和技术。本书融合了传统的程序设计语言教科书和编译教科书的有关知识,并增加了一些有关汇编层体系结构的材料,以满足没学过计算机组织的学生们的需要。书中通过各种语言的例子,阐释了程序设计语言的重要基础概念,讨论了各种概念之间的关系,解释了语言中许多结构的形成和发展过程,以及它们演化为今天这种形式的根源。书中还详细讨论了编译器的工作方式和工作过程,......一起来看看 《程序设计语言》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具