Small Tail Common

Appearance

StGradientBg1 组件 ​

具有渐变过渡动画的背景组件 1

组件样式来源

https://www.bilibili.com/video/BV1vS4y1j7Yo/

组件源码地址

https://gitee.com/tongchaowei/small-tail-admin/tree/dev/front-end/monorepo-vite-vue3-ts/small-tail-common/ui-vue3/src/components/StGradientBg1

组件示例 ​

colors: [ "#43CBFF", "#9708CC" ]
size: 500%
speed: 20000
colors
size
speed
示例代码
vue
<script setup lang="ts">
  import {ref} from 'vue'
  
  const colors = ref(['#43CBFF', '#9708CC'])
  const size = ref('500%')
  const speed = ref(20000)
</script>

<template>
  <div style="height: 300px; border-radius: 1rem; overflow: hidden;">
    <StGradientBg1
      :colors="colors"
      :size="size"
      :speed="speed"
    >
      <div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div>colors: {{ colors }}</div>
        <div>size: {{ size }}</div>
        <div>speed: {{ speed }}</div>
      </div>
    </StGradientBg1>
  </div>
</template>

组件参数 ​

参数名说明类型默认值
colors背景渐变颜色，如果传递的值为空或者不为数组或者数组长度小于2，则会使用该参数的默认值Array<string>['#2c3e50', '#27ae60', '#2980b9', '#e74c3c', '#8e44ad']
size背景的大小，该参数用于设置组件根元素的 background-size css 属性，如果传递的值为数字，则其单位默认为 pxstring | number'500%'
speed背景过渡动画执行速度，也可以说是背景过渡动画执行一次所需的时间，该参数用于设置组件根元素的 background-duration css 属性，单位为秒，如果传递的值为数字，则其单位默认为 msstring | number2000

组件插槽 ​

插槽名说明
default组件内容区域