常用于展示某异步操作持续执行中
封装组件 breathing.vue
<template>
<div :style="{ opacity }">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
interval: {
type: Number,
default: 20,
},
},
data() {
return {
opacity: 0,
};
},
mounted() {
this.breath();
},
methods: {
breath() {
let that = this;
setInterval(() => {
that.opacity += 0.01;
if (that.opacity >= 1) that.opacity = 0;
}, that.interval);
},
},
};
</script>
使用方法
<template>
<div class="page">
<Breathing>正在执行</Breathing>
</div>
</template>
<script>
import Breathing from "./breathing.vue";
export default {
components: {
Breathing,
},
};
</script>
<style scoped>
.page {
padding: 30px;
}
</style>