Small Tail Common

Appearance

StGhostTextHover 组件 ​

幽灵文本组件

组件样式来源

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

组件源码地址

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

注意事项

该组件会在鼠标悬停时，执行文本消失的过渡动画，在鼠标移出组件时，执行文本出现的过渡动画。

组件示例 ​

St Ghost Text Demo
示例代码
vue
<script setup lang="ts">
import {StGhostTextHover} from "st-common-ui-vue3"
</script>

<template>
  <div class="ghost-text-demo">
    <st-ghost-text-hover
      content="St Ghost Text Demo"
      horizontal-align="center"
      vertical-align="center"
    ></st-ghost-text-hover>
  </div>
</template>

<style scoped>
.ghost-text-demo {
  padding: 2rem 1rem;
  font-size: 3rem;
  font-weight: bold;
}
</style>

组件参数 ​

参数名说明类型默认值
content文本内容，即要在组件中显示的文本string
horizontalAlign文本水平对其方式'left' | 'center' | 'right''left'
verticalAlign文本垂直对其方式'top' | 'center' | 'bottom''top'
speed要在组件中显示的文本的每个字符动画执行的速度，即动画执行一次所需的时间，单位毫秒number1000
delay要在组件中显示的文本的每个字符动画执行的延迟，即在上一个字符动画执行开始后多少时间当前字符才开始执行动画，单位毫秒number100