# Notify 消息通知(小黄条)
消息提示组件
# 引入说明
TIP
import Tooltips from "jimoui/components/Tooltips/Tooltips"
1
# 代码演示
TIP
<Tooltips
:tipsList="tipsList"
:showTipIcon="true"
:showTipClose="true"
@gotoUrl="jump"
@close="closeTips"
></Tooltips>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 支持三种交互方式:
- 单条消息横向滚动,且衔接循环
- 多条消息纵向轮播滚动,且衔接循环
- 多条消息横向滚动,但不衔接循环,需要额外设置 scrollTransverse 为 true
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
:tipsList | 消息列表 | array | 可传一条数据,可传多条数据。 tipsList: ["您有一张6元优惠券即将过期,不要错过哦~","今天是个好天气"], |
tooltipsBc | 背景颜色 | color | 默认颜色"FFF6D2",可修改任意色值。更换背景色会自动更换滚动时左右阴影遮罩颜色。 |
:showTipIcon | 是否显示左侧小图标 | boolean | 默认为true。 |
:showTipClose | 是否显示右侧小图标 | boolean | 默认为true。 |
tipIcon | 左侧图标src | string | 默认为小喇叭。 |
tipClose | 右侧图标src | string | 默认为关闭按钮。 |
tipColor | 消息文字颜色 | string | 默认颜色"FFF6D2",可修改任意色值。 |
tipFontSize | 消息文字大小 | number | 默认13px。 |
borderRadius | 边框圆角 | string | 默认无 |
:scrollTransverse | 切换多条消息滚动交互方式 | boolean | 默认为false。 false:多条消息纵向轮播滚动,且衔接循环 true:多条消息横向滚动,但不衔接循环 |
:timeOut | 纵向多条滚动时间间隔,暂只支持交互2 | Number | 默认2000。 |
@gotoUrl | 监听消息点击事件 | Event | 可获取到点击的index值。 |
@close | 监听右侧图标点击事件 | Event | 监听右侧图标点击事件。 |