vue 组件封装 -- 添加【呼吸】动画效果

常用于展示某异步操作持续执行中

封装组件 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>