滚动通知

滚动通知组件。

基础使用

通过 list 属性设置滚动通知数据。

<template>
	<pure-notice-bar :list="list"></pure-notice-bar>
</template>

<script setup>
	import { ref, computed } from "vue";

	// 通知数据
	const list = ref([
		"君不见，黄河之水天上来，奔流到海不复回。",
		"君不见，高堂明镜悲白发，朝如青丝暮成雪。",
		"人生得意须尽欢，莫使金樽空对月。",
		"天生我材必有用，千金散尽还复来。",
		"烹羊宰牛且为乐，会须一饮三百杯。",
		"岑夫子，丹丘生，将进酒，杯莫停。",
		"与君歌一曲，请君为我倾耳听。",
		"钟鼓馔玉不足贵，但愿长醉不愿醒。",
		"古来圣贤皆寂寞，惟有饮者留其名。",
		"陈王昔时宴平乐，斗酒十千恣欢谑。",
		"主人何为言少钱，径须沽取对君酌。",
		"五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
	]);
</script>

停顿一下

通过 sticky 属性设置滚动后停顿一下。

<template>
	<pure-notice-bar
		:list="list"
		sticky
	></pure-notice-bar>
</template>

右侧按钮

• 通过 showArrow 属性设置是否显示右侧箭头按钮。
• 通过 showClose 属性设置是否显示右侧关闭按钮。

<template>
	<pure-notice-bar
		:list="list"
		showArrow
		showClose
	></pure-notice-bar>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
show	Boolean	true	显示状态
list	Array	[]	通知列表
labelKey	String	""	通知列表中显示的文本键名
showIcon	Boolean	false	是否显示左侧通知图标
iconName	String	__notice	通知图标名称
showArrow	Boolean	false	是否显示右侧箭头按钮
arrowIconName	String	__arrow-right	箭头按钮图标名称
showClose	Boolean	false	是否显示右侧关闭按钮
closeIconName	String	__close	关闭按钮图标名称
vertical	Boolean	false	是否垂直显示通知
speed	String	横向 100px 纵向 30px	每秒移动的距离，单位 px
sticky	Boolean	false	是否贴边停顿一下
stickyDuration	Number	3000	停顿时间，单位 ms

事件

名称	参数	说明
onItemClick	index: 下标; item: 点击的项数据	通知项点击事件
onArrowClick		右侧箭头按钮点击事件
onClose		右侧关闭按钮点击事件

插槽

名称	参数	说明
#left		左侧内容
#right		左侧内容
#icon		通知图标
#arrow		箭头图标
#close		关闭图标

样式变量

名称	说明
--pure-notice-bar-height	高度
--puer-notice-bar-background	背景
--pure-notice-bar-gap	内容间距
--pure-notice-bar-padding	内边距
--pure-notice-bar-transition	过渡
--pure-notice-bar-icon-width	图标宽度
--pure-notice-bar-icon-text-align	图标文字对齐
--pure-notice-bar-icon-font-size	图标字体大小
--pure-notice-bar-icon-font-weight	图标字体粗细
--pure-notice-bar-icon-color	图标字体颜色
--pure-notice-bar-icon-margin	图标外边距
--pure-notice-bar-icon-padding	图标内边距
--pure-notice-bar-icon-notice-font-size	图标通知字体大小
--pure-notice-bar-icon-notice-font-weight	图标通知字体粗细
--pure-notice-bar-icon-notice-color	图标通知字体颜色
--pure-notice-bar-icon-notice-margin	图标通知外边距
--pure-notice-bar-icon-notice-padding	图标通知内边距
--pure-notice-bar-icon-arrow-font-size	箭头图标字体大小
--pure-notice-bar-icon-arrow-font-weight	箭头图标字体粗细
--pure-notice-bar-icon-arrow-color	箭头图标字体颜色
--pure-notice-bar-icon-arrow-margin	箭头图标外边距
--pure-notice-bar-icon-arrow-padding	箭头图标内边距
--pure-notice-bar-icon-close-font-size	关闭图标字体大小
--pure-notice-bar-icon-close-font-weight	关闭图标字体粗细
--pure-notice-bar-icon-close-color	关闭图标字体颜色
--pure-notice-bar-icon-close-margin	关闭图标外边距
--pure-notice-bar-icon-close-padding	关闭图标内边距