You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
3.8 KiB
Vue

3 months ago
<template>
<view
class="u-notice"
@tap="clickHandler"
>
<slot name="icon">
<view
class="u-notice__left-icon"
v-if="icon"
>
<u-icon
:name="icon"
:color="color"
size="19"
></u-icon>
</view>
</slot>
<swiper
:disable-touch="disableTouch"
:vertical="step ? false : true"
circular
:interval="duration"
:autoplay="true"
class="u-notice__swiper"
@change="noticeChange"
>
<swiper-item
v-for="(item, index) in text"
:key="index"
class="u-notice__swiper__item"
>
<text
class="u-notice__swiper__item__text u-line-1"
:style="[textStyle]"
>{{ item }}</text>
</swiper-item>
</swiper>
<view
class="u-notice__right-icon"
v-if="['link', 'closable'].includes(mode)"
>
<u-icon
v-if="mode === 'link'"
name="arrow-right"
:size="17"
:color="color"
></u-icon>
<u-icon
v-if="mode === 'closable'"
name="close"
:size="16"
:color="color"
@click="close"
></u-icon>
</view>
</view>
</template>
<script>
import props from './props.js';
/**
* ColumnNotice 滚动通知中的垂直滚动 内部组件
* @description 该组件用于滚动通告场景是其中的垂直滚动方式
* @tutorial https://www.uviewui.com/components/noticeBar.html
* @property {Array} text 显示的内容字符串
* @property {String} icon 是否显示左侧的音量图标 默认 'volume'
* @property {String} mode 通告模式link-显示右箭头closable-显示右侧关闭图标
* @property {String} color 文字颜色各图标也会使用文字颜色 默认 '#f9ae3d'
* @property {String} bgColor 背景颜色 默认 '#fdf6ec'
* @property {String | Number} fontSize 字体大小单位px 默认 14
* @property {String | Number} speed 水平滚动时的滚动速度即每秒滚动多少px(rpx)这有利于控制文字无论多少时都能有一个恒定的速度 默认 80
* @property {Boolean} step direction = row时是否使用步进形式滚动 默认 false
* @property {String | Number} duration 滚动一个周期的时间长单位ms 默认 1500
* @property {Boolean} disableTouch 是否禁止用手滑动切换 目前HX2.6.11只支持App 2.5.5+H5 2.5.5+支付宝小程序字节跳动小程序 默认 true
* @example
*/
export default {
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
watch: {
text: {
immediate: true,
handler(newValue, oldValue) {
if(!uni.$u.test.array(newValue)) {
uni.$u.error('noticebar组件direction为column时要求text参数为数组形式')
}
}
}
},
computed: {
// 文字内容的样式
textStyle() {
let style = {}
style.color = this.color
style.fontSize = uni.$u.addUnit(this.fontSize)
return style
},
// 垂直或者水平滚动
vertical() {
if (this.mode == 'horizontal') return false
else return true
},
},
data() {
return {
index:0
}
},
methods: {
noticeChange(e){
this.index = e.detail.current
},
// 点击通告栏
clickHandler() {
this.$emit('click', this.index)
},
// 点击关闭按钮
close() {
this.$emit('close')
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-notice {
@include flex;
align-items: center;
justify-content: space-between;
&__left-icon {
align-items: center;
margin-right: 5px;
}
&__right-icon {
margin-left: 5px;
align-items: center;
}
&__swiper {
height: 16px;
@include flex;
align-items: center;
flex: 1;
&__item {
@include flex;
align-items: center;
overflow: hidden;
&__text {
font-size: 14px;
color: $u-warning;
}
}
}
}
</style>