一、为什么要自己动手写插件呢,原因有二:

  其一:是因为最近产品了提了一个在web端接收,消息通知的需求,产品要求在若干个页面内如果有消息,就要弹出消息弹窗展示给用户,略加思索之后,第一反应就是写个消息的组件,在需要的页面引入,不过写好之后,发现这样写好麻烦,是不是可以写个插件在全局一次性引入呢?

  其二:纯粹的想学习一下vue的插件是如何开发的

二、既然有想法了,那就开始写呗,先去查看了vue的官方文档,官方文档介绍如下:

插件通常用于为 Vue 添加全局级别的功能。然而对于插件,并没有严格限定其使用范围 - 下面是常见的几种插件类型:

  1. 添加一些全局方法或属性。

  2. 添加一个或多个全局资源(asset):指令(directives)/过滤器(filters)/过渡(transitions) 等。

  3. 通过全局 mixin,添加一些组件选项。

  4. 添加一些 Vue 实例方法,通过把这些方法添加到 Vue.prototype 上实现。

  5. 一个可以提供 API 的库(library),与此同时也是以上功能的组合。

Vue.js 插件应该暴露一个 install 方法。此方法在调用时,将 Vue 构造函数作为第一个参数传入,以及将一个可选的选项作为第二个参数传入:

 MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 一些逻辑……
} // 2. 添加一个全局资源(asset)
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 一些逻辑……
}
...
}) // 3. 注入一些组件选项
Vue.mixin({
created: function () {
// 一些逻辑……
}
...
}) // 4. 添加一个实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 一些逻辑……
}
}
 通过调用全局方法 Vue.use() 使用插件:

 // 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
可以根据情况,传入一些可选的选项: Vue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止多次使用同一个插件,所以对于同一个插件的多次调用,将只安装一次。

三、看完文档我们就开始动手写呗(以loading插件为例)

 var Loading = {}
var showLoad = false
var loadNode = {}
Loading.install = function (Vue, options) {
Vue.prototype.$loading = function (type) {
if (type === 'close') {
loadNode.show = showLoad = false
document.querySelector('.loadEffect').remove()
} else {
if (showLoad) {
return
}
let LoadingTpl = Vue.extend({
data: function () {
return {
show: showLoad
}
},
template: `<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><p class="loadings">loading....</p></div>
`
})
let tpl = new LoadingTpl().$mount().$el
document.body.appendChild(tpl)
loadNode.show = showLoad = true;
['open', 'close'].forEach(function (type) {
Vue.prototype.$loading[type] = function () {
return Vue.prototype.$loading(type)
}
})
}
}
} export default Loading
import { Loading} from './Plugins/index'
 Vue.use(Loading)

然后在我们的组件中使用this.$loading来使用,发现没有任何问题。。。。。

但是。。。嘿嘿,总有但是,,没错下面的场景就是万恶的但是。。。。

因为我们发现我们编写的这个插件只能在vue组件中使用,如果我想在axios的拦截器中使用这个插件呢?显然用不了,这是为什么呢?是因为我们在axios中没有访问到vue的实例,因为我们的插件是过载在vue的实例上的

现在怎么办,百度看了很多别人写的博客,不出意外,对就是那个不出意外,没有找到合适的解决方案!!!!!!!!!!!!!!!!!

怎么办呢?放弃?不可能,这辈子是不可能放弃的!!!下辈子也不可能的!!!那怎么办?嘿嘿,世面上还是有很多牛叉的UI库的比如element-ui,然后自己去试了一下,发现element-ui不仅在vue组件中可以使用,也可以在axios的拦截器这中调用

既然发现了,那就去查看他们的源码,看看大佬们是如何实现的,不看不知道,一看吓一跳,老大的代码果然性感,下面贴出我自己删减后实现这个功能的核心代码

 const Message = function (options) {
options = options || {}
options = {
message: options.message,
name: options.name,
state: options.state
}
instance = new MessageConstructor({
data: options
})
instance.vm = instance.$mount()
document.body.appendChild(instance.vm.$el)
}
Vue.prototype.$message = Message

下面贴出源码地址

https://github.com/songdongdong123/vue-message-Plugins

如果对您有帮助不要吝啬您的start

自己动手编写vue插件的更多相关文章

  1. 【Vue】---编写Vue插件流程---【巷子】

    一.在Vue中编写插件流程 1.创建组件 components/message.vue <template> <div class="message" v-if= ...

  2. 自己动手写Vue插件Toast

    <style> .vue-toast { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; backgrou ...

  3. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  4. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  5. 自己动手编写一个VS插件(五)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续编写VisualStudio插件.这次我编写的插件叫DevAssist(意思是开发助手).在看了前面的文章之后你知 ...

  6. Vue插件编写、用法详解(附demo)

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  7. 自己动手编写一个VS插件(七)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续开发VS插件.今天在添加ATL控件时出现一个"未能返回新代码元素"的错误,如下图: 解决办法是 ...

  8. 自己动手编写一个Mybatis插件:Mybatis脱敏插件

    1. 前言 在日常开发中,身份证号.手机号.卡号.客户号等个人信息都需要进行数据脱敏.否则容易造成个人隐私泄露,客户资料泄露,给不法分子可乘之机.但是数据脱敏不是把敏感信息隐藏起来,而是看起来像真的一 ...

  9. 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历

    话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...

随机推荐

  1. Windows路径

    绝对路径 是从盘符开始的路径,形如 C:\windows\system32\cmd.exe 相对路径 是从当前目录开始的路径,假如当前目录为C:\windows 要描述上述路径,只需输入 system ...

  2. hdu4738(边双连通分量,桥)

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. nat模式下更改网络环境, 虚拟机中Linux无法上网的问题

    出现的问题: 1.ifconfig -a 命令下会出现eth0信息中无ip地址等等信息: 2.无法ping通baidu,也就是无法上网: 3.ping 8.8.8.8 提示 connect:netwo ...

  4. Java多线程(一) Thread和 Runnable

    http://www.cnblogs.com/lwbqqyumidi/p/3804883.html 1.继承Thread 2.实现Runnable接口 public class MyRunnable ...

  5. mybatis之多个对象自动装配问题

    因为业务的需要,所以我在一个方法中植入三个对象,但是mybatis并没有自动装配,结果并不是我想的那么美好,还是报错了.报错截图如下: <select id="GetOneBillPa ...

  6. 专题十二:实现一个简单的FTP服务器

    引言: 在本专题中将和大家分享如何自己实现一个简单的FTP服务器.在我们平时的上网过程中,一般都是使用FTP的客户端来对商家提供的服务器进行访问(上传.下载文件),例如我们经常用到微软的SkyDriv ...

  7. mysql中数据库的设计

      软件开发流程(CMMI): 1):项目启动; 2):项目计划: 3):需求分析; 需要得到的结果是什么? 4):系统设计;         该怎么做? 5):系统开发; 6):系统测试; 7):系 ...

  8. Android Could not find com.afollestad:material-dialogs:0.7.6.0 解决

    AS报错:Could not find com.afollestad:material-dialogs:0.7.6.0 网上没有解决方案: 解决: 将用: compile('com.afollesta ...

  9. Android RecyclerView局部刷新那个坑

    关键:public final void notifyItemChanged(int position, Object payload) RecyclerView局部刷新大家都遇到过,有时候还说会遇见 ...

  10. Windows 2008 防火墙开放端口

    当我们使用新服务器架设新主机时,经常会遇到网站无法访问的情况,当问及客服时,经常会告知,操作系统默认不打开80端口,请先确定80是否打开并确定没有被占用.那么,我们该如何打开80端口呢? 方法/步骤 ...