电商写关键插件怎么写？小乐来为大家解答

您好,今天小乐来为大家解答以上的问题。电商写关键插件怎么写相信很多小伙伴还不知道,现在让我们一起来看看吧！

电商写关键插件怎么写？小乐来为大家解答

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

2、在一个项目中，尤其是大型项目，有很多部分需要复用，比如加载的loading动画，弹出框。

3、如果一个一个的引用也稍显麻烦，而且在一个vue文件中引用的组件多了，会显得代码臃肿，所以才有了封装vue插件的需求。

4、说完需求，就来看看具体实现。

5、目前我尝试了两种不一样的插件编写的方法，逐个介绍。

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

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

8、目前使用起来是酱紫的： toast插件toast文件下有两个文件，后缀为vue的文件就是这个插件的骨架，js文件一个是将这个骨架放入Vue全局中，并写明作逻辑。

9、可以看一下toast.vue的内容：{{message}}export default {data() {return {show: false,message: ""};}};.toast {ition: 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-lee-active {transition: 0.3s ease-out;}.fade-enter {opacity: 0;transform: scale(1.2);}.fade-lee-to {opacity: 0;transform: scale(0.8);} 这里面主要的内容只有两个，决定是否显示的show和显示什么内容的message。

10、粗看这里，有没有发现什么问题？这个文件中并没有props属性，也就是无论是show也好，message也好，就没有办法通过父子组件通信的方式进行修改，那他们是怎么正确处理的呢。

11、别急，来看他的配置文件。

12、index.js:import ToastComponent from './toast.vue'const Toast = {};// 注册ToastToast.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 这里的逻辑大致可以分成这么几步：创建一个空对象，这个对象就是日后要使用到的插件的名字。

13、此外，这个对象中要有一个install的函数。

14、使用vue的extend方法创建一个插件的构造函数（可以看做创建了一个vue的子类），实例化该子类，之后的所有作都可以通过这个子类完成。

15、之后再Vue的原型上添加一个共用的方法。

16、这里需要着重提的是Vue.extend()。

17、举个例子，我们日常使用vue编写组件是这个样子的：{template:'这是组件'}) 这是全局组件的注册方法，但其实这是一个语法糖，真正的运行过程是这样的：let component = Vue.extend({template:'这是组件'} Vue.extend会返回一个对象，按照大多数资料上提及的，也可以说是返回一个Vue的子类，既然是子类，就没有办法直接通过他使用Vue原型上的方法，所以需要new一个实例出来使用。

18、在代码里console.log(instance) 得出的是这样的结果：可以看到$el:div.toast也就是toast组件模板的根。

本文到这结束，希望上面文章对大家有所帮助。