vue自定義全局組件(自定義插件)的用法

2019-11-19 14:27:25

字體：大中小

供稿：網(wǎng)友

有時(shí)候我們?cè)谧鲩_(kāi)發(fā)的時(shí)候，就想自己寫一個(gè)插件然后就可以使用自己的插件，那種成就感很強(qiáng)。博主最近研究element-ui和axios的時(shí)候，發(fā)現(xiàn)他們是自定義組件，但是唯一有一點(diǎn)不同的是，在用element-ui的時(shí)候是使用Vue.use()語(yǔ)句來(lái)使用的，而axios的時(shí)候，不用Vue.use()，只要import就可以導(dǎo)入進(jìn)來(lái)了，感覺(jué)很神奇，細(xì)細(xì)的發(fā)現(xiàn)，原來(lái)他們的不同是因?yàn)閍xios里面并沒(méi)有寫install方法，而element-ui就有寫這個(gè)方法，下面就利用這個(gè)install來(lái)寫一個(gè)自己的插件。

首先寫這個(gè)插件之前生成好一個(gè)目錄來(lái)存放這個(gè)插件。博主我是將他放在一個(gè)component的loading目錄下：

在該目錄下，按博主習(xí)慣是寫一個(gè)index.js文件還有一個(gè)組件loading.vue，index.js里面寫的是關(guān)于loading.vue的install方法。代碼如下所示：

import LoadingComponent from './Loading.vue'const Loading={  install:function (Vue) {    Vue.component('Loading',LoadingComponent)  }}export default Loading

其中install方法表示在main.js中，如果使用Vue.use()方法的話，則該方法默認(rèn)會(huì)調(diào)用install方法。在install方法里面還注冊(cè)了組件，這里面'Loading'指的是外面App.vue使用的組件名，LoadingComponent指的是上面引過(guò)來(lái)的Loading.vue。之后通過(guò)export default Loading導(dǎo)出。

然后Loading.vue代碼如下所示：

<template>  <div class="loading-box">    Loading...  </div></template><script></script>

Loading.vue代碼寫完后然后就在默認(rèn)的main.js文件中導(dǎo)入，通過(guò)使用Vue.use()方法導(dǎo)入剛剛寫好的index.js：

import Vue from 'vue'import App from './App.vue'import Loading from './components/loading'Vue.use(Loading)new Vue({ el: '#app', render: h => h(App)})

然后就在App.vue方法里面使用該模板就可以了：

<template> <div id="app">  <Loading></Loading> </div></template>

你也可以在剛剛的loading.vue文件里面寫自己的一些代碼，比如寫一個(gè)日歷插件，按鈕插件等等。如下面這個(gè)：

<template>  <div class="loader">    <div class="loader-inner ball-spin-fade-loader">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>    </div>  </div></template><style scoped>  .loader{    width:80px;    height: 80px;    margin:50px auto;  }  @keyframes ball-spin-fade-loader {    50% {      opacity: 0.3;      -webkit-transform: scale(0.4);      transform: scale(0.4); }    100% {      opacity: 1;      -webkit-transform: scale(1);      transform: scale(1); } }  .ball-spin-fade-loader {    position: relative; }  .ball-spin-fade-loader > div:nth-child(1) {    top: 25px;    left: 0;    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;    animation: ball-spin-fade-loader 1s 0s infinite linear; }  .ball-spin-fade-loader > div:nth-child(2) {    top: 17.04545px;    left: 17.04545px;    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }  .ball-spin-fade-loader > div:nth-child(3) {    top: 0;    left: 25px;    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }  .ball-spin-fade-loader > div:nth-child(4) {    top: -17.04545px;    left: 17.04545px;    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }  .ball-spin-fade-loader > div:nth-child(5) {    top: -25px;    left: 0;    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }  .ball-spin-fade-loader > div:nth-child(6) {    top: -17.04545px;    left: -17.04545px;    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }  .ball-spin-fade-loader > div:nth-child(7) {    top: 0;    left: -25px;    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }  .ball-spin-fade-loader > div:nth-child(8) {    top: 17.04545px;    left: -17.04545px;    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }  .ball-spin-fade-loader > div {    background-color: #399;    width: 15px;    height: 15px;    border-radius: 100%;    margin: 2px;    -webkit-animation-fill-mode: both;    animation-fill-mode: both;    position: absolute; }</style>

效果是一個(gè)滾動(dòng)的圓：