257 lines
6.9 KiB
Vue
257 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
v-if="props.show"
|
|||
|
|
class="u-notice-bar"
|
|||
|
|
:style="$u.toStyle({ background: computeBgColor, padding: props.padding }, customStyle)"
|
|||
|
|
:class="[props.type ? `u-type-${props.type}-light-bg` : '', customClass]"
|
|||
|
|
>
|
|||
|
|
<view class="u-direction-row">
|
|||
|
|
<view class="u-icon-wrap">
|
|||
|
|
<u-icon
|
|||
|
|
class="u-left-icon"
|
|||
|
|
v-if="props.volumeIcon"
|
|||
|
|
name="volume-fill"
|
|||
|
|
:size="props.volumeSize"
|
|||
|
|
:color="computeColor"
|
|||
|
|
></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-notice-box" id="u-notice-box">
|
|||
|
|
<view
|
|||
|
|
class="u-notice-content"
|
|||
|
|
id="u-notice-content"
|
|||
|
|
:style="{ animationDuration: animationDuration, animationPlayState: animationPlayState }"
|
|||
|
|
>
|
|||
|
|
<text class="u-notice-text" @tap="click" :style="textStyle" :class="['u-type-' + props.type]">
|
|||
|
|
{{ showText }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="u-icon-wrap">
|
|||
|
|
<u-icon
|
|||
|
|
@click="getMore"
|
|||
|
|
class="u-right-icon"
|
|||
|
|
v-if="props.moreIcon"
|
|||
|
|
name="arrow-right"
|
|||
|
|
:size="26"
|
|||
|
|
:color="computeColor"
|
|||
|
|
></u-icon>
|
|||
|
|
<u-icon
|
|||
|
|
@click="close"
|
|||
|
|
class="u-right-icon"
|
|||
|
|
v-if="props.closeIcon"
|
|||
|
|
name="close"
|
|||
|
|
:size="24"
|
|||
|
|
:color="computeColor"
|
|||
|
|
></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-row-notice',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
|
|||
|
|
import { RowNoticeProps } from './types';
|
|||
|
|
import { $u } from '../..';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* u-row-notice 水平滚动通告栏
|
|||
|
|
* @property {Array} list 显示的内容，数组
|
|||
|
|
* @property {String} type 显示的主题，success|error|primary|info|warning|none
|
|||
|
|
* @property {Boolean} volumeIcon 是否显示左侧的音量图标
|
|||
|
|
* @property {Boolean} moreIcon 是否显示右侧的右箭头图标
|
|||
|
|
* @property {Boolean} closeIcon 是否显示右侧的关闭图标
|
|||
|
|
* @property {Boolean} autoplay 是否自动播放
|
|||
|
|
* @property {String} color 文字颜色，各图标也会使用文字颜色
|
|||
|
|
* @property {String} bgColor 背景颜色
|
|||
|
|
* @property {Boolean} show 是否显示
|
|||
|
|
* @property {String|Number} fontSize 字体大小，单位rpx
|
|||
|
|
* @property {String|Number} volumeSize 音量喇叭的大小
|
|||
|
|
* @property {String|Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
|
|||
|
|
* @property {String} playState 播放状态，play-播放，paused-暂停
|
|||
|
|
* @property {String|Number} padding 通知的边距
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const props = defineProps(RowNoticeProps);
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{ (e: 'click'): void; (e: 'close'): void; (e: 'getMore'): void }>();
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
const textWidth = ref(0); // 滚动的文字宽度
|
|||
|
|
const animationDuration = ref('10s'); // 动画执行时间
|
|||
|
|
const animationPlayState = ref('paused'); // 动画的开始和结束执行
|
|||
|
|
const showText = ref(''); // 显示的文本
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算字体颜色，如果没有自定义的，就用uview主题颜色
|
|||
|
|
*/
|
|||
|
|
const computeColor = computed(() => {
|
|||
|
|
if (props.color) return props.color;
|
|||
|
|
// 如果是无主题，就默认使用content-color
|
|||
|
|
else if (props.type === 'none') return 'var(--u-content-color)';
|
|||
|
|
else return props.type;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文字内容的样式
|
|||
|
|
*/
|
|||
|
|
const textStyle = computed(() => {
|
|||
|
|
const style: Record<string, any> = {};
|
|||
|
|
if (props.color) style.color = props.color;
|
|||
|
|
else if (props.type === 'none') style.color = 'var(--u-content-color)';
|
|||
|
|
style.fontSize = props.fontSize + 'rpx';
|
|||
|
|
return style;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算背景颜色
|
|||
|
|
*/
|
|||
|
|
const computeBgColor = computed(() => {
|
|||
|
|
if (props.bgColor) return props.bgColor;
|
|||
|
|
else if (props.type === 'none') return 'transparent';
|
|||
|
|
else return '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化滚动宽度和动画
|
|||
|
|
*/
|
|||
|
|
function initSize() {
|
|||
|
|
nextTick(() => {
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(instance?.proxy)
|
|||
|
|
.select('#u-notice-content')
|
|||
|
|
.boundingClientRect()
|
|||
|
|
.exec(ret => {
|
|||
|
|
textWidth.value = ret[0]?.width || 0;
|
|||
|
|
// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
|
|||
|
|
// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
|
|||
|
|
animationDuration.value = `${textWidth.value / uni.upx2px(Number(props.speed))}s`;
|
|||
|
|
// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
|
|||
|
|
animationPlayState.value = 'paused';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (props.playState === 'play' && props.autoplay) animationPlayState.value = 'running';
|
|||
|
|
}, 10);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.list,
|
|||
|
|
val => {
|
|||
|
|
showText.value = val.join('，');
|
|||
|
|
initSize();
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.playState,
|
|||
|
|
val => {
|
|||
|
|
animationPlayState.value = val === 'play' ? 'running' : 'paused';
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.speed,
|
|||
|
|
() => {
|
|||
|
|
initSize();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
initSize();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击通告栏
|
|||
|
|
*/
|
|||
|
|
function click() {
|
|||
|
|
emit('click');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击关闭按钮
|
|||
|
|
*/
|
|||
|
|
function close() {
|
|||
|
|
emit('close');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击更多箭头按钮
|
|||
|
|
*/
|
|||
|
|
function getMore() {
|
|||
|
|
emit('getMore');
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-notice-bar {
|
|||
|
|
padding: 18rpx 24rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-direction-row {
|
|||
|
|
@include vue-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-left-icon {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: inline-flex;
|
|||
|
|
/* #endif */
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-notice-box {
|
|||
|
|
flex: 1;
|
|||
|
|
@include vue-flex;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-right-icon {
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-notice-content {
|
|||
|
|
animation: u-loop-animation 10s linear infinite both;
|
|||
|
|
text-align: right;
|
|||
|
|
// 这一句很重要，为了能让滚动左右连接起来
|
|||
|
|
padding-left: 100%;
|
|||
|
|
@include vue-flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-notice-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
word-break: keep-all;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes u-loop-animation {
|
|||
|
|
0% {
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translate3d(-100%, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|