@gmcb/uv-ui 0.2.26

package/components/uv-code/uv-code.vue

@@ -0,0 +1,136 @@
+<template>
+	<view class="uv-code">
+		<!-- 此组件功能由js完成，无需写html逻辑 -->
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Code 验证码倒计时
+	 * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景
+	 * @tutorial https://www.uvui.cn/components/code.html
+	 * @property {String | Number}	seconds			倒计时所需的秒数（默认 60 ）
+	 * @property {String}			startText		开始前的提示语，见官网说明（默认 '获取验证码' ）
+	 * @property {String}			changeText		倒计时期间的提示语，必须带有字母"x"，见官网说明（默认 'X秒重新获取' ）
+	 * @property {String}			endText			倒计结束的提示语，见官网说明（默认 '重新获取' ）
+	 * @property {Boolean}			keepRunning		是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
+	 * @property {String}			uniqueKey		为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+	 *
+	 * @event {Function}	change	倒计时期间，每秒触发一次
+	 * @event {Function}	start	开始倒计时触发
+	 * @event {Function}	end		结束倒计时触发
+	 * @example <uv-code ref="uCode" @change="codeChange" seconds="20"></uv-code>
+	 */
+	export default {
+		name: "uv-code",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				secNum: this.seconds,
+				timer: null,
+				canGetCode: true, // 是否可以执行验证码操作
+			}
+		},
+		mounted() {
+			this.checkKeepRunning()
+		},
+		watch: {
+			seconds: {
+				immediate: true,
+				handler(n) {
+					this.secNum = n
+				}
+			}
+		},
+		methods: {
+			checkKeepRunning() {
+				// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+				let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$uCountDownTimestamp'))
+				if (!lastTimestamp) return this.changeEvent(this.startText)
+				// 当前秒的时间戳
+				let nowTimestamp = Math.floor((+new Date()) / 1000)
+				// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
+				if (this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+					// 剩余尚未执行完的倒计秒数
+					this.secNum = lastTimestamp - nowTimestamp
+					// 清除本地保存的变量
+					uni.removeStorageSync(this.uniqueKey + '_$uCountDownTimestamp')
+					// 开始倒计时
+					this.start()
+				} else {
+					// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+					this.changeEvent(this.startText)
+				}
+			},
+			// 开始倒计时
+			start() {
+				// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+				if (this.timer) {
+					clearInterval(this.timer)
+					this.timer = null
+				}
+				this.$emit('start')
+				this.canGetCode = false
+				// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+				this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
+				this.timer = setInterval(() => {
+					if (--this.secNum) {
+						// 用当前倒计时的秒数替换提示字符串中的"x"字母
+						this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
+					} else {
+						clearInterval(this.timer)
+						this.timer = null
+						this.changeEvent(this.endText)
+						this.secNum = this.seconds
+						this.$emit('end')
+						this.canGetCode = true
+					}
+				}, 1000)
+				this.setTimeToStorage()
+			},
+			// 重置，可以让用户再次获取验证码
+			reset() {
+				this.canGetCode = true
+				clearInterval(this.timer)
+				this.secNum = this.seconds
+				this.changeEvent(this.endText)
+			},
+			changeEvent(text) {
+				this.$emit('change', text)
+			},
+			// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+			setTimeToStorage() {
+				if (!this.keepRunning || !this.timer) return
+				// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+				// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+				if (this.secNum > 0 && this.secNum <= this.seconds) {
+					// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
+					let nowTimestamp = Math.floor((+new Date()) / 1000)
+					// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+					uni.setStorage({
+						key: this.uniqueKey + '_$uCountDownTimestamp',
+						data: nowTimestamp + Number(this.secNum)
+					})
+				}
+			}
+		},
+		// #ifdef VUE2
+		// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
+		beforeDestroy() {
+			this.setTimeToStorage()
+			clearTimeout(this.timer)
+			this.timer = null
+		},
+		// #endif
+		// #ifdef VUE3
+		// 组件销毁，兼容vue3
+		unmounted() {
+			this.setTimeToStorage()
+			clearTimeout(this.timer)
+			this.timer = null
+		}
+		// #endif
+	}
+</script>

package/components/uv-code-input/props.js

@@ -0,0 +1,83 @@
+export default {
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		modelValue: {
+			type: [String, Number],
+			default: ''
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: true
+		},
+		// 最大输入长度
+		maxlength: {
+			type: [String, Number],
+			default: 6
+		},
+		// 是否用圆点填充
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		// 显示模式，box-盒子模式，line-底部横线模式
+		mode: {
+			type: String,
+			default: 'box'
+		},
+		// 是否细边框
+		hairline: {
+			type: Boolean,
+			default: false
+		},
+		// 字符间的距离
+		space: {
+			type: [String, Number],
+			default: 10
+		},
+		// 是否自动获取焦点
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 字体是否加粗
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#606266'
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: 18
+		},
+		// 输入框的大小，宽等于高
+		size: {
+			type: [String, Number],
+			default: 35
+		},
+		// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+		disabledKeyboard: {
+			type: Boolean,
+			default: false
+		},
+		// 边框和线条颜色
+		borderColor: {
+			type: String,
+			default: '#c9cacc'
+		},
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: Boolean,
+			default: true
+		},
+		...uni.$uv?.props?.codeInput
+	}
+}

package/components/uv-code-input/uv-code-input.vue

@@ -0,0 +1,272 @@
+<template>
+	<view class="uv-code-input">
+		<view
+			class="uv-code-input__item"
+			:style="[itemStyle(index)]"
+			v-for="(item, index) in codeLength"
+			:key="index"
+		>
+			<view
+				class="uv-code-input__item__dot"
+				v-if="dot && codeArray.length > index"
+			></view>
+			<text
+				v-else
+				:style="{
+					fontSize: $uv.addUnit(fontSize),
+					fontWeight: bold ? 'bold' : 'normal',
+					color: color
+				}"
+			>{{codeArray[index]}}</text>
+			<view
+				class="uv-code-input__item__line"
+				v-if="mode === 'line'"
+				:style="[lineStyle]"
+			></view>
+			<!-- #ifndef APP-PLUS -->
+			<view v-if="isFocus && codeArray.length === index" :style="{backgroundColor: color}" class="uv-code-input__item__cursor"></view>
+			<!-- #endif -->
+		</view>
+		<input
+			:disabled="disabledKeyboard"
+			type="number"
+			:focus="focus"
+			:value="inputValue"
+			:maxlength="maxlength"
+			:adjustPosition="adjustPosition"
+			class="uv-code-input__input"
+			@input="inputHandler"
+			:style="{
+				height: $uv.addUnit(size) 
+			}"
+			@focus="isFocus = true"
+			@blur="isFocus = false"
+		/>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * CodeInput 验证码输入
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uvui的键盘组件使用
+	 * @tutorial https://www.uvui.cn/components/codeInput.html
+	 * @property {String | Number}	value / v-model				预置值
+	 * @property {String | Number}	maxlength			最大输入长度 （默认 6 ）
+	 * @property {Boolean}			dot					是否用圆点填充 （默认 false ）
+	 * @property {String}			mode				显示模式，box-盒子模式，line-底部横线模式 （默认 'box' ）
+	 * @property {Boolean}			hairline			是否细边框 （默认 false ）
+	 * @property {String | Number}	space				字符间的距离 （默认 10 ）
+	 * @property {Boolean}			focus				是否自动获取焦点 （默认 false ）
+	 * @property {Boolean}			bold				字体和输入横线是否加粗 （默认 false ）
+	 * @property {String}			color				字体颜色 （默认 '#606266' ）
+	 * @property {String | Number}	fontSize			字体大小，单位px （默认 18 ）
+	 * @property {String | Number}	size				输入框的大小，宽等于高 （默认 35 ）
+	 * @property {Boolean}			disabledKeyboard	是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
+	 * @property {String}			borderColor			边框和线条颜色 （默认 '#c9cacc' ）
+	 * @property {Boolean}			disabledDot			是否禁止输入"."符号 （默认 true ）
+	 * 
+	 * @event {Function}	change	输入内容发生改变时触发，具体见上方说明			value：当前输入的值
+	 * @event {Function}	finish	输入字符个数达maxlength值时触发，见上方说明	value：当前输入的值
+	 * @example	<uv-code-input v-model="value4" :focus="true"></uv-code-input>
+	 */
+	export default {
+		name: 'uv-code-input',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				inputValue: '',
+				isFocus: this.focus
+			}
+		},
+		created() {
+			const value = String(this.value) || String(this.modelValue);
+			this.inputValue = String(value).substring(0, this.maxlength);
+		},
+		watch: {
+			value(newVal) {
+				// 转为字符串，超出部分截掉
+				this.inputValue = String(newVal).substring(0, this.maxlength);
+				if (this.disabledKeyboard) {
+					this.customInput();
+				}
+			},
+			modelValue(newVal) {
+				// 转为字符串，超出部分截掉
+				this.inputValue = String(newVal).substring(0, this.maxlength);
+				if (this.disabledKeyboard) {
+					this.customInput();
+				}
+			}
+		},
+		computed: {
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			codeLength() {
+				return new Array(Number(this.maxlength))
+			},
+			// 循环item的样式
+			itemStyle() {
+				return index => {
+					const addUnit = this.$uv.addUnit
+					const style = {
+						width: addUnit(this.size),
+						height: addUnit(this.size)
+					}
+					// 盒子模式下，需要额外进行处理
+					if (this.mode === 'box') {
+						// 设置盒子的边框，如果是细边框，则设置为0.5px宽度
+						style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`
+						// 如果盒子间距为0的话
+						if (this.$uv.getPx(this.space) === 0) {
+							// 给第一和最后一个盒子设置圆角
+							if (index === 0) {
+								style.borderTopLeftRadius = '3px'
+								style.borderBottomLeftRadius = '3px'
+							}
+							if (index === this.codeLength.length - 1) {
+								style.borderTopRightRadius = '3px'
+								style.borderBottomRightRadius = '3px'
+							}
+							// 最后一个盒子的右边框需要保留
+							if (index !== this.codeLength.length - 1) {
+								style.borderRight = 'none'
+							}
+						}
+					}
+					if (index !== this.codeLength.length - 1) {
+						// 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+						style.marginRight = addUnit(this.space)
+					} else {
+						// 最后一个盒子的有边框需要保留
+						style.marginRight = 0
+					}
+					return style
+				}
+			},
+			// 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+			codeArray() {
+				return String(this.inputValue).split('')
+			},
+			// 下划线模式下，横线的样式
+			lineStyle() {
+				const style = {}
+				style.height = this.hairline ? '1px' : '4px'
+				style.width = this.$uv.addUnit(this.size)
+				// 线条模式下，背景色即为边框颜色
+				style.backgroundColor = this.borderColor
+				return style
+			}
+		},
+		methods: {
+			// 监听输入框的值发生变化
+			inputHandler(e) {
+				const value = e.detail.value
+				this.inputValue = value
+				// 是否允许输入“.”符号
+				if (this.disabledDot) {
+					this.$nextTick(() => {
+						this.inputValue = value.replace('.', '')
+					})
+				}
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value)
+				// 修改通过v-model双向绑定的值
+				this.$emit('input', value)
+				this.$emit('update:modelValue', value)
+				// 达到用户指定输入长度时，发出完成事件
+				if (String(value).length >= Number(this.maxlength)) {
+					this.$emit('finish', value)
+				}
+			},
+			// 自定义键盘输入值监听
+			customInput() {
+				const value = this.inputValue;
+				// 是否允许输入“.”符号
+				if (this.disabledDot) {
+					this.$nextTick(() => {
+						this.inputValue = value.replace('.', '')
+					})
+				}
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value)
+				// 达到用户指定输入长度时，发出完成事件
+				if (String(value).length >= Number(this.maxlength)) {
+					this.$emit('finish', value)
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-code-input-cursor-width: 1px;
+	$uv-code-input-cursor-height: 40%;
+	$uv-code-input-cursor-animation-duration: 1s;
+	$uv-code-input-cursor-animation-name: uv-cursor-flicker;
+	.uv-code-input {
+		@include flex;
+		position: relative;
+		overflow: hidden;
+		&__item {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			&__text {
+				font-size: 15px;
+				color: $uv-content-color;
+			}
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 100px;
+				background-color: $uv-content-color;
+			}
+			&__line {
+				position: absolute;
+				bottom: 0;
+				height: 4px;
+				border-radius: 100px;
+				width: 40px;
+				background-color: $uv-content-color;
+			}
+			/* #ifndef APP-PLUS */
+			&__cursor {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: $uv-code-input-cursor-width;
+				height: $uv-code-input-cursor-height;
+				animation: $uv-code-input-cursor-animation-duration uv-cursor-flicker infinite;
+			}
+			/* #endif */
+		}
+		&__input {
+			// 之所以需要input输入框，是因为有它才能唤起键盘
+			// 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
+			position: absolute;
+			left: -750rpx;
+			width: 1500rpx;
+			top: 0;
+			background-color: transparent;
+			text-align: left;
+		}
+	}
+	/* #ifndef APP-PLUS */
+	@keyframes uv-cursor-flicker {
+		0% {
+			opacity: 0;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+	/* #endif */
+</style>

package/components/uv-col/props.js

@@ -0,0 +1,30 @@
+export default {
+	props: {
+		// 占父容器宽度的多少等分，总分为12份
+		span: {
+			type: [String, Number],
+			default: 12
+		},
+		// 指定栅格左侧的间隔数(总12栏)
+		offset: {
+			type: [String, Number],
+			default: 0
+		},
+		// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+		justify: {
+			type: String,
+			default: 'start'
+		},
+		// 垂直对齐方式，可选值为top、center、bottom、stretch
+		align: {
+			type: String,
+			default: 'stretch'
+		},
+		// 文字对齐方式
+		textAlign: {
+			type: String,
+			default: 'left'
+		},
+		...uni.$uv?.props?.col
+	}
+}

package/components/uv-col/uv-col.vue

@@ -0,0 +1,165 @@
+<template>
+	<view
+	    class="uv-col"
+		ref="uv-col"
+	    :class="[
+			'uv-col-' + span
+		]"
+	    :style="[colStyle]"
+	    @tap="clickHandler"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * CodeInput 栅格系统的列 
+	 * @description 该组件一般用于Layout 布局 通过基础的 12 分栏，迅速简便地创建布局
+	 * @tutorial https://www.uvui.cn/components/Layout.html
+	 * @property {String | Number}	span		栅格占据的列数，总12等份 (默认 12 ) 
+	 * @property {String | Number}	offset		分栏左边偏移，计算方式与span相同 (默认 0 ) 
+	 * @property {String}			justify		水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)  (默认 'start' ) 
+	 * @property {String}			align		垂直对齐方式，可选值为top、center、bottom、stretch (默认 'stretch' ) 
+	 * @property {String}			textAlign	文字水平对齐方式 (默认 'left' ) 
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function}	click	col被点击，会阻止事件冒泡到row
+	 * @example	 <uv-col  span="3" offset="3" > <view class="demo-layout bg-purple"></view> </uv-col>
+	 */
+	export default {
+		name: 'uv-col',
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				width: 0,
+				parentData: {
+					gutter: 0
+				},
+				gridNum: 12
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify
+				else return this.justify
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start'
+				if (this.align == 'bottom') return 'flex-end'
+				else return this.align
+			},
+			colStyle() {
+				const style = {
+					// 这里写成"padding: 0 10px"的形式是因为nvue的需要
+					paddingLeft: this.$uv.addUnit(this.$uv.getPx(this.parentData.gutter)/2),
+					paddingRight: this.$uv.addUnit(this.$uv.getPx(this.parentData.gutter)/2),
+					alignItems: this.uAlignItem,
+					justifyContent: this.uJustify,
+					textAlign: this.textAlign,
+					// #ifndef APP-NVUE
+					// 在非nvue上，使用百分比形式
+					flex: `0 0 ${100 / this.gridNum * this.span}%`,
+					marginLeft: 100 / 12 * this.offset + '%',
+					// #endif
+					// #ifdef APP-NVUE
+					// 在nvue上，由于无法使用百分比单位，这里需要获取父组件的宽度，再计算得出该有对应的百分比尺寸
+					width: this.$uv.addUnit(Math.floor(this.width / this.gridNum * Number(this.span))),
+					marginLeft: this.$uv.addUnit(Math.floor(this.width / this.gridNum * Number(this.offset))),
+					// #endif
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			async init() {
+				// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+				this.updateParentData()
+				this.width = await this.parent.getComponentWidth()
+			},
+			updateParentData() {
+				this.getParentData('uv-row')
+			},
+			clickHandler(e) {
+				this.$emit('click');
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.uv-col {
+		padding: 0;
+		/* #ifndef APP-NVUE */
+		box-sizing:border-box;
+		/* #endif */
+		/* #ifdef MP */
+		display: block;
+		/* #endif */
+	}
+
+	// nvue下百分比无效
+	/* #ifndef APP-NVUE */
+	.uv-col-0 {
+		width: 0;
+	}
+
+	.uv-col-1 {
+		width: calc(100%/12);
+	}
+
+	.uv-col-2 {
+		width: calc(100%/12 * 2);
+	}
+
+	.uv-col-3 {
+		width: calc(100%/12 * 3);
+	}
+
+	.uv-col-4 {
+		width: calc(100%/12 * 4);
+	}
+
+	.uv-col-5 {
+		width: calc(100%/12 * 5);
+	}
+
+	.uv-col-6 {
+		width: calc(100%/12 * 6);
+	}
+
+	.uv-col-7 {
+		width: calc(100%/12 * 7);
+	}
+
+	.uv-col-8 {
+		width: calc(100%/12 * 8);
+	}
+
+	.uv-col-9 {
+		width: calc(100%/12 * 9);
+	}
+
+	.uv-col-10 {
+		width: calc(100%/12 * 10);
+	}
+
+	.uv-col-11 {
+		width: calc(100%/12 * 11);
+	}
+
+	.uv-col-12 {
+		width: calc(100%/12 * 12);
+	}
+
+	/* #endif */
+</style>

package/components/uv-collapse/props.js

@@ -0,0 +1,20 @@
+export default {
+	props: {
+		// 当前展开面板的name，非手风琴模式：[<string | number>]，手风琴模式：string | number
+		value: {
+			type: [String, Number, Array, null],
+			default: null
+		},
+		// 是否手风琴模式
+		accordion: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示外边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		...uni.$uv?.props?.collapse
+	}
+}