uv-notice-bar.vue
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<template>
<view
class="uv-notice-bar"
v-if="show"
:style="[{
backgroundColor: bgColor
}, $uv.addStyle(customStyle)]"
>
<template v-if="direction === 'column' || (direction === 'row' && step)">
<uv-column-notice
:color="color"
:bgColor="bgColor"
:text="text"
:mode="mode"
:step="step"
:icon="icon"
:disable-touch="disableTouch"
:disable-scroll="disableScroll"
:fontSize="fontSize"
:duration="duration"
@close="close"
@click="click"
@change="change"
></uv-column-notice>
</template>
<template v-else>
<uv-row-notice
:color="color"
:bgColor="bgColor"
:text="text"
:mode="mode"
:fontSize="fontSize"
:speed="speed"
:url="url"
:linkType="linkType"
:icon="icon"
@close="close"
@click="click"
></uv-row-notice>
</template>
</view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js'
import mixin from '../../libs/mixin/mixin.js'
import props from './props.js';
/**
* noticeBar 滚动通知
* @description 该组件用于滚动通告场景，有多种模式可供选择
* @tutorial https://www.uvui.cn/components/noticeBar.html
* @property {Array | String} text 显示的内容，数组
* @property {String} direction 通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
* @property {Boolean} step direction = row时，是否使用步进形式滚动 ( 默认 false )
* @property {String} icon 是否显示左侧的音量图标 ( 默认 'volume' )
* @property {String} mode 通告模式，link-显示右箭头，closable-显示右侧关闭图标
* @property {String} color 文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
* @property {String} bgColor 背景颜色 ( 默认 '#fdf6ec' )
* @property {String | Number} speed 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
* @property {String | Number} fontSize 字体大小 ( 默认 14 )
* @property {String | Number} duration 滚动一个周期的时间长，单位ms ( 默认 2000 )
* @property {Boolean} disableTouch 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
* @property {String} url 跳转的页面路径
* @property {String} linkType 页面跳转的类型 ( 默认 navigateTo )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击通告文字触发
* @event {Function} close 点击右侧关闭图标触发
* @example <uv-notice-bar :more-icon="true" :list="list"></uv-notice-bar>
*/
export default {
name: "uv-notice-bar",
emits: ['click','close','change'],
mixins: [mpMixin, mixin, props],
data() {
return {
show: true
}
},
methods: {
// 点击通告栏
click(index) {
this.$emit('click', index)
if (this.url && this.linkType) {
// 此方法写在mixin中，另外跳转的url和linkType参数也在mixin的props中
this.openPage()
}
},
// 点击关闭按钮
close() {
this.show = false
this.$emit('close')
},
// 竖向滚动时触发
change(index){
this.$emit('change',index)
}
}
};
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
.uv-notice-bar {
overflow: hidden;
padding: 9px 12px;
flex: 1;
}
</style>