vue.js插件开发详解

前言

作为vue.js越来越火，Vue。js的相关插件也不断贡献，无数。例如，官方推荐的Vue公司的路由器，vuex，等等，都是非常优秀的plug-ins.but我们更多的还只停留在使用阶段不发展。这么一个简单的Vue插件会烤面包来了解和使用这个插件的掌握发展。

理解插件

要开发插件，您需要知道插件是什么样子的。

插件对于Vue.js应该有一个开放的方法，安装。该方法的第一个参数是Vue构造函数，第二个参数是一个可选的选择对象：
myplugin.install =功能（VUE，选项）{
(Vue.myGlobalMethod = function) {/ / 1. 添加全局方法或属性，如：Vue自定义元素
逻辑…
}
vue.directive（'my-directive '，2。{ / /添加全局资源：命令/过滤/过渡，如Vue触摸
绑定（EL绑定，实现，oldvnode）{
逻辑…
}
…
}）
Vue.mixin（{
创建：（函数）{ 3。通过全球混合方法添加一些成分的选择，如：vuex
逻辑…
}
…
}）
Vue。原型。$ MyMethod =功能（选项）{ / / 4。添加一个实例方法，通过将它们添加到vue.prototype实施
逻辑…
}
}
接下来的Vue吐司插件添加一个实例方法实现。让我们在一个小的例子，首先看一下。首先创建一个新的js文件写的插件：toast.js
/ / toast.js
var吐司= { }；
toast.install =功能（VUE，选项）{
Vue。原型。$味精=你好世界；
}
module.exports =吐司；
在main.js，你需要进口toast.js和使用插件通过全球方法Vue.use（）：
/ / main.js
进口Vue from'vue；
从吐司中导入面包；
vue.use（烤面包）；
然后，我们在组件中获取插件定义的MSG属性。
/ / app.vue
出口默认{
挂载（）{
（这console.log美元。味精）； / /你好世界
}
}
你可以看到，控制台已经成功打印出Hello World。现在美元味精可以得到它，我们可以实现我们的Vue吐司插件。

发展Vue吐司

要求：及时弹出调用此美元。土司（网络请求失败）的组成部分，并默认是在底部显示。它可以通过调用此方法的不同位置显示。toast.top美元（）（）或（）toast.center美元。

当我理清思路和提示时，我可以向主体添加一个div来显示提示信息。通过添加不同的类名，我可以开始编写不同的位置。
/ / toast.js
var吐司= { }；
toast.install =功能（VUE，选项）{
Vue.prototype.$toast = = > {(TIPS)
让toasttpl = vue.extend（{ / / 1，创建一个自定义消息模板构造函数
模板：+提示+
}）；
让物流=新toasttpl（山。美元（美元），EL）； / / 2，创建一个实例，安装后的文档的地方
document.body.appendchild（TPL）； / / 3、创建实例添加到身体
setTimeout（）函数（{ / / 4，延迟2.5秒后去除尖
document.body.removechild（TPL）；
}，2500）
}
}
module.exports =吐司；
这似乎很简单，所以我们实现了这个（$），然后显示不同的位置。
/ / toast.js
{底部，'center '，' ' }。foreach（类型= > {
Vue。原型。美元{类型} = = >为{（TIPS）
回到Vue。原型。$吐司（提示型）
}
}）
在这里，类型被传递给$以处理方法中的不同位置。以上是通过添加不同的类名（干杯底、土司顶、土司中心）和烤面包法来进行的。
Vue。原型。$吐司=（提示型）= > { / /添加类型参数
让toasttpl = vue.extend（{ / /添加模板位置
模板：+提示+
}）；
…
}
它似乎是相同的。但如果我想默认在顶部显示，我将这称为（）每次toast.top美元。似乎有点多余。我能把这个面包直接放在我想要的地方吗我不想2.5s消失呢值得注意的是Toast.install（VUE，选项）选项的参数，我们可以在vue.use（）的参数通过我们想要的选项。插件的最终修改如下：
var吐司= { }；
toast.install =功能（VUE，选项）{
让选择{ { {
defaulttype： / /底部的默认显示位置
持续时间：'2500 ' /时间
}
用于（在选项中允许属性）{
选项{属性} =选项{属性}； /选项配置
}
Vue。原型。$吐司=（提示型）= > {
如果（类型）{
opt.defaulttype =型； / /如果类型设置为型位置。
}
如果（document.getelementsbyclassname（'vue-toast）。长度）{
如果吐司仍然存在，则不再执行
返回；
}
让toasttpl = vue.extend（{
模板：+提示+
}）；
让物流=新toasttpl（美元），山（）美元。埃尔；
document.body.appendchild（TPL）；
setTimeout（）{（）函数（
document.body.removechild（TPL）；
}，选择持续时间）
}
{底部，'center '，' ' }。foreach（类型= > {
Vue。原型。美元{类型} = = >为{（TIPS）
回到Vue。原型。$吐司（提示型）
}
}）
}
module.exports =吐司；
这样一个简单的Vue插件实现，可以打包发布的NPM，下次你可以使用NPM安装安装。

源地址：Vue吐司

以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！