image
前言
随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 loding 插件，来了解掌握插件的开发和使用。
什么是Vue.use(plugin)
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用
用法：
Vue.use(plugin)
-
如果插件是一个对象，必须提供
install方法。 -
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，
会将 Vue 作为参数传入。 - Vue.use(plugin)调用之后，插件的install方法就会默认接受到一个参数，这个参数就是Vue
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
总结：Vue.use是官方提供给开发者的一个api，用来注册、安装Vuex、vue-router、ElementUI之类的插件的。
什么时候需要定义插件
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器
开发Loding插件
1. 在src目录下新建一个plugin文件夹，在这个目录进行封装
2. 在plugin目录下新建一个loding文件夹，并将封装好的组件放到这个文件夹，在这个文件夹下还需要一个index.js文件
Loding.vue
<template>
<div class="container" v-show="isShow">
<div class="loading"></div>
<p class="title">{{title}}</p>
</div>
</template>
<script>
export default {
name: 'Loading',
data: function () {
return {
title: '正在加载...',
isShow: false
}
}
}
</script>
<style scoped lang="scss">
.container{
width: 200px;
height: 200px;
border-radius: 20px;
background: rgba(0,0,0,0.5);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.loading{
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid #fff;
margin: 20px auto;
border-right-color: #409eff;
animation: loading 2s linear infinite;
}
.title{
text-align: center;
font-size: 16px;
color: #fff;
}
@keyframes loading {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
}
</style>
3. 在index.js文件中编写业务逻辑代码
- 如果要将一个组件封装成一个插件, 那么必须提供一个install方法，必须在install方法中注册当前的这个组件
这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象
export default {
install: function (Vue, Options) {
}
}
- 将组件添加到界面上
import Loading from './Loading'
export default {
install: function (Vue, Options) {
// 1.根据我们的组件生成一个构造函数
const LoadingContructor = Vue.extend(Loading)
// 2.根据构造函数创建实例对象
const LoadingInstance = new LoadingContructor()
// 3.随便创建一个标签(元素)
const oDiv = document.createElement('div')
// 4.将创建好的标签添加到界面上
document.body.appendChild(oDiv)
// 5.将创建好的实例对象挂载到创建好的元素上
LoadingInstance.$mount(oDiv)
}
}
- 添加初始化值
export default {
install: function (Vue, Options) {
...
if (Options && Options.title !== null && Options.title !== undefined) {
LoadingInstance.title = Options.title
}
}
}
- 添加全局方法
export default {
install: function (Vue, Options) {
...
Vue.showLoading = function () {
LoadingInstance.isShow = true
}
Vue.hiddenLoading = function () {
LoadingInstance.isShow = false
}
}
}
- 添加实例方法
export default {
install: function (Vue, Options) {
...
Vue.prototype.$showLoading = function () {
LoadingInstance.isShow = true
}
Vue.prototype.$hiddenLoading = function () {
LoadingInstance.isShow = false
}
}
}
4. 在main.js中导入插件
注意: 这里需要导入插件的index.js文件
Vue.use()方法中的第二个参数即是传给install方法的第二个参数
import Loading from './plugin/loading/index.js'
Vue.use(Loading, {
title: '皇帝不急太监急'
})
5. 在App.vue中使用
<template>
<div id="app">
<button @click="myFn1">显示</button>
<button @click="myFn2">隐藏</button>
</div>
</template>
<script>
// import Vue from 'vue'
export default {
methods: {
myFn1 () {
// 通过全局方法调用
// Vue.showLoading()
// 通过实例方法调用
this.$showLoading()
},
myFn2 () {
// Vue.hiddenLoading()
this.$hiddenLoading()
}
}
}
</script>
<style scoped>
</style>
效果：
image
