fusions-ui 1.2.7 → 1.2.8

package/components/fu-notice-bar/notice-column.vue

@@ -1,313 +0,0 @@
-<template>
-	<view class="fu-column-notice" :style="[noticeStyle]" @tap="handleClick" v-if="show">
-		<!-- 左图标 -->
-		<view class="fu-column-notice__icon--left" v-if="leftIcon">
-			<fu-icon :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icon>
-		</view>
-
-		<!-- 滚动显示内容 -->
-		<swiper class="fu-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular
-			:autoplay="autoPlay" :interval="duration" @change="change">
-			<swiper-item v-for="(item, index) in list" :key="index" class="fu-column-notice__swiper__item">
-				<view class="fu-column-notice__swiper__content fu-text-ellipsis" :style="[textStyle()]">
-					{{item}}
-				</view>
-			</swiper-item>
-		</swiper>
-
-		<!-- 右图标 -->
-		<view class="fu-column-notice__icon--right" @click="handleClickRight" v-if="rightIcon">
-			<fu-icon :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icon>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	/**
-	 * @description 垂直
-	 * @property {Array} list 显示的内容
-	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
-	 * @property {Boolean} leftIcon = [true|false] 是否显示左边图标（默认 false）
-	 * @property {String} leftIconName 左边图标的名称 (默认 sound)
-	 * @property {String,Number} leftIconSize 左边图标的大小 (默认 20)
-	 * @property {String} leftIconColor 左边边图标的颜色（默认 '#333333'）
-	 * @property {Boolean} rightIcon = [true|false] 是否显示左边图标（默认 false）
-	 * @property {String} rightIconName 右边图标的名称 (默认 sound)
-	 * @property {String,Number} rightIconSize 右边图标的大小 (默认 20)
-	 * @property {String} rightIconColor 右边图标的颜色（默认 '#333333'）
-	 * @property {String} padding 内边距（默认 '9px 12px'）
-	 * @property {Boolean} autoPlay = [true|false] 自动播放（默认 true）
-	 * @property {Number} duration 滚动周期 (默认 2000)
-	 * @property {String} fontColor  字体颜色
-	 * @property {String,Number} fontSize 字体大小（默认 14）
-	 * @property {String} bgColor 背景颜色
-	 * 
-	 * @event {Function} click 点击通知栏文字触发
-	 * @event {Function} clickRight 点击右侧图标触发
-	 * @event {Function} end 一个周期滚动结束触发
-	 * @example <notice-column :list="list"></notice-column>
-	 */
-	export default {
-		name: "NoticeColumn",
-		mixins: [mpMixin, mixin],
-		emits: ['click', 'clickRight', 'end'],
-		props: {
-			/**
-			 * @description 显示的内容
-			 */
-			list: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			/**
-			 * @description 是否显示
-			 * @default true
-			 */
-			show: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 滚动方向
-			 * @values @values 'row' - 水平滚动, 'column' - 垂直滚动
-			 * @default 'row'
-			 */
-			mode: {
-				type: String,
-				default: 'row'
-			},
-			/**
-			 * @description 是否显示左边图标
-			 * @default true
-			 */
-			leftIcon: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 左边图标的名称
-			 * @default 'volume'
-			 */
-			leftIconName: {
-				type: String,
-				default: 'volume'
-			},
-			/**
-			 * @description 左边图标的大小
-			 * @default 20
-			 */
-			leftIconSize: {
-				type: Number,
-				default: 20
-			},
-			/**
-			 * @description 左边图标的颜色
-			 * @default '#333333'
-			 */
-			leftIconColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 是否显示右边的图标
-			 * @default false
-			 */
-			rightIcon: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 右边图标的名称
-			 * @default 'right'
-			 */
-			rightIconName: {
-				type: String,
-				default: 'right'
-			},
-			/**
-			 * @description 右边图标的大小
-			 * @default 20
-			 */
-			rightIconSize: {
-				type: [String, Number],
-				default: 20
-			},
-			/**
-			 * @description 右边图标的颜色
-			 * @default '#333333'
-			 */
-			rightIconColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 设置圆角
-			 */
-			radius: {
-				type: Number,
-				default: 0
-			},
-			/**
-			 * @description 内边距
-			 * @default '9px 12px'
-			 */
-			padding: {
-				type: String,
-				default: '9px 12px'
-			},
-			/**
-			 * @description 自动播放
-			 * @default true
-			 */
-			autoPlay: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 滚动周期
-			 * @default 2000
-			 */
-			duration: {
-				type: Number,
-				default: 2000
-			},
-			/**
-			 * @description 背景颜色
-			 */
-			bgColor: {
-				type: String,
-				default: ''
-			},
-			/**
-			 * @description 字体颜色
-			 * @default '#333333'
-			 */
-			fontColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 字体大小
-			 * @default 14
-			 */
-			fontSize: {
-				type: [String, Number],
-				default: 14
-			}
-		},
-		data() {
-			return {
-				index: 0
-			};
-		},
-		computed: {
-			textStyle() {
-				return (type) => {
-					let style = {
-						color: this.fontColor || '',
-						fontSize: this.$fu.addUnit(this.fontSize)
-					};
-					return style
-				}
-			},
-			noticeStyle() {
-				let style = {
-					background: this.bgColor || 'transparent'
-				};
-				if (this.padding) style.padding = this.padding
-				return style
-			},
-			swiperStyle() {
-				let style = {}
-				style.height = this.fontSize ? this.$fu.addUnit(this.fontSize + 6) : '16px';
-				style.lineHeight = style.height;
-				return style
-			},
-			// 标记是否为垂直
-			vertical() {
-				if (this.mode === 'row') return false
-				else return true
-			}
-		},
-		methods: {
-			// 点击通知栏
-			handleClick() {
-				this.$emit('click', this.index)
-			},
-
-			// 点击右边图标
-			handleClickRight() {
-				this.$emit('clickRight', this.index)
-			},
-
-			// 切换事件
-			change(e) {
-				let index = e.detail.current;
-				this.index = index;
-				if (index === this.list.length - 1) {
-					this.$emit('end')
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-
-	.fu-column-notice {
-		@include flex(row);
-		align-items: center;
-		justify-content: center;
-		flex-wrap: nowrap;
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		/* #endif */
-
-		&__swiper {
-			height: auto;
-			flex: 1;
-			@include flex(row);
-			align-items: center;
-			margin-left: 6px;
-
-			&__item {
-				@include flex(row);
-				/* #ifndef APP-NVUE */
-				overflow: hidden;
-				/* #endif */
-			}
-
-			&__content {
-				/* #ifndef APP-NVUE */
-				overflow: hidden;
-				/* #endif */
-			}
-		}
-
-		&__icon {
-			&--left {
-				display: inline-flex;
-				align-items: center;
-			}
-
-			&--right {
-				margin-left: 6px;
-				display: inline-flex;
-				align-items: center;
-			}
-		}
-	}
-
-	.fu-text-ellipsis {
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* #endif */
-	}
-</style>

package/components/fu-notice-bar/notice-row.vue

@@ -1,363 +0,0 @@
-<template>
-	<view class="fu-row-notice" :style="[noticeStyle]"  @tap="handleClick" v-if="show">
-		<view class="fu-row-notice__box">
-			<!-- 左图标 -->
-			<view class="fu-row-notice__icon--left" v-if="leftIcon">
-				<fu-icon :name="leftIconName" :size="leftIconSize" :color="leftIconColor"></fu-icon>
-			</view>
-
-			<!-- 消息体 -->
-			<view :id="elIdBox" class="fu-row-notice__content--box">
-				<view :id="elId" class="fu-row-notice__content" :style="{
-			      animationDuration: animationDuration,
-			      animationPlayState: animationPlayState,
-				  animationDelay: animationDelay,
-				  '-webkit-animationDelay': animationDelay
-			    }">
-					<text class="fu-row-notice__content--text" :style="[textStyle()]">{{ showText }}</text>
-				</view>
-			</view>
-
-			<!-- 右图标 -->
-			<view class="fu-row-notice__icon--right" @click="handleClickRight" v-if="rightIcon">
-				<fu-icon :name="rightIconName" :size="rightIconSize" :color="rightIconColor"></fu-icon>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	/**
-	 * @description 水平
-	 * @property {Array} list 显示的内容
-	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
-	 * @property {Boolean} leftIcon = [true|false] 是否显示左边图标（默认 false）
-	 * @property {String} leftIconName 左边图标的名称 (默认 sound)
-	 * @property {String,Number} leftIconSize 左边图标的大小 (默认 20)
-	 * @property {String} leftIconColor 左边边图标的颜色（默认 '#333333'）
-	 * @property {Boolean} rightIcon = [true|false] 是否显示左边图标（默认 false）
-	 * @property {String} rightIconName 右边图标的名称 (默认 sound)
-	 * @property {String,Number} rightIconSize 右边图标的大小 (默认 20)
-	 * @property {String} rightIconColor 右边图标的颜色（默认 '#333333'）
-	 * @property {String} padding 内边距（默认 '9px 12px'）
-	 * @property {Boolean} autoPlay = [true|false] 自动播放（默认 true）
-	 * @property {Number} speed 水平滚动时的速度，即每秒滚动多少px (默认 80)
-	 * @property {String} fontColor  字体颜色
-	 * @property {String,Number} fontSize 字体大小（默认 14）
-	 * @property {String} bgColor 背景颜色
-	 * 
-	 * @event {Function} click 点击通知栏文字触发
-	 * @event {Function} clickRight 点击右侧图标触发
-	 * @example <notice-row :list="list"></notice-row>
-	 */
-	export default {
-		name: "NoticeRow",
-		mixins: [mpMixin, mixin],
-		emits: ['click', 'clickRight'],
-		props: {
-			/**
-			 * @description 显示的内容
-			 */
-			list: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			/**
-			 * @description 是否显示
-			 * @default true
-			 */
-			show: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 是否显示左边图标
-			 * @default true
-			 */
-			leftIcon: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 左边图标的名称
-			 * @default 'volume'
-			 */
-			leftIconName: {
-				type: String,
-				default: 'volume'
-			},
-			/**
-			 * @description 左边图标的大小
-			 * @default 20
-			 */
-			leftIconSize: {
-				type: [String, Number],
-				default: 20
-			},
-			/**
-			 * @description 左边图标的颜色
-			 * @default '#333333'
-			 */
-			leftIconColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 是否显示右边的图标
-			 * @default false
-			 */
-			rightIcon: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 右边图标的名称
-			 * @default 'right'
-			 */
-			rightIconName: {
-				type: String,
-				default: 'right'
-			},
-			/**
-			 * @description 右边图标的大小
-			 * @default 20
-			 */
-			rightIconSize: {
-				type: [String, Number],
-				default: 20
-			},
-			/**
-			 * @description 右边图标的颜色
-			 * @default '#333333'
-			 */
-			rightIconColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 是否显示关闭按钮
-			 * @default false
-			 */
-			showClose: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 内边距
-			 * @default '9px 12px'
-			 */
-			padding: {
-				type: String,
-				default: '9px 12px'
-			},
-			/**
-			 * @description 自动播放
-			 * @default true
-			 */
-			autoPlay: {
-				type: Boolean,
-				default: true
-			},
-			/**
-			 * @description 水平滚动时的速度，即每秒滚动多少px
-			 * @default 80
-			 */
-			speed: {
-				type: Number,
-				default: 80
-			},
-			/**
-			 * @description 背景颜色
-			 * @default '#f9f9f9'
-			 */
-			bgColor: {
-				type: String,
-				default: '#f9f9f9'
-			},
-			/**
-			 * @description 字体颜色
-			 * @default '#333333'
-			 */
-			fontColor: {
-				type: String,
-				default: '#333333'
-			},
-			/**
-			 * @description 字体大小
-			 * @default 14
-			 */
-			fontSize: {
-				type: [String, Number],
-				default: 14
-			}
-		},
-		data() {
-			const elIdBox = this.$fu.uuid();
-			const elId = this.$fu.uuid();
-			return {
-				// 滚动文字的宽度
-				textWidth: 0,
-				// 存放滚动文字的盒子的宽度
-				textBoxWidth: 0,
-				// 动画执行的时间
-				animationDuration: '10s',
-				// 动画执行状态
-				animationPlayState: 'paused',
-				// 动画执行延迟的时间
-				animationDelay: '0s',
-				// 当前显示的文本
-				showText: '',
-				elIdBox,
-				elId
-			};
-		},
-		computed: {
-			textStyle() {
-				return (type) => {
-					let style = {
-						color: this.fontColor || '',
-						fontSize: this.$fu.addUnit(this.fontSize)
-					}
-					return style
-				}
-			},
-			noticeStyle() {
-				let style = {};
-				style.background = this.bgColor || 'transparent';
-				if (this.padding) style.padding = this.padding
-				return style
-			}
-		},
-		methods: {
-			// 初始化通知栏
-			initNotice() {
-				let that = this;
-				let query = [], textBoxWidth = 0, textWidth = 0;
-				let textQuery = new Promise((resolve, reject) => {
-					uni.createSelectorQuery()
-						// #ifndef MP-ALIPAY
-						.in(this)
-						// #endif
-						.select(`#${this.elId}`)
-						.boundingClientRect().exec(ret => {
-							this.textWidth = ret[0].width;
-							resolve()
-						})
-				})
-				let boxQuery = new Promise((resolve, reject) => {
-					uni.createSelectorQuery()
-						// #ifndef MP-ALIPAY
-						.in(this)
-						// #endif
-						.select(`#${this.elIdBox}`)
-						.boundingClientRect()
-						.exec(ret => {
-							this.boxWidth = ret[0].width;
-							resolve()
-						})
-				})
-				query.push(textQuery)
-				query.push(boxQuery)
-				Promise.all(query).then(() => {
-					// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#fu-row-notice__content--box的宽度，因为设置了.fu-row-notice__content样式中设置了padding-left: 100%
-					this.animationDuration = `${this.textWidth / this.speed}s`;
-					this.animationDelay = `-${this.boxWidth / this.speed}s`;
-					// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
-					this.animationPlayState = 'paused';
-					setTimeout(() => {
-						if (that.autoPlay) {
-							this.animationPlayState = 'running';
-						}
-					}, 1000)
-				})
-			},
-			
-			// 点击通知栏
-			handleClick() {
-				this.$emit('click')
-			},
-		
-			// 点击右边图标
-			handleClickRight() {
-				this.$emit('clickRight')
-			}
-		},
-		watch: {
-			list: {
-				immediate: true,
-				handler(value) {
-					this.showText = value.join('，')
-					this.$nextTick(() => {
-						this.initNotice()
-					})
-				}
-			},
-			speed(value) {
-				this.initNotice()
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-row-notice {
-		flex: 1;
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		/* #endif */
-
-		&__box {
-			@include flex(row);
-			align-items: center;
-			justify-content: space-between;
-		}
-
-		&__content {
-
-			&--box {
-				flex: 1;
-				@include flex(row);
-				/* #ifndef APP-NVUE */
-				overflow: hidden;
-				/* #endif */
-			}
-
-			@include flex(row);
-			flex-wrap: nowrap;
-			text-align: right;
-			padding-left: 100%;
-			animation: fu-notice-animation 10s linear infinite both;
-
-			&--text {
-				word-break: keep-all;
-				white-space: nowrap;
-				margin-left: 6px;
-			}
-		}
-
-		&__icon {
-			&--left {
-				display: inline-flex;
-				align-items: center;
-			}
-
-			&--right {
-				margin-left: 6px;
-				display: inline-flex;
-				align-items: center;
-			}
-		}
-	}
-
-	@keyframes fu-notice-animation {
-		100% {
-			transform: translate3d(-100%, 0, 0);
-		}
-	}
-</style>