Small Tail Common

Appearance

StDynamicBorder1 组件 ​

动态边框组件 1

组件样式来源

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

组件源码地址

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

注意事项

  1. 该组件根元素的 box-sizing css 属性值为 border-box；
  2. 该组件动态边框的实现原理为，样式底层组件根元素利用渐变背景的旋转动画实现边框的动态效果，然后将组件默认插槽所在的父元素定位覆盖组件根元素并利用内边距，实现边框效果

组件示例 ​

简单使用 ​

简单使用
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1 :width="150" :height="150">
      <div class="st-dynamic-border-1__content box-bg">简单使用</div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

自定义边框颜色 ​

自定义边框颜色
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1
      :width="150"
      :height="150"
      :border-color-list="['transparent', 'red 50%', 'transparent 50%', 'orange']"
    >
      <div class="st-dynamic-border-1__content box-bg">
        自定义边框颜色
      </div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

多段边框 ​

多段边框
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1
      :width="150"
      :height="150"
      :border-color-list="[
        'red 0%', 'red 12.5%',
        'transparent 12.5%', 'transparent 25%',
        'green 25%', 'green 37.5%',
        'transparent 37.5%', 'transparent 50%',
        'yellow 50%', 'yellow 62.5%',
        'transparent 62.5%', 'transparent 75%',
        'blue 75%', 'blue 87.5%',
        'transparent 87.5%', 'transparent 100%'
      ]"
    >
      <div class="st-dynamic-border-1__content box-bg">
        多段边框
      </div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

完全自定义边框颜色 ​

完全自定义边框颜色
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1
      :width="150"
      :height="150"
      custom-border-color
      :border-color="'linear-gradient(135deg, #ff0000, #00ff00)'"
    >
      <div class="st-dynamic-border-1__content box-bg">完全自定义边框颜色</div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

荧光边框 ​

荧光边框
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1
      :width="150"
      :height="150"
      shine
      :shine-range="20"
    >
      <div class="st-dynamic-border-1__content box-bg">荧光边框</div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

Hover 时显示边框动效 ​

Hover 时显示边框动效
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1 :width="150" :height="150" hover>
      <div class="st-dynamic-border-1__content box-bg">Hover 时显示边框动效</div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

Hover 时暂停边框动效 ​

Hover 时暂停边框动效
示例源码
vue
<script setup lang="ts">
import {StDynamicBorder1} from 'st-common-ui-vue3'
</script>

<template>
  <div class="dynamic-border-1-demo-1">
    <StDynamicBorder1 :width="150" :height="150" hover-pause>
      <div class="st-dynamic-border-1__content box-bg">Hover 时暂停边框动效</div>
    </StDynamicBorder1>
  </div>
</template>

<style scoped lang="scss">
.dynamic-border-1-demo-1 {
  margin-top: 1rem;

  .st-dynamic-border-1__content {
    width: 100%;
    height: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

组件参数 ​

参数名说明类型默认值
width组件的宽度，如果传递的参数值为数字类型，则其默认单位为 pxnumber | string'100%'
height组件的高度，如果传递的参数值为数字类型，则其默认单位为 pxnumber | string'100%'
backgroundColor组件中默认插槽所在父元素的背景颜色，即组件内容区域的背景颜色string'#111'
borderColorList边框的颜色列表，默认情况下，实现边框渐变效果的组件根元素的背景渐变效果为 conic-gradientArray<string>['transparent 180deg', 'skyblue 360deg']
customBorderColor是否完全自定义边框颜色，即是否自定义边框的渐变效果及其颜色组成，如果其值为 false，则边框的渐变效果为 conic-gradientbooleanfalse
borderColor完全自定义边框颜色时，即 customBorderColor 值为 true 时，使用该参数值指定边框的颜色string'linear-gradient(135deg, #43CBFF 15%, #9708CC 100%)'
borderWidth边框的宽度，如果传递的参数值为数字类型，则其默认单位为 pxnumber | string'2px'
borderRadius边框的圆角，如果传递的参数值为数字类型，则其默认单位为 pxnumber | string'0.25rem'
rotate是否开启边框的旋转效果booleantrue
speed边框旋转动画的速度，即执行一次边框动画所需的时间，如果传递的参数值为数字类型，则其默认单位为 msnumber | string'5s'
shine是否开启边框的光晕效果booleanfalse
shineRange边框光晕的范围，如果传递的参数值为数字类型，则其默认单位为 pxnumber | string'10px'
shineBrightness边框光晕的亮度，取值范围为 0 - 1number0.8
hover边框的效果是否在鼠标悬停时才生效booleanfalse
hoverPause是否在鼠标悬停时暂停边框旋转动画booleanfalse

组件插槽 ​

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