自己动手编写vue之旅

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

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

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

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

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

  1. 添加一些全局方法或属性。
  2. 添加一个或多个全局资源(asset):指令(directives)/过滤器(filters)/过渡(transitions) 等。
  3. 通过全局 mixin,添加一些组件选项。
  4. 添加一些 Vue 实例方法,通过把这些方法添加到 Vue.prototype 上实现。
  5. 一个可以提供 API 的库(library),与此同时也是以上功能的组合。

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

 1 MyPlugin.install = function (Vue, options) {
 2   // 1. 添加全局方法或属性
 3   Vue.myGlobalMethod = function () {
 4     // 一些逻辑……
 5   }
 6
 7   // 2. 添加一个全局资源(asset)
 8   Vue.directive(‘my-directive‘, {
 9     bind (el, binding, vnode, oldVnode) {
10       // 一些逻辑……
11     }
12     ...
13   })
14
15   // 3. 注入一些组件选项
16   Vue.mixin({
17     created: function () {
18       // 一些逻辑……
19     }
20     ...
21   })
22
23   // 4. 添加一个实例方法
24   Vue.prototype.$myMethod = function (methodOptions) {
25     // 一些逻辑……
26   }
27 }
1 通过调用全局方法 Vue.use() 使用插件:
2
3 // 调用 `MyPlugin.install(Vue)`
4 Vue.use(MyPlugin)
5 可以根据情况,传入一些可选的选项:
6
7 Vue.use(MyPlugin, { someOption: true })
8 Vue.use 会自动阻止多次使用同一个插件,所以对于同一个插件的多次调用,将只安装一次。

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

 1 var Loading = {}
 2 var showLoad = false
 3 var loadNode = {}
 4 Loading.install = function (Vue, options) {
 5   Vue.prototype.$loading = function (type) {
 6     if (type === ‘close‘) {
 7       loadNode.show = showLoad = false
 8       document.querySelector(‘.loadEffect‘).remove()
 9     } else {
10       if (showLoad) {
11         return
12       }
13       let LoadingTpl = Vue.extend({
14         data: function () {
15           return {
16             show: showLoad
17           }
18         },
19         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>
20         `
21       })
22       let tpl = new LoadingTpl().$mount().$el
23       document.body.appendChild(tpl)
24       loadNode.show = showLoad = true;
25       [‘open‘, ‘close‘].forEach(function (type) {
26         Vue.prototype.$loading[type] = function () {
27           return Vue.prototype.$loading(type)
28         }
29       })
30     }
31   }
32 }
33
34 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的拦截器这中调用

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

 1 const Message = function (options) {
 2   options = options || {}
 3   options = {
 4     message: options.message,
 5     name: options.name,
 6     state: options.state
 7   }
 8   instance = new MessageConstructor({
 9     data: options
10   })
11   instance.vm = instance.$mount()
12   document.body.appendChild(instance.vm.$el)
13 }
14 Vue.prototype.$message = Message

下面贴出源码地址

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

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

原文地址:https://www.cnblogs.com/songdongdong/p/8638895.html

时间: 2024-10-07 17:54:13

自己动手编写vue之旅的相关文章

Linux 程序设计学习笔记----动手编写makefile文件

Befroe Beginning. 之前定了暑假的plan ,关于Linux的书籍现在在看的是ALP和Linux高级程序设计(杨宗德)第三版.在计划中的是Linux高级环境编程. 现在开始关于Linux程序设计的第一篇学习笔记. 本来打算把名字写成教程,不过觉得自己完全是新手在自学,还是写学习笔记比较负责和适合. 希望可以一起学习进步. 引入 首先我们假设这样一个场景.我们有一个程序包含了三个文件,分别是源码文件main_plus,c和function_plus.c以及头文件mydefine_p

1-自己动手编写ArrayList集合

学习集合的原理,这是一个很简单的代码,没有索引下标越界判断,异常处理等,不够健壮,后面会继续更新完善代码..... 只是入门学习一下 package my; /*** * 自己动手编写一个ArrayList类 * @author 刘诗华 * */ public class ArrayList { //集合默认初始化长度为10个元素 private final static int DEFAULT_CAPACITY = 10; //当前集合中存储了多少个元素 private int size=0;

动手编写Java NIO Socket测试工具

最近一年接触到些使用Java NIO编写的服务器程序,客户程序通过建立Socket连接并发送消息的方式调用服务端提供的交易接口. 开发的时候通常需要发些消息来调试程序,所以自己动手写了个工具.工具使用Swing编写,主要作用就是向指定的IP.端口发送请求消息,并接收响应消息.非常简单,但是足够了. 源代码涉及到以下内容: (1)Java Swing编程中的EDT线程与任务线程,在后台任务线程中执行耗时操作,并在适当的时候更新UI: (2)提供一种Swing界面的构造方式:构造Component.

教你如何编写Vue.js的单元测试的方法

Vue.js是一个JavaScript框架,可用于构建Web应用程序的前端框架.特别是在创建复杂功能时,对于每个项目,有必要在我们的应用程序中查看所有内容,并检查它是否符合预期.然而,对于大型项目,每次新的更新后,检查每个功能将变得很麻烦.因此,我们可以创建可以一直运行的自动化测试,并保证我们的代码可以正常运行.在本文中,我们将为VueJS创建一些简单的单元测试. 要进行测试,我们将先制作一个基本的待办事项列表组件.我们将测试该列表是否正确显示,并且用户可以将新项目添加到待办事项列表中.希望在本

Android开发实践:自己动手编写图片剪裁应用(3)

前面两篇文章分别介绍了我编写的开源项目ImageCropper库,以及如何调用系统的图片剪裁模块,本文则继续分析一下开发Android图片剪裁应用中需要用到的Bitmap操作. 在Android系统中,对图片的操作主要是通过Bitmap类和Matrix类来完成,本文就介绍一下图片剪裁应用中对Bitmap的一些操作,包括:打开.保存.剪裁.旋转等,我已经将这些操作都封装到了一个BitmapHelper.java类中,放到GitHub上了(点击这里),大家可以方便地集成到自己的项目中. 打开图片 图

动手编写插件-javascript分页插件

原来公司用的报表分页插件是C#编写的服务器插件,需要前后台交互,而且不支持ajax. 经过一段时间折腾,我编写了一个轻便的jquery分页插件,支持ajax.下面是插件代码 /* 插件名称:报表分页 作者:Keven 调用方法: 1.在html报表下面增加<div class="pageInfo"></div> 2. javascript代码 $(".pageInfo").PageInit(); 3.定义函数setResult,把json数据

Maven学习 (七) 自己动手编写Maven插件

需求: 在Maven编译项目的时候,统计代码量,即项目中的文件数目.代码行数,包括java文件和配置文件两种:其中配置文件(sql.xml.properties)代码行数/4 处理. 创建项目: 首先确保已安装m2eclipse插件:http://eclipse.org/m2e/ eclipse - new - Maven Project,选择archetype = maven-archetype-plugin:(或用命令 mvn archetype:generate,再按提示操作) 下一步设置

使用vue-cli编写vue插件

利用vue组件创建模板,使用webpack打包生成插件再全局使用 1.vue init webpack-simple 生成项目目录 2.调整目录结构 3.修改webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist')

vue之旅:初识vue

vue是一个mvvm框架(库),和angular类似比较容易上手.小巧 mvc:Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写 而vue是mvvm,m有了,v有了,vm相当于c vue指令  v-xxx 其实vue就是一片html代码配合上json,再new出来vue实例 适合:移动端项目,小巧 目前vue的发展势头很猛,github上的start数量已经超越angular 注意:与angular的共同点:不兼容低版本ie