lightwave

光波组件

• 配合v-lightwave使用，鼠标移入会跟随鼠标产生光晕
• 适合暗色主题的详情或者卡片视图

基础用法

<template>
  <div class="lightwave-wrap">
    <div v-lightwave="{ color: 'yellow' }" class="lightwave-item"></div>
    <div v-lightwave class="lightwave-item"></div>
    <div v-lightwave class="lightwave-item item-w"></div>
  </div>
</template>

<script setup></script>
<style lang="less" scoped>
.lightwave-wrap {
  display: flex;
  .lightwave-item {
    cursor: pointer;
    background: #333;
    width: 150px;
    height: 200px;
    margin-right: var(--margin-base);
    border: 1px solid var(--color-border);
  }
  .item-w {
    background-color: var(--color-w);
  }
}
</style>

v-lightwave config模型接口

interface ConfigI {
  width?: number;
  height?: number;
  color?: string;
  blur?: number;
}

属性

属性	值	是否必填	默认值	说明
width	number	否	当前元素宽度/3.5	波纹宽度,单位px
height	number	否	当前元素高度/3.5	波纹高度,单位px
color	colorString	否	false	波纹颜色
blur	number	否	60	波纹模糊程度

插槽

插槽名	是否必填	默认值	说明