实例教学如何写vue插件

日期：2020-05-14 栏目：程序人生浏览：次

在学习之前，先问问自己，为什么要编写vue的插件。

在一个项目中，尤其是大型项目，有很多部分需要复用，比如加载的loading动画，弹出框。如果一个一个的引用也稍显麻烦，而且在一个vue文件中引用的组件多了，会显得代码臃肿，所以才有了封装vue插件的需求。

说完需求，就来看看具体实现。目前我尝试了两种不一样的插件编写的方法，逐个介绍。

这是我的项目目录，大致的结构解释这样，尽量简单，容易理解。

一个是loading插件，一个是toast插件，不同的地方在于：loading插件是作为组件引入使用，而toast插件是直接添加在挂载点里，通过方法改变状态调用的。

目前使用起来是酱紫的：

toast插件

toast文件下有两个文件，后缀为vue的文件就是这个插件的骨架，js文件一个是将这个骨架放入Vue全局中，并写明操作逻辑。

可以看一下toast.vue的内容：

<template>
 <transition name="fade">
  <div v-show="show">
   {{message}}
  </div>

 </transition>
</template>

<script>
export default {
 data() {
 return {
  show: false,
  message: ""
 };
 }
};
</script>

<style lang="scss" scoped>
.toast {
 position: fixed;
 top: 40%;
 left: 50%;
 margin-left: -15vw;
 padding: 2vw;
 width: 30vw;
 font-size: 4vw;
 color: #fff;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 5vw;
 z-index: 999;
}

.fade-enter-active,
.fade-leave-active {
 transition: 0.3s ease-out;
}
.fade-enter {
 opacity: 0;
 transform: scale(1.2);
}
.fade-leave-to {
 opacity: 0;
 transform: scale(0.8);
}
</style>

这里面主要的内容只有两个，决定是否显示的show和显示什么内容的message。

粗看这里，有没有发现什么问题？

这个文件中并没有props属性，也就是无论是show也好，message也好，就没有办法通过父子组件通信的方式进行修改，那他们是怎么正确处理的呢。别急，来看他的配置文件。

index.js:

import ToastComponent from './toast.vue'

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
 // 生成一个Vue的子类
 // 同时这个子类也就是组件
 const ToastConstructor = Vue.extend(ToastComponent)
 // 生成一个该子类的实例
 const instance = new ToastConstructor();

 // 将这个实例挂载在我创建的div上
 // 并将此div加入全局挂载点内部
 instance.$mount(document.createElement('div'))
 document.body.appendChild(instance.$el)
 
 // 通过Vue的原型注册一个方法
 // 让所有实例共享这个方法 
 Vue.prototype.$toast = (msg, duration = 2000) => {
  instance.message = msg;
  instance.show = true;

  setTimeout(() => {
   
   instance.show = false;
  }, duration);
 }
}

export default Toast

转载注明出处：http://www.heiqu.com/3715.html

实例教学如何写vue插件

相关推荐