您好,登錄后才能下訂單哦!
有時(shí)候我們在做開發(fā)的時(shí)候,就想自己寫一個(gè)插件然后就可以使用自己的插件,那種成就感很強(qiáng)。博主最近研究element-ui和axios的時(shí)候,發(fā)現(xiàn)他們是自定義組件,但是唯一有一點(diǎn)不同的是,在用element-ui的時(shí)候是使用Vue.use()語句來使用的,而axios的時(shí)候,不用Vue.use(),只要import就可以導(dǎo)入進(jìn)來了,感覺很神奇,細(xì)細(xì)的發(fā)現(xiàn),原來他們的不同是因?yàn)閍xios里面并沒有寫install方法,而element-ui就有寫這個(gè)方法,下面就利用這個(gè)install來寫一個(gè)自己的插件。
首先寫這個(gè)插件之前生成好一個(gè)目錄來存放這個(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方法里面還注冊了組件,這里面'Loading'指的是外面App.vue使用的組件名,LoadingComponent指的是上面引過來的Loading.vue。之后通過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)入,通過使用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)的圓:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。