TextScroll 文字滚动

支持无缝滚动和打字机效果。在线演示

基础用法

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

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

样式类型

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

速度和方向

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

<!-- 向右滚动 -->
<TextScroll :text="message" direction="right" />

打字机效果

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

可关闭公告

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

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	关闭按钮点击时触发	—

XSS 风险

text 支持 HTML，使用时需注意 XSS 风险。