本页导航
article
TextScroll
AI摘要
本文介绍了Vue组件TextScroll的使用方法,包括基础用法、不同类型的滚动公告展示以及自定义速度和方向的功能。组件通过简单的模板和脚本引入,配合样式调整,实现了灵活多样的文本滚动效果,适合在网页中展示各种类型的滚动公告信息。
说明
文本滚动公告
使用
<template>
<div class="app-container">
<!-- 基础用法 -->
<TextScroll text="这是一条基础的滚动公告,默认向左滚动。" typewriter />
<!-- 使用不同的类型 -->
<TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />
<TextScroll type="warning" text="这是一条警告类型的滚动公告" />
<TextScroll type="danger" text="这是一条危险类型的滚动公告" />
<TextScroll type="info" text="这是一条信息类型的滚动公告" />
<!-- 自定义速度和方向 -->
<TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
</div>
</template>
<script setup lang="ts">
import { TextScroll } from "liyao-vue-common";
</script>
<style lang="scss" scoped>
.app-container {
:deep(.text-scroll-container) {
margin-bottom: 20px;
}
}
</style>
最后更新于 2025-09-30 20:31