TechUI Docs

简中

EN

简中

EN

主题

滚动通知 ​

⭐明星组件
👑首创

TuiRollingNotification 用于展示公告、通知或新闻快讯。 它基于 TuiRolling 引擎构建，支持无缝垂直滚动。组件能够智能处理文本换行与截断，并且在单条展示模式下，能够根据当前消息的语义类型 自动切换背景色调，起到强提示作用。

基础用法 ​

多条展示 ​

默认情况下，组件可以同时展示多条通知。

  • visibleLength: 控制可视区域内同时显示的条数。
  • interval: 滚动间隔时间 (ms)。
html
<script setup>
const list = [
  { icon: 'ti-home', text: '系统通知：服务器将在今晚进行维护。' },
  { icon: 'ti-star', text: '恭喜研发部达成季度目标！' },
  { icon: 'ti-bell', text: '您有一条新的审批代办，请及时处理。' }
];
</script>

<template>
  <TuiRollingNotification :visibleLength="2" :interval="3000">
    <TuiRollingNotificationItem 
      v-for="(item, i) in list" 
      :key="i"
      :index="i"
      :icon="`tui-icon ${item.icon}`"
    >
      {{ item.text }}
    </TuiRollingNotificationItem>
  </TuiRollingNotification>
</template>

文本行数与提示 ​

组件内置了文本溢出处理机制。

  • itemLines: 设定每条通知最大显示的行数。超出部分会自动省略（...）。
  • 自动提示: 当文本被截断时，鼠标悬停在该条目上会自动弹出 Tooltip 显示完整内容（基于内部 tipConfig 实现）。
html
<template>
  <TuiRollingNotification :itemLines="2" :visibleLength="1">
    <TuiRollingNotificationItem :index="0">
      这是一段非常长的测试文本，用于测试自动换行和滚动效果。
      我们希望这段文本能够有一定的长度，以便测试文本的自动换行...
    </TuiRollingNotificationItem>
  </TuiRollingNotification>
</template>

单条聚焦模式 ​

当 visibleLength 设为 1 时，组件进入聚焦模式。 此时，外层容器的背景色会动态跟随当前滚动到的 Item 的 type（语义类型）进行变化，从而更强烈地传达消息状态。

  • tone: 控制背景色调的强弱。可选 base (基础), strong (强色), weak (淡色) 等。
html
<template>
  <TuiRollingNotification :visibleLength="1" tone="base">
    
    <TuiRollingNotificationItem type="primary" :index="0">
      普通通知：系统运行正常。
    </TuiRollingNotificationItem>
    
    <TuiRollingNotificationItem type="danger" :index="1">
      紧急告警：磁盘空间不足 5%！
    </TuiRollingNotificationItem>
    
    <TuiRollingNotificationItem type="success" :index="2">
      任务完成：数据备份已完成。
    </TuiRollingNotificationItem>

  </TuiRollingNotification>
</template>

视觉风格 ​

支持毛玻璃与动态模糊特效，适应现代 UI 风格。

  • transparent: 开启背景半透明。
  • backgroundBlur: 开启背景模糊（毛玻璃效果）。
  • motionBlur: 开启滚动时的动态模糊（速度感）。
html
<TuiRollingNotification 
  transparent 
  backgroundBlur 
  motionBlur
  tone="weak"
>
  ...
</TuiRollingNotification>

动态数据 ​

组件完全支持数据的动态响应。您可以随时向列表中 push 或 splice 数据，滚动流会自动更新。

javascript
// 示例：动态添加一条新通知
const addNotice = () => {
  notiData.value.push({ type: 'warning', text: '新加入的通知...' });
};

API 参考 ​

TuiRollingNotification Props ​

属性名类型默认值说明
visibleLengthNumber1可视区域显示的条数。设为 1 时启用背景接管模式。
itemLinesNumber1单条内容的最大行数，超出省略并开启 Tooltip。
intervalNumber-自动滚动间隔 (ms)。
durationNumber0.2单次滚动动画时长 (s)。
toneString'base'单条模式下的色调风格。可选：weak, base, strong, strongInvert, extremeInvert。
transparentBooleanfalse是否开启半透明背景。
backgroundBlurBooleantrue是否开启背景模糊 (Backdrop Filter)。
motionBlurBooleantrue是否开启滚动动态模糊。
showControlBooleantrue是否显示右侧控制栏（暂停/翻页）。
seamlessBooleantrue是否开启无缝循环。
tipConfigObject-悬停提示框的配置对象。
tagConfigObject-内部序号 Tag 的配置对象。
resizeObserverString'global'尺寸监听策略。

TuiRollingNotificationItem Props ​

属性名类型默认值说明
indexNumber-索引值（建议传入以辅助动画计算）。
typeString'default'语义类型。可选：primary, success, warning, danger, info, invert。
iconString'tui-icon ti-bell'左侧图标类名。

Emits ​

事件名说明回调参数
start滚动开始时触发。-
rolling滚动过程中持续触发。(offset)