小程序生成平台_vue自界说全局组件(自界说插件)的用法

2021-01-08

vue自定义全局组件(自定义插件)的用法       这篇文章主要介绍了vue自定义全局组件(自定义插件)的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件。

ponent的loading目录下:

在该目录下,按博主习惯是写一个index.js文件还有一个组件loading.vue,index.js里面写的是关于loading.vue的install方法。代码如下所示:

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

其中install方法表示在main.js中,如果使用Vue.use()方法的话,则该方法默认会调用install方法。在install方法里面还注册了组件,这里面'Loading'指的是外面App.vue使用的组件名,LoadingComponent指的是上面引过来的Loading.vue。之后通过export default Loading导出。

然后Loading.vue代码如下所示:

 template 
 div 
 Loading...
 /div 
 /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 
 div id="app" 
 Loading /Loading 
 /div 
 /template 

你也可以在刚刚的loading.vue文件里面写自己的一些代码,比如写一个日历插件,按钮插件等等。如下面这个:

 template 
 div 
 div 
 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 

效果是一个滚动的圆:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866