子组件：
<template>
<div class="">
<transition :name="animateName">
<div class="loadings" v-show="isShow">
<div class="loadings-loader">
<div class="loadings-loader-dot">
<span></span>
</div>
<div class="text-title mb10">{{loadingTitle}}</div>
<div class="text-dec">{{loadingDec}}</div>
</div>
</div>
</transition>
</div>
</template>
computed: {
/**
* 动画效果样式，没有返回空
* @return {String} 样式
*/
animateName() {
return this.hasAnimate ? 'opacity' : ''
},
},
methods: {
/**
* 开启动画效果
*/
opemAnimate() {
this.hasAnimate = true
},
/**
* 去除动画效果
* @return {Promise} 返回promise
*/
removeAnimate() {
return new Promise((resolve) => {
this.hasAnimate = false
resolve()
})
},
/**
* 显示动画loading
*/
show() {
this.isShow = true
},
/**
* 隐藏动画loading
*/
hide() {
this.isShow = false
},
},
父组件
<loading ref="loadingComponent"></loading> //通过ref来控制子组件数据
import loading from xxxxxxxxxxxxxxxxxx'
components : {loading}
this..$refs.loadingComponent.show(); //loading显示
this.$refs.loadingComponent.hide(); //隐藏
this..$refs.loadingComponent.xxxx = 'xx' //赋值
网友评论