看板
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import type { ExtractPropTypes, PropType } from 'vue';
|
||||
import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
|
||||
import { baseProps } from '../common/props';
|
||||
|
||||
/**
|
||||
* u-column-notice 通告栏 Props
|
||||
*/
|
||||
export const ColumnNoticeProps = {
|
||||
...baseProps,
|
||||
/** 显示的内容，数组 */
|
||||
list: { type: Array as PropType<string[]>, default: () => [] },
|
||||
/** 显示的主题，success|error|primary|info|warning */
|
||||
type: { type: String as PropType<ThemeType | 'none'>, default: 'warning' },
|
||||
/** 是否显示左侧的音量图标 */
|
||||
volumeIcon: { type: Boolean, default: true },
|
||||
/** 是否显示右侧的右箭头图标 */
|
||||
moreIcon: { type: Boolean, default: false },
|
||||
/** 是否显示右侧的关闭图标 */
|
||||
closeIcon: { type: Boolean, default: false },
|
||||
/** 是否自动播放 */
|
||||
autoplay: { type: Boolean, default: true },
|
||||
/** 文字颜色，各图标也会使用文字颜色 */
|
||||
color: { type: String, default: '' },
|
||||
/** 背景颜色 */
|
||||
bgColor: { type: String, default: '' },
|
||||
/** 滚动方向，row-水平滚动，column-垂直滚动 */
|
||||
direction: { type: String as PropType<ScrollDirection>, default: 'row' },
|
||||
/** 是否显示 */
|
||||
show: { type: Boolean, default: true },
|
||||
/** 字体大小，单位rpx */
|
||||
fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
|
||||
/** 滚动一个周期的时间长，单位ms */
|
||||
duration: { type: [Number, String] as PropType<number | string>, default: 2000 },
|
||||
/** 音量喇叭的大小 */
|
||||
volumeSize: { type: [Number, String] as PropType<number | string>, default: 34 },
|
||||
/** 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度 */
|
||||
speed: { type: Number, default: 160 },
|
||||
/** 水平滚动时，是否采用衔接形式滚动 */
|
||||
isCircular: { type: Boolean, default: true },
|
||||
/** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
|
||||
mode: { type: String as PropType<Direction>, default: 'horizontal' },
|
||||
/** 播放状态，play-播放，paused-暂停 */
|
||||
playState: { type: String as PropType<PlayState>, default: 'play' },
|
||||
/** 是否禁止用手滑动切换 */
|
||||
disableTouch: { type: Boolean, default: true },
|
||||
/** 通知的边距 */
|
||||
padding: { type: [Number, String] as PropType<number | string>, default: '18rpx 24rpx' }
|
||||
};
|
||||
|
||||
export type ColumnNoticeProps = ExtractPropTypes<typeof ColumnNoticeProps>;
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view
|
||||
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-icon-wrap">
|
||||
<u-icon
|
||||
class="u-left-icon"
|
||||
v-if="props.volumeIcon"
|
||||
name="volume-fill"
|
||||
:size="props.volumeSize"
|
||||
:color="computeColor"
|
||||
></u-icon>
|
||||
</view>
|
||||
<swiper
|
||||
:disable-touch="props.disableTouch"
|
||||
@change="change"
|
||||
:autoplay="props.autoplay && props.playState === 'play'"
|
||||
:vertical="vertical"
|
||||
circular
|
||||
:interval="props.duration"
|
||||
class="u-swiper"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
|
||||
<view
|
||||
class="u-news-item u-line-1"
|
||||
:style="textStyle"
|
||||
@tap="click(index)"
|
||||
:class="['u-type-' + props.type]"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'u-column-notice',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
// #ifndef MP-TOUTIAO
|
||||
virtualHost: true,
|
||||
// #endif
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { ColumnNoticeProps } from './types';
|
||||
import { $u } from '../../';
|
||||
|
||||
/**
|
||||
* u-column-notice 通告栏
|
||||
* @property {Array} list 显示的内容，数组
|
||||
* @property {String} type 显示的主题，success|error|primary|info|warning
|
||||
* @property {Boolean} volumeIcon 是否显示左侧的音量图标
|
||||
* @property {Boolean} moreIcon 是否显示右侧的右箭头图标
|
||||
* @property {Boolean} closeIcon 是否显示右侧的关闭图标
|
||||
* @property {Boolean} autoplay 是否自动播放
|
||||
* @property {String} color 文字颜色，各图标也会使用文字颜色
|
||||
* @property {String} bgColor 背景颜色
|
||||
* @property {String} direction 滚动方向，row-水平滚动，column-垂直滚动
|
||||
* @property {Boolean} show 是否显示
|
||||
* @property {String|Number} fontSize 字体大小，单位rpx
|
||||
* @property {String|Number} duration 滚动一个周期的时间长，单位ms
|
||||
* @property {String|Number} volumeSize 音量喇叭的大小
|
||||
* @property {Number} speed 水平滚动时的滚动速度，即每秒滚动多少rpx
|
||||
* @property {Boolean} isCircular 水平滚动时，是否采用衔接形式滚动
|
||||
* @property {String} mode 滚动方向，horizontal-水平滚动，vertical-垂直滚动
|
||||
* @property {String} playState 播放状态，play-播放，paused-暂停
|
||||
* @property {Boolean} disableTouch 是否禁止用手滑动切换
|
||||
* @property {String|Number} padding 通知的边距
|
||||
*/
|
||||
|
||||
const props = defineProps(ColumnNoticeProps);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', index: number): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'getMore'): void;
|
||||
(e: 'end'): void;
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 计算字体颜色，如果没有自定义的，就用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 vertical = computed(() => {
|
||||
return props.mode !== 'horizontal';
|
||||
});
|
||||
|
||||
/**
|
||||
* 计算背景颜色
|
||||
*/
|
||||
const computeBgColor = computed(() => {
|
||||
if (props.bgColor) return props.bgColor;
|
||||
else if (props.type === 'none') return 'transparent';
|
||||
else return '';
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击通告栏
|
||||
*/
|
||||
function click(index: number) {
|
||||
emit('click', index);
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击关闭按钮
|
||||
*/
|
||||
function close() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击更多箭头按钮
|
||||
*/
|
||||
function getMore() {
|
||||
emit('getMore');
|
||||
}
|
||||
|
||||
/**
|
||||
* swiper 切换事件
|
||||
*/
|
||||
function change(e: { detail: { current: number } }) {
|
||||
const index = e.detail.current;
|
||||
if (index === props.list.length - 1) {
|
||||
emit('end');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/style.components.scss';
|
||||
|
||||
.u-notice-bar {
|
||||
width: 100%;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 18rpx 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-swiper {
|
||||
font-size: 26rpx;
|
||||
height: 32rpx;
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.u-swiper-item {
|
||||
@include vue-flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-news-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-right-icon {
|
||||
margin-left: 12rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-left-icon {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user