TextScroll 文字滚动

文字滚动组件，适用于公告、通知等场景，支持无缝滚动和打字机效果。

🎯 在线演示：https://vue.youlai.tech/#/demo/text-scroll

基本用法

<template>
  <TextScroll :text="message" />
</template>

<script setup lang="ts">
const message = ref('系统将于今晚22:00进行维护升级，请提前保存工作内容。')
</script>

不同样式类型

<template>
  <div class="demo-container">
    <TextScroll text="默认样式公告" type="default" />
    <TextScroll text="成功样式公告" type="success" />
    <TextScroll text="警告样式公告" type="warning" />
    <TextScroll text="危险样式公告" type="danger" />
    <TextScroll text="信息样式公告" type="info" />
  </div>
</template>

自定义速度和方向

<template>
  <!-- 滚动速度：数值越小越快 -->
  <TextScroll :text="message" :speed="50" />
  
  <!-- 向右滚动 -->
  <TextScroll :text="message" direction="right" />
</template>

打字机效果

<template>
  <TextScroll 
    :text="message" 
    :typewriter="true"
    :typewriter-speed="80"
  />
</template>

<script setup lang="ts">
const message = ref('欢迎使用 vue3-element-admin 后台管理系统')
</script>

可关闭公告

<template>
  <TextScroll 
    :text="message" 
    :show-close="true"
    @close="handleClose"
  />
</template>

<script setup lang="ts">
const message = ref('这是一条可关闭的公告')

function handleClose() {
  console.log('公告已关闭')
}
</script>

表格中使用

在表格头部或顶部显示公告：

<template>
  <div class="table-container">
    <TextScroll 
      text="温馨提示：请谨慎操作删除功能" 
      type="warning"
      :show-close="true"
    />
    <el-table :data="tableData">
      <!-- 表格列 -->
    </el-table>
  </div>
</template>

Props

参数	说明	类型	默认值
text	滚动文本内容（必填）	string	-
speed	滚动速度，数值越小越快	number	70
direction	滚动方向	'left' | 'right'	'left'
type	样式类型	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'
showClose	是否显示关闭按钮	boolean	false
typewriter	是否启用打字机效果	boolean	false
typewriterSpeed	打字机速度，数值越小越快	number	100

Events

事件名	说明	回调参数
close	关闭按钮点击时触发	-

样式类型效果

type	效果
default	主要样式（蓝色）
success	成功样式（绿色）
warning	警告样式（橙色）
danger	危险样式（红色）
info	信息样式（灰色）

功能特性

• ✅ 无缝滚动
• ✅ 鼠标悬停暂停
• ✅ 可调节速度和方向
• ✅ 多种预设样式
• ✅ 打字机效果
• ✅ 可关闭

使用场景

• 系统公告
• 通知消息
• 新闻滚动
• 警告提示
• 营销活动

注意事项

1. HTML 内容：text 支持 HTML，使用时需注意 XSS 风险
2. 打字机效果：启用打字机效果时，会在打字完成后才开始滚动
3. 性能优化：内容过长时建议适当调整 speed 值

相关链接

• Element Plus Tag