@gmcb/uv-ui 0.2.26

package/components/uv-count-down/uv-count-down.vue

@@ -0,0 +1,169 @@
+<template>
+	<view 
+		class="uv-count-down"
+		:style="[$uv.addStyle(customStyle)]">
+		<slot>
+			<text class="uv-count-down__text">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	import {
+		isSameSecond,
+		parseFormat,
+		parseTimeData
+	} from './utils';
+	/**
+	 * uv-count-down 倒计时
+	 * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+	 * @tutorial https://www.uvui.cn/components/countDown.html
+	 * @property {String | Number}	time		倒计时时长，单位ms （默认 0 ）
+	 * @property {String}			format		时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
+	 * @property {Boolean}			autoStart	是否自动开始倒计时 （默认 true ）
+	 * @property {Boolean}			millisecond	是否展示毫秒倒计时 （默认 false ）
+	 * @event {Function} finish 倒计时结束时触发 
+	 * @event {Function} change 倒计时变化时触发 
+	 * @event {Function} start	开始倒计时
+	 * @event {Function} pause	暂停倒计时 
+	 * @event {Function} reset	重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 
+	 * @example <uv-count-down :time="time"></uv-count-down>
+	 */
+	export default {
+		name: 'uv-count-down',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				timer: null,
+				// 各单位(天，时，分等)剩余时间
+				timeData: parseTimeData(0),
+				// 格式化后的时间，如"03:23:21"
+				formattedTime: '0',
+				// 倒计时是否正在进行中
+				runing: false,
+				endTime: 0, // 结束的毫秒时间戳
+				remainTime: 0, // 剩余的毫秒时间
+			}
+		},
+		watch: {
+			time(n) {
+				this.reset()
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				this.reset()
+			},
+			// 开始倒计时
+			start() {
+				if (this.runing) return
+				// 标识为进行中
+				this.runing = true
+				// 结束时间戳 = 此刻时间戳 + 剩余的时间
+				this.endTime = Date.now() + this.remainTime
+				this.toTick()
+			},
+			// 根据是否展示毫秒，执行不同操作函数
+			toTick() {
+				if (this.millisecond) {
+					this.microTick()
+				} else {
+					this.macroTick()
+				}
+			},
+			macroTick() {
+				this.clearTimeout()
+				// 每隔一定时间，更新一遍定时器的值
+				// 同时此定时器的作用也能带来毫秒级的更新
+				this.timer = setTimeout(() => {
+					// 获取剩余时间
+					const remain = this.getRemainTime()
+					// 重设剩余时间
+					if (!isSameSecond(remain, this.remainTime) || remain === 0) {
+						this.setRemainTime(remain)
+					}
+					// 如果剩余时间不为0，则继续检查更新倒计时
+					if (this.remainTime !== 0) {
+						this.macroTick()
+					}
+				}, 30)
+			},
+			microTick() {
+				this.clearTimeout()
+				this.timer = setTimeout(() => {
+					this.setRemainTime(this.getRemainTime())
+					if (this.remainTime !== 0) {
+						this.microTick()
+					}
+				}, 50)
+			},
+			// 获取剩余的时间
+			getRemainTime() {
+				// 取最大值，防止出现小于0的剩余时间值
+				return Math.max(this.endTime - Date.now(), 0)
+			},
+			// 设置剩余的时间
+			setRemainTime(remain) {
+				this.remainTime = remain
+				// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+				const timeData = parseTimeData(remain)
+				this.$emit('change', timeData)
+				// 得出格式化后的时间
+				this.formattedTime = parseFormat(this.format, timeData)
+				// 如果时间已到，停止倒计时
+				if (remain <= 0) {
+					this.pause()
+					this.$emit('finish')
+				}
+			},
+			// 重置倒计时
+			reset() {
+				this.pause()
+				this.remainTime = this.time
+				this.setRemainTime(this.remainTime)
+				if (this.autoStart) {
+					this.start()
+				}
+			},
+			// 暂停倒计时
+			pause() {
+				this.runing = false;
+				this.clearTimeout()
+			},
+			// 清空定时器
+			clearTimeout() {
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		// #ifdef VUE2
+		beforeDestroy() {
+			this.clearTimeout()
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.clearTimeout()
+		}
+		// #endif
+	}
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-count-down-text-color: $uv-content-color !default;
+	$uv-count-down-text-font-size: 15px !default;
+	$uv-count-down-text-line-height: 22px !default;
+	.uv-count-down {
+		&__text {
+			color: $uv-count-down-text-color;
+			font-size: $uv-count-down-text-font-size;
+			line-height: $uv-count-down-text-line-height;
+		}
+	}
+</style>

package/components/uv-count-to/props.js

@@ -0,0 +1,60 @@
+export default {
+	props: {
+		// 开始的数值，默认从0增长到某一个数
+		startVal: {
+			type: [String, Number],
+			default: 0
+		},
+		// 要滚动的目标数值，必须
+		endVal: {
+			type: [String, Number],
+			default: 0
+		},
+		// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+		duration: {
+			type: [String, Number],
+			default: 2000
+		},
+		// 设置数值后是否自动开始滚动
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 要显示的小数位数
+		decimals: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+		useEasing: {
+			type: Boolean,
+			default: true
+		},
+		// 十进制分割
+		decimal: {
+			type: [String, Number],
+			default: '.'
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#606266'
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: 22
+		},
+		// 是否加粗字体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 千位分隔符，类似金额的分割(￥23,321.05中的",")
+		separator: {
+			type: String,
+			default: ''
+		},
+		...uni.$uv?.props?.countTo
+	}
+}

package/components/uv-count-to/uv-count-to.vue

@@ -0,0 +1,187 @@
+<template>
+	<text
+		class="uv-count-num"
+		:style="[{
+			fontSize: $uv.addUnit(fontSize),
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color
+		},$uv.addStyle(customStyle)]"
+	>{{ displayValue }}</text>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uvui.cn/components/countTo.html
+ * @property {String | Number}	startVal	开始的数值，默认从0增长到某一个数（默认 0 ）
+ * @property {String | Number}	endVal		要滚动的目标数值，必须 （默认 0 ）
+ * @property {String | Number}	duration	滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认 2000 ）
+ * @property {Boolean}			autoplay	设置数值后是否自动开始滚动 （默认 true ）
+ * @property {String | Number}	decimals	要显示的小数位数，见官网说明（默认 0 ）
+ * @property {Boolean}			useEasing	滚动结束时，是否缓动结尾，见官网说明（默认 true ）
+ * @property {String}			decimal		十进制分割 （ 默认 "." ）
+ * @property {String}			color		字体颜色（ 默认 '#606266' )
+ * @property {String | Number}	fontSize	字体大小，单位px（ 默认 22 ）
+ * @property {Boolean}			bold		字体是否加粗（默认 false ）
+ * @property {String}			separator	千位分隔符，见官网说明
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <uv-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></uv-count-to>
+ */
+export default {
+	name: 'uv-count-to',
+	data() {
+		return {
+			localStartVal: this.startVal,
+			displayValue: this.formatNumber(this.startVal),
+			printVal: null,
+			paused: false, // 是否暂停
+			localDuration: Number(this.duration),
+			startTime: null, // 开始的时间
+			timestamp: null, // 时间戳
+			remaining: null, // 停留的时间
+			rAF: null,
+			lastTime: 0 // 上一次的时间
+		};
+	},
+	mixins: [mpMixin, mixin, props],
+	computed: {
+		countDown() {
+			return this.startVal > this.endVal;
+		}
+	},
+	watch: {
+		startVal() {
+			this.autoplay && this.start();
+		},
+		endVal() {
+			this.autoplay && this.start();
+		}
+	},
+	mounted() {
+		this.autoplay && this.start();
+	},
+	methods: {
+		easingFn(t, b, c, d) {
+			return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+		},
+		requestAnimationFrame(callback) {
+			const currTime = new Date().getTime();
+			// 为了使setTimteout的尽可能的接近每秒60帧的效果
+			const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
+			const id = setTimeout(() => {
+				callback(currTime + timeToCall);
+			}, timeToCall);
+			this.lastTime = currTime + timeToCall;
+			return id;
+		},
+		cancelAnimationFrame(id) {
+			clearTimeout(id);
+		},
+		// 开始滚动数字
+		start() {
+			this.localStartVal = this.startVal;
+			this.startTime = null;
+			this.localDuration = this.duration;
+			this.paused = false;
+			this.rAF = this.requestAnimationFrame(this.count);
+		},
+		// 暂定状态，从暂停状态开始滚动；或者滚动状态下，暂停
+		restart() {
+			if (this.paused) {
+				this.resume();
+				this.paused = false;
+			} else {
+				this.stop();
+				this.paused = true;
+			}
+		},
+		// 暂停
+		stop() {
+			this.cancelAnimationFrame(this.rAF);
+			this.paused = true;
+		},
+		// 重新开始(暂停的情况下)
+		resume() {
+			if (!this.remaining) return;
+			this.startTime = 0;
+			this.localDuration = this.remaining;
+			this.localStartVal = this.printVal;
+			this.requestAnimationFrame(this.count);
+		},
+		// 重置
+		reset() {
+			this.startTime = null;
+			this.cancelAnimationFrame(this.rAF);
+			this.displayValue = this.formatNumber(this.startVal);
+		},
+		count(timestamp) {
+			if (!this.startTime) this.startTime = timestamp;
+			this.timestamp = timestamp;
+			const progress = timestamp - this.startTime;
+			this.remaining = this.localDuration - progress;
+			if (this.useEasing) {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+				} else {
+					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+				}
+			} else {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+				} else {
+					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+				}
+			}
+			if (this.countDown) {
+				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+			} else {
+				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+			}
+			this.displayValue = this.formatNumber(this.printVal) || 0;
+			if (progress < this.localDuration) {
+				this.rAF = this.requestAnimationFrame(this.count);
+			} else {
+				this.$emit('end');
+			}
+		},
+		// 判断是否数字
+		isNumber(val) {
+			return !isNaN(parseFloat(val));
+		},
+		formatNumber(num) {
+			// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+			num = Number(num);
+			num = num.toFixed(Number(this.decimals));
+			num += '';
+			const x = num.split('.');
+			let x1 = x[0];
+			const x2 = x.length > 1 ? `${this.decimal}${x[1]}` : '';
+			const rgx = /(\d+)(\d{3})/;
+			if (this.separator && !this.isNumber(this.separator)) {
+				while (rgx.test(x1)) {
+					x1 = x1.replace(rgx, '$1' + this.separator + '$2');
+				}
+			}
+			return x1 + x2;
+		},
+		destroyed() {
+			this.cancelAnimationFrame(this.rAF);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+
+.uv-count-num {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	text-align: center;
+}
+</style>

package/components/uv-datetime-picker/props.js

@@ -0,0 +1,130 @@
+export default {
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		modelValue: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否打开组件
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 是否展示顶部的操作栏
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		// 顶部标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
+		mode: {
+			type: String,
+			default: 'datetime'
+		},
+		// 可选的最大时间
+		maxDate: {
+			type: Number,
+			// 最大默认值为后10年
+			default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
+		},
+		// 可选的最小时间
+		minDate: {
+			type: Number,
+			// 最小默认值为前10年
+			default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
+		},
+		// 可选的最小小时，仅mode=time有效
+		minHour: {
+			type: Number,
+			default: 0
+		},
+		// 可选的最大小时，仅mode=time有效
+		maxHour: {
+			type: Number,
+			default: 23
+		},
+		// 可选的最小分钟，仅mode=time有效
+		minMinute: {
+			type: Number,
+			default: 0
+		},
+		// 可选的最大分钟，仅mode=time有效
+		maxMinute: {
+			type: Number,
+			default: 59
+		},
+		// 选项过滤函数
+		filter: {
+			type: [Function, null],
+			default: null
+		},
+		// 选项格式化函数
+		formatter: {
+			type: [Function, null],
+			default: null
+		},
+		// 是否显示加载中状态
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 各列中，单个选项的高度
+		itemHeight: {
+			type: [String, Number],
+			default: 44
+		},
+		// 取消按钮的文字
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		// 确认按钮的文字
+		confirmText: {
+			type: String,
+			default: '确认'
+		},
+		// 取消按钮的颜色
+		cancelColor: {
+			type: String,
+			default: '#909193'
+		},
+		// 确认按钮的颜色
+		confirmColor: {
+			type: String,
+			default: '#3c9cff'
+		},
+		// 每列中可见选项的数量
+		visibleItemCount: {
+			type: [String, Number],
+			default: 5
+		},
+		// 是否允许点击遮罩关闭选择器
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: true
+		},
+		// 是否允许点击确认关闭选择器
+		closeOnClickConfirm: {
+			type: Boolean,
+			default: true
+		},
+		// 是否清空上次选择内容
+		clearDate: {
+			type: Boolean,
+			default: false
+		},
+		// 圆角
+		round: {
+			type: [String, Number],
+			default: 0
+		},
+		...uni.$uv?.props?.datetimePicker
+	}
+}