呼吸灯组件

注：该组件基于vue3开发

组件代码

<template>
  <div :style="{opacity}">
      <slot></slot>
  </div>
</template>

<script setup>
import { defineProps, ref,onBeforeMount } from "vue";

const props =  defineProps({
    interval: {
        type: Number,
        default: 20
    }
});
const opacity = ref(0)
const upFlag = ref(true)

const breath = () => {
    setInterval(() => {
        opacity.value = resize(opacity.value,  upFlag.value)
    },props.interval)
}
const resize = (value, flag) => {
  if (value <= 0 && flag) {
    value += 0.01
  } else if (value > 0 && flag) {
    value += 0.01
    if (value >= 0.99) {
      upFlag.value = false;
    }
  } else if (value > 1 && !flag) {
    value -= 0.01
  } else if (value <= 1 && !flag) {
    value -= 0.01
    if (value < 0) {
      upFlag.value = true;
    }
  }
  return value;
}
onBeforeMount(() => {
    breath()
})
</script>

<style scoped>

</style>

组件使用

<breath interval="15">
    <div class="allTag-btn" v-if="!openAllTag" @click="openAllTag = !openAllTag">
      <el-icon :size="30"><CaretTop /></el-icon>
    </div>
    <div class="all-tag-down" v-if="openAllTag" @click="openAllTag = !openAllTag">
      <el-icon :size="30"><CaretBottom /></el-icon>
    </div>
</breath>

示例