1.Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用
2.什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器
3.如果自定义一个插件?
https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
(1)在src目录下创建plugin文件夹
(2)在plugin目录下创建任一名称文件夹(如loading)
(3)在loading目录下创建自己想使用的组件(loading.vue)和index.js
(4)index.js将组件注册为插件
import Vue from 'vue'
import Loading from './Loading'
export default {
// 注意点: 如果要将一个组件封装成一个插件, 那么必须提供一个install方法
// 那么必须在install方法中注册当前的这个组件
install: function () {
Vue.component(Loading.name, Loading)
}
}
(5)在main.js就可以导入插件了
import Loading from './plugin/loading/index'
Vue.use(Loading)
4.如果经常使用某一个插件并修改
比如控制加载器的出现和消失以及控制出现的文字
(1)loading.js
import Loading from './Loading'
export default {
// 注意点: 如果要将一个组件封装成一个插件, 那么必须提供一个install方法
// 那么必须在install方法中注册当前的这个组件
install: function (Vue, Options) {
// 1.根据我们的组件生成一个构造函数
let LoadingContructor = Vue.extend(Loading)
// 2.根据构造函数创建实例对象
let LoadingInstance = new LoadingContructor()
// 3.随便创建一个标签(元素)
let oDiv = document.createElement('div')
// 4.将创建好的标签添加到界面上
document.body.appendChild(oDiv)
// 5.将创建好的实例对象挂载到创建好的元素上
LoadingInstance.$mount(oDiv)
// 添加初始化值
if (Options && Options.title !== null && Options.title !== undefined) {
LoadingInstance.title = Options.title
}
// 添加全局方法
Vue.showLoading = function () {
LoadingInstance.isShow = true
}
Vue.hiddenLoading = function () {
LoadingInstance.isShow = false
}
// 添加实例方法
Vue.prototype.$showLoading = function () {
LoadingInstance.isShow = true
}
Vue.prototype.$hiddenLoading = function () {
LoadingInstance.isShow = false
}
}
}
(2)在main.js中
import Loading from './plugin/loading/index'
// 注意点: 如果想通过use的方式来注册组件, 那么必须先将组件封装成插件
//将'皇帝不急太监急'传给loading.js的Options
Vue.use(Loading, {
title: '皇帝不急太监急'
})
(3)在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 lang="scss">
</style>
(4)在loading.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>