有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要进口就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写安装方法,而element-ui就有写这个方法、下面就利用这个安装来写一个自己的插件。
首先写这个插件之前生成好一个目录来存放这个插件。博主我是将他放在一个组件的装载目录下:
在该目录下,按博主习惯是写一个index.js文件还有一个组件loading.vue, index.js里面写的是关于装载。vue的安装方法。代码如下所示:
从“进口LoadingComponent。/Loading.vue '
const加载={
安装:函数(Vue) {
Vue.component(“加载”,LoadingComponent)
}
}
出口默认加载
之前
其中安装方法表示在main.js中,如果使用Vue.use()方法的话,则该方法默认会调用安装方法。在安装方法里面还注册了组件,这里面“加载”指的是外面App.vue使用的组件名,LoadingComponent指的是上面引过来的装载。vue。之后通过出口默认加载导出。
然后加载。vue代码如下所示:
& lt; template>
& lt; div类=發oading-box”比;
加载……
& lt;/div>
& lt;/template>
& lt; script> & lt;/script>
之前
Loading.vue代码写完后然后就在默认的main.js文件中导入,通过使用Vue.use()方法导入刚刚写好的指数。js:
从“Vue”进口Vue
导入应用程序从“/App.vue。”
从’。/组件/导入加载加载的
Vue.use(加载)
新Vue ({
埃尔:“#应用”,
呈现:h=比;h(应用)
}）
之前
然后就在应用。vue方法里面使用该模板就可以了:
& lt; template>
& lt; div id=坝τ谩北?
& lt; Loading> & lt;/Loading>
& lt;/div>
& lt;/template>
之前
你也可以在刚刚加载的。vue文件里面写自己的一些代码,比如写一个日历插件,按钮插件等等。如下面这个:
& lt; template>
& lt; div类=白霸鼗北?
& lt; div class=" loader-inner ball-spin-fade-loader”比;
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt; div> & lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; scoped>风格;
.loader {
宽度:80 px;
身高:80 px;
保证金:50 px汽车;
}
@keyframes ball-spin-fade-loader {
50% {
透明度:0.3;
-webkit-transform:规模(0.4);
变换:规模(0.4);}
100% {
透明度:1;
-webkit-transform:规模(1);
变换:规模(1);}}
.ball-spin-fade-loader {
位置:相对;}
.ball-spin-fade-loader祝辞div: nth-child (1) {
上图:25 px;
左:0;
-webkit-animation: ball-spin-fade-loader 1 0年代无限线性;
动画:ball-spin-fade-loader 1 0年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (2) {
上图:17.04545 px;
左:17.04545 px;
-webkit-animation: ball-spin-fade-loader 1 0.12年代无限线性;
动画:ball-spin-fade-loader 1 0.12年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (3) {
上图:0;
左:25 px;
-webkit-animation: ball-spin-fade-loader 1 0.24年代无限线性;
动画:ball-spin-fade-loader 1 0.24年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (4) {
上图:-17.04545 px;
左:17.04545 px;
-webkit-animation: ball-spin-fade-loader 1 0.36年代无限线性;
动画:ball-spin-fade-loader 1 0.36年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (5) {
前:-25像素;
左:0;
-webkit-animation: ball-spin-fade-loader 1 0.48年代无限线性;
动画:ball-spin-fade-loader 1 0.48年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (6) {
上图:-17.04545 px;
左:-17.04545 px;
-webkit-animation: ball-spin-fade-loader 1 0.6年代无限线性;
动画:ball-spin-fade-loader 1 0.6年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (7) {
上图:0;
左:-25 px;
-webkit-animation: ball-spin-fade-loader 1 0.72年代无限线性;
动画:ball-spin-fade-loader 1 0.72年代无限线性;}
.ball-spin-fade-loader祝辞div: nth-child (8) {
上图:17.04545 px;
左:-17.04545 px;
-webkit-animation: ball-spin-fade-loader 1 0.84年代无限线性;
动画:ball-spin-fade-loader 1 0.84年代无限线性;}
.ball-spin-fade-loader祝辞div {
background - color: # 399;
宽度:15 px;
高度:15 px;
这个特性:100%;
保证金:2 px;
-webkit-animation-fill-mode:;
animation-fill-mode:;
位置:绝对的;}
& lt;/style>
