XtfNoticeBar
组件说明
xtf-notice-bar 是用于发布运营通知、系统提醒和活动公告的通告栏组件，支持单行省略、滚动、图标、查看更多及关闭。与 xtf-marquee 相比，它额外提供了公告栏布局和操作事件。
基础用法
1. 基础公告
用于展示简短的静态通知。
vue
<template><xtf-notice-bar text="新版本已发布，欢迎体验。" /></template>
<script>
export default {}
</script>1
2
3
4
2
3
4
2. 单行图标公告
空间有限时以省略方式展示，并强化提示图标。
vue
<template>
<xtf-notice-bar single show-icon text="订单量较昨日增长 18%，请及时处理新增订单。" />
</template>
<script>
export default {}
</script>1
2
3
4
5
6
2
3
4
5
6
3. 滚动与查看更多
用于较长公告，并处理查看更多事件。
vue
<template>
<xtf-notice-bar
show-icon
scrollable
show-get-more
more-text="详情"
text="本周五 22:00 至周六 02:00 将进行系统维护，期间部分服务可能短暂不可用。"
@getmore="showDetail"
/>
</template>
<script>
export default {
methods: {
showDetail() {
uni.showToast({ title: '打开公告详情', icon: 'none' })
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
4. 可关闭公告
关闭后组件会自行隐藏，并发送关闭通知。
vue
<template>
<xtf-notice-bar
single
show-close
color="#2979ff"
background-color="#eaf2ff"
text="已为你保存草稿。"
@close="onClose"
/>
</template>
<script>
export default {
methods: {
onClose() {
console.log('notice closed')
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
全部属性
| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 |
|---|---|---|---|---|
text | String | '' | 公告文本 | 所有公告 |
backgroundColor | String | '#FFF9EA' | 背景色 | 需要品牌色时 |
color | String | '#FF9A43' | 文字及图标颜色 | 需要调整强调色时 |
speed | String | Number | 48 | 滚动速度 | scrollable 为真时 |
single | Boolean | String | false | 单行溢出省略 | 紧凑布局 |
scrollable | Boolean | String | false | 启用跑马灯 | 长文本公告 |
showIcon | Boolean | String | false | 显示左侧图标 | 需要视觉提示时 |
showGetMore | Boolean | String | false | 显示右侧查看更多入口 | 有详情页时 |
moreText | String | '' | 查看更多文案，空时显示箭头 | 自定义入口文案 |
showClose | Boolean | String | false | 显示关闭按钮 | 可忽略提醒 |
icon | String | '' | 左侧图标名，空时为 volume_up | showIcon 为真时 |
customClass | String | '' | 根节点自定义类名 | 局部样式定制 |
customStyle | String | Object | '' | 根节点自定义样式 | 局部样式定制 |
事件
| 事件名称 | 触发时机 | 回调参数 | 参数说明 |
|---|---|---|---|
click | 点击公告主体时 | () | 无 |
getmore | 点击查看更多区域时 | () | 无 |
close | 点击关闭按钮并隐藏后 | () | 无 |
事件使用示例
vue
<template>
<xtf-notice-bar
show-get-more
show-close
text="服务通知"
@click="log('click')"
@getmore="log('getmore')"
@close="log('close')"
/>
</template>
<script>
export default {
methods: {
log(type) {
console.log('notice event:', type)
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
主题说明
- 背景由
var(--xtf-notice-bar-bg)控制，组件会将backgroundColor写入该变量。 - 文本和图标由
var(--xtf-notice-bar-color)控制，组件会将color写入该变量。 - 通过
customStyle或xtf-config-provider覆盖变量即可统一调整主题。