vue动画-自定义组件

在开发时，有时候一些组件满足不了目前的需求，这时候就需要自己开发组件了，然后使用自己开发的组件（插件）到项目中，组件的引用方式有两种，一种是import,另一种是vue.use()，element-ui在引用时就要

import ElementUI from 'element-ui'
vue.use(ElementUI);

而引用axios时只需要

import axios from 'axios'

他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来写一个自己的插件。 使用时跟elementUI用法一样，只需要在页面中写自定义插件的标签即可。

一.目录结构

首先在component中新建loading文件夹，在loading下新建loading.js和loading.vue，目录结构如下：

二.组件的开发（原代码）

其中，loading.js中代码如下：

import LoadingComponent from './Loading.vue'

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

loading.vue中代码如下：

三 .组件的使用

文章开头已经提到过，只需要直接在.vue文件中添加标签即可。
在其他页面中使用loading组件：

data中定义变量并为其赋初始值：
LoadingShow: false, //自定义组件-loading
如图：
在父组件中通过改变LoadingShow的值来控制加载动画是否显示，在您需要的地方动态的控制动画的显示与隐藏，如图：

四.页面效果

有加载动画的效果（如请求数据时）如下：

无加载动画的效果（也就是数据加载完成后）如下：

本文部分内容学习于：
https://blog.csdn.net/Tank_in_the_street/article/details/73135410
大家可以去看看哦~

若您需要引用、转载，请注明来源及原文链接哦~ (^▽)。