实例教学如何写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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 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
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python简单实现获取当前时间
2016/08/27 Python
python difflib模块示例讲解
2017/09/13 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
linux面试相关问题
2013/04/28 面试题
最新大学职业规划书范文
2013/12/30 职场文书
火车来了教学反思
2014/02/11 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
交通事故和解协议书
2014/09/25 职场文书
会议欢迎词范文
2015/01/27 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang