Vue.js 插件开发详解
前言
随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用。
原文作者:林鑫,作者博客:https://github.com/lin-xin/blog
认识插件
想要开发插件,先要认识一个插件是什么样子的。
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) {Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element// 逻辑...}Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touchbind (el, binding, vnode, oldVnode) {// 逻辑...}... }) Vue.mixin({created: function () { // 3. 通过全局 mixin方法添加一些组件选项,如: vuex// 逻辑...}... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现// 逻辑...}}
接下来要讲到的 vue-toast 插件则是通过添加实例方法实现的。我们先来看个小例子。先新建个js文件来编写插件:toast.js
// toast.jsvar Toast = {};Toast.install = function (Vue, options) {Vue.prototype.$msg = 'Hello World';}module.exports = Toast;
在 main.js 中,需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件:
// main.jsimport Vue from 'vue';import Toast from './toast.js';Vue.use(Toast);
然后,我们在组件中来获取该插件定义的 $msg 属性。
// App.vueexport default {mounted(){console.log(this.$msg); // Hello World}}
可以看到,控制台成功的打印出了 Hello World 。既然 $msg 能获取到,那么我们就可以来实现我们的 vue-toast 插件了。
开发 vue-toast
需求:在组件中通过调用 this.$toast('网络请求失败') 来弹出提示,默认在底部显示。可以通过调用 this.$toast.top() 或 this.$toast.center() 等方法来实现在不同位置显示。
整理一下思路,弹出提示的时候,我可以在 body 中添加一个 div 用来显示提示信息,不同的位置我通过添加不同的类名来定位,那就可以开始写了。
// toast.jsvar Toast = {};Toast.install = function (Vue, options) {Vue.prototype.$toast = (tips) => {let toastTpl = Vue.extend({ // 1、创建构造器,定义好提示信息的模板template: '<div class="vue-toast">' + tips + '</div>'});let tpl = new toastTpl().$mount().$el; // 2、创建实例,挂载到文档以后的地方document.body.appendChild(tpl); // 3、把创建的实例添加到body中setTimeout(function () { // 4、延迟2.5秒后移除该提示document.body.removeChild(tpl);}, 2500) }}module.exports = Toast;
好像很简单,我们就实现了 this.$toast() ,接下来显示不同位置。
// toast.js['bottom', 'center', 'top'].forEach(type => {Vue.prototype.$toast[type] = (tips) => {return Vue.prototype.$toast(tips,type) }})
这里把 type 传给 $toast 在该方法里进行不同位置的处理,上面说了通过添加不同的类名(toast-bottom、toast-top、toast-center)来实现,那 $toast 方法需要小小修改一下。
Vue.prototype.$toast = (tips,type) => { // 添加 type 参数let toastTpl = Vue.extend({ // 模板添加位置类template: '<div class="vue-toast toast-'+ type +'">' + tips + '</div>'});...}
好像差不多了。但是如果我想默认在顶部显示,我每次都要调用 this.$toast.top() 好像就有点多余了,我能不能 this.$toast() 就直接在我想要的地方呢?还有我不想要 2.5s 后才消失呢?这时候注意到 Toast.install(Vue,options) 里的 options 参数,我们可以在 Vue.use() 通过 options 传进我们想要的参数。最后修改插件如下:
var Toast = {};Toast.install = function (Vue, options) {let opt = {defaultType:'bottom', // 默认显示位置duration:'2500' // 持续时间}for(let property in options){opt[property] = options[property]; // 使用 options 的配置}Vue.prototype.$toast = (tips,type) => {if(type){opt.defaultType = type; // 如果有传type,位置则设为该type}if(document.getElementsByClassName('vue-toast').length){// 如果toast还在,则不再执行return;}let toastTpl = Vue.extend({template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'});let tpl = new toastTpl().$mount().$el;document.body.appendChild(tpl);setTimeout(function () {document.body.removeChild(tpl);}, opt.duration) }['bottom', 'center', 'top'].forEach(type => {Vue.prototype.$toast[type] = (tips) => {return Vue.prototype.$toast(tips,type) }})}module.exports = Toast;
这样子一个简单的 vue 插件就实现了,并且可以通过 npm 打包发布,下次就可以使用 npm install 来安装了。
转载于:https://blog.51cto.com/12879490/1923164
Vue.js 插件开发详解相关推荐
- Vue.js用法详解(一)更新中~
前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
- vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai 转发链接:https://segmentfault.com/a/1190000022757326 前言 vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布( ...
- Vue组件-Confirm详解
Vue组件-Confirm详解 原作者:爱扎马尾的小狮子 一.使用的地方引用,传入属性和方法 在需要的地方引入组件,然后传入对应的属性和方法 组件 <template> <div : ...
- Ruoyi框架学习--Vue前端配置文件详解
CSDN话题挑战赛第2期 参赛话题:学习笔记 1.package.json配置中的重点介绍: 1.许可证:license:各种License介绍(BSD,MIT,MPL,Apache License, ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果 二.Three.js简介 三.Three.js代码正常运行显示条件 (1)不载入 ...
- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言 本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」 难度 ...
- 最全最详细前端vue面试题+详解答案(拿到高薪offer不是梦)
最全vue面试题+详解答案 1.MVC 和 MVVM 区别 MVC MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写,一种软件设计典范. Model(模型) ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三)
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
- Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二)
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(二) 本篇目录: 五.实例中所使用的代码语法详细解释 (1).构建一个三维空间场景 (2).选择一个透视投影相机作为观察点 (a).创 ...
最新文章
- java系统高并发解决方案
- 【UIKit】表格自定义单元格(UITableViewCll)
- java做一个客房管理系统定制_Java实现酒店客房管理系统
- Oracle学习网站
- android:inputtype有哪些类型,android:inputType参数类型说明
- poj3264 线段树
- 计算机结构原理初步教案板书设计,(计算机工作原理)教学设计(教案)
- 深入了解Java 8日期和时间API
- 1核2G云服务器 标准型S4 S5,腾讯云服务器标准型S4和S5配置性能参数区别及选择攻略...
- 数电与模电的根本区别 转
- 达到什么算法水平可以面试百度AI岗
- 电脑硬件知识学习_关于网络学习心得体会集锦七篇
- 输出结果 配置_用单端仪表放大器实现全差分输出
- python编程题字符串的美化_Python编程题15--RGB字符串排序
- ASP.NET ASHX 一般处理程序教程
- 在vue项目中使用阿里巴巴矢量图标库
- php对接海康视频教程_海康安防管理平台Web视频对接
- testbench——信号的产生
- poj2096(概率dp)
- mvp的全称_打游戏抢了这么久的MVP,你竟不知道MVP的全称和由来?
热门文章
- PHP 5.6 Apache配置
- 关于判断checkbox选中问题
- iOS内存管理编程指南
- JavaScript 同源策略
- SQL:RAND()返回随机数
- Oracle PL/SQL之Flashback Table与外键约束
- 使用hibernate实现树形结构无限级分类
- 计算机word考试试题答案,计算机word考试-试题1(附答案解析).doc
- 怎么复制黑苹果config配置_估计是最后一次折腾黑苹果,技嘉 Z490 Vision D 的 OC 配置分享...
- 【C 语言】const 关键字用法 ( 常量指针 - const 在 * 左边 - 修饰数据类型 - 内存不变 | 指针常量 - const 在 * 右边 - 修饰变量 - 指针不变 )