实例教学如何写vue插件


Posted in Javascript onNovember 30, 2017

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

在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框。如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求。

说完需求,就来看看具体实现。目前我尝试了两种不一样的插件编写的方法,逐个介绍。

实例教学如何写vue插件

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

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

目前使用起来是酱紫的:

实例教学如何写vue插件

toast插件

toast文件下有两个文件,后缀为vue的文件就是这个插件的骨架,js文件一个是将这个骨架放入Vue全局中,并写明操作逻辑。

可以看一下toast.vue的内容:

<template>
 <transition name="fade">
  <div v-show="show">
   {{message}}
  </div>

 </transition>
</template>

<script>
export default {
 data() {
 return {
  show: false,
  message: ""
 };
 }
};
</script>

<style lang="scss" scoped>
.toast {
 position: 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-leave-active {
 transition: 0.3s ease-out;
}
.fade-enter {
 opacity: 0;
 transform: scale(1.2);
}
.fade-leave-to {
 opacity: 0;
 transform: scale(0.8);
}
</style>

 

这里面主要的内容只有两个,决定是否显示的show和显示什么内容的message

粗看这里,有没有发现什么问题?

这个文件中并没有props属性,也就是无论是show也好,message也好,就没有办法通过父子组件通信的方式进行修改,那他们是怎么正确处理的呢。别急,来看他的配置文件。

index.js:

import ToastComponent from './toast.vue'

const Toast = {};

// 注册Toast
Toast.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

 

这里的逻辑大致可以分成这么几步:

创建一个空对象,这个对象就是日后要使用到的插件的名字。此外,这个对象中要有一个install的函数。使用vue的extend方法创建一个插件的构造函数(可以看做创建了一个vue的子类),实例化该子类,之后的所有操作都可以通过这个子类完成。之后再Vue的原型上添加一个共用的方法。

这里需要着重提的是Vue.extend()。举个例子,我们日常使用vue编写组件是这个样子的:

Vue.component('MyComponent',{
 template:'<div>这是组件</div>'
})

 

这是全局组件的注册方法,但其实这是一个语法糖,真正的运行过程是这样的:

let component = Vue.extend({
 template:'<div>这是组件</div>'
})

Vue.component('MyComponent',component)

 

Vue.extend会返回一个对象,按照大多数资料上提及的,也可以说是返回一个Vue的子类,既然是子类,就没有办法直接通过他使用Vue原型上的方法,所以需要new一个实例出来使用。

在代码里console.log(instance)

得出的是这样的结果:

实例教学如何写vue插件

可以看到$el:div.toast

也就是toast组件模板的根节点。

疑惑的是,我不知道为什么要创建一个空的div节点,并把这个实例挂载在上面。我尝试注释这段代码,但是运行会报错。

实例教学如何写vue插件

查找这个错误的原因,貌似是因为

document.body.appendChild(instance.$el)

 

这里面的instance.$el的问题,那好,我们console下这个看看。WTF!!!!结果居然是undefined

那接着

console.log(instance)

 

实例教学如何写vue插件

和上一张图片比对一下,发现了什么?对,$el消失了,换句话说在我注释了

instance.$mount(document.createElement('div'))

 

这句话之后,挂载点也不存在了。接着我试着改了一下这句:

instance.$mount(instance.$el)

 

$el又神奇的回来了………………

暂时没有发现这种改动有什么问题,可以和上面一样运行。但无论如何,这也就是说instance实例必须挂载在一个节点上才能进行后续操作。

之后的代码就简单了,无非是在Vue的原型上添加一个改变插件状态的方法。之后导出这个对象。

接下来就是怎么使用的问题了。来看看main.js是怎么写的:

import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
Vue.use(Toast)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

 

这样就可以在其他vue文件中直接使用了,像这样:

// app.vue
<template>
 <div id="app">
 <loading duration='2s' :isshow='show'></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

通过在methods中增加一个方法控制写在Vue原型上的$toast对toast组件进行操作。

这样toast组件的编写过程就结束了,可以看到一开始gif图里的效果。

loading插件

经过上一个插件的讲解,这一部分就不会那么细致了,毕竟大多数都没有什么不同,我只指出不一样的地方。

<template>
 <div class='wrapper' v-if="isshow">
  <div class='loading'>
   <img src="./loading.gif">
  </div>
 </div>
</template>

<script>
export default {
 props: {
 duration: {
  type: String,
  default: "1s" //默认1s
 },
 isshow: {
  type: Boolean,
  default: false
 }
 },
 data: function() {
 return {};
 }
};
</script>

<style lang="scss" scoped>

</style>

这个就只是一个模板,传入两个父组件的数据控制显示效果。

那再来看一下该插件的配置文件:

import LoadingComponent from './loading.vue'

let Loading = {};

Loading.install = (Vue) => {
 Vue.component('loading', LoadingComponent)
}

export default Loading;

这个和taoat的插件相比,简单了很多,依然是一个空对象,里面有一个install方法,然后在全局注册了一个组件。

比较

那介绍了这两种不同的插件编写方法,貌似没有什么不一样啊,真的是这样么?

来看一下完整的main.js和app.vue这两个文件:

// main.js
import Vue from 'vue'
import App from './App'
// import router from './router'
import Toast from './components/taost'
import Loading from './components/loading'

Vue.use(Toast)

Vue.use(Loading)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({

 // router,
 render: h => h(App)
}).$mount('#app')

// app.vue
<template>
 <div id="app">
 <loading duration='2s' :isshow='show'></loading>
 <!-- <button @click="show = !show">显示/隐藏loading</button> -->
 <button @click="toast">显示taost弹出框</button>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
 return {
  show: false
 };
 },
 methods: {
 toast() {
  this.$toast("你好");
 }
 }
};
</script>

<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

可以看出来,loading是显示的写在app.vue模板里的,而toast并没有作为一个组件写入,仅仅是通过一个方法控制显示。

来看一下html结构和vue工具给出的结构:

实例教学如何写vue插件

实例教学如何写vue插件

看出来了么,toast插件没有在挂载点里面,而是独立存在的,也就是说当执行

vue.use(toast)

之后,该插件就是生成好的了,之后的所有操作无非就是显示或者隐藏的问题了。

Javascript 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 #Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 #Javascript
vue的状态管理模式vuex
Nov 30 #Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 #Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 #Javascript
You might like
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php实现每日签到功能
2018/11/29 PHP
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python中的Django基本命令实例详解
2018/07/15 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
大四学年自我鉴定
2013/11/13 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
学校节能减排方案
2014/06/13 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
颐和园导游词
2015/01/30 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书