时间:2021-07-01 10:21:17 帮助过:15人阅读
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件。
首先写这个插件之前生成好一个目录来存放这个插件。博主我是将他放在一个component的loading目录下:
在该目录下,按博主习惯是写一个index.js文件还有一个组件loading.vue,index.js里面写的是关于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()方法的话,则该方法默认会调用install方法。在install方法里面还注册了组件,这里面'Loading'指的是外面App.vue使用的组件名,LoadingComponent指的是上面引过来的Loading.vue。之后通过export default Loading导出。
然后Loading.vue代码如下所示:
<template> <p class="loading-box"> Loading... </p> </template> <script></script>
Loading.vue代码写完后然后就在默认的main.js文件中导入,通过使用Vue.use()方法导入刚刚写好的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> <p id="app"> <Loading></Loading> </p> </template>
你也可以在刚刚的loading.vue文件里面写自己的一些代码,比如写一个日历插件,按钮插件等等。如下面这个:
<template> <p class="loader"> <p class="loader-inner ball-spin-fade-loader"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </p> </p> </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 > p: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 > p: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 > p: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 > p: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 > p: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 > p: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 > p: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 > p: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 > p { background-color: #399; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; } </style>
效果是一个滚动的圆:
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在vue中如何编译打包查看index文件
在vue中如何使用Jade模板
在Angular中向组件传递模板
以上就是vue自定义全局组件该怎么做?的详细内容,更多请关注Gxl网其它相关文章!