uview-ultra-plus 1.0.0

package/uview-ultra/components/up-code-input/up-code-input.uvue

@@ -0,0 +1,321 @@
+<template>
+	<view class="up-code-input">
+		<view
+			class="up-code-input__item"
+			:style="[itemStyle(index)]"
+			v-for="(item, index) in codeLength"
+			:key="index"
+		>
+			<view
+				class="up-code-input__item__dot"
+				v-if="dot && codeArray.length > index"
+			></view>
+			<text
+				v-else
+				:style="{
+					fontSize: $upAddUnit(fontSize),
+					fontWeight: bold ? 'bold' : 'normal',
+					color: color
+				}"
+			>{{codeArray[index]}}</text>
+			<view
+				class="up-code-input__item__line"
+				v-if="mode == 'line'"
+				:style="[lineStyle]"
+			></view>
+			<!-- #ifndef APP-NVUE -->
+			<view v-if="isFocus && codeArray.length === index"
+				:style="{backgroundColor: color}" class="up-code-input__item__cursor"></view>
+			<!-- #endif -->
+		</view>
+		<input
+			:disabled="disabledKeyboard"
+			type="number"
+			:focus="focus"
+			:value="inputValue"
+			:maxlength="maxlength"
+			:adjustPosition="adjustPosition"
+			class="up-code-input__input"
+			@input="inputHandler"
+			:style="{
+				height: $upAddUnit(size)
+			}"
+			@focus="isFocus = true"
+			@blur="isFocus = false"
+		/>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue'
+	import { ref, computed, watch, nextTick } from 'vue'
+	import defProps from './codeInput.uts'
+	import { addUnit, getPx } from '../../libs/function/index';
+	
+	// props
+	const props = defineProps({
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+            default: defProps.getBoolean('codeInput.adjustPosition')
+		},
+        // 最大输入长度
+        maxlength: {
+            type: [String, Number],
+            default: defProps.getNumber('codeInput.maxlength')
+        },
+        // 是否用圆点填充
+        dot: {
+            type: Boolean,
+            default: defProps.getBoolean('codeInput.dot')
+        },
+        // 显示模式，box-盒子模式，line-底部横线模式
+        mode: {
+            type: String,
+            default: defProps.getString('codeInput.mode')
+        },
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: defProps.getBoolean('codeInput.hairline')
+        },
+        // 字符间的距离
+        space: {
+            type: [String, Number],
+            default: defProps.getNumber('codeInput.space')
+        },
+		// 预置值
+		modelValue: {
+			type: [String, Number],
+			default: defProps.getString('codeInput.value')
+		},
+        // 是否自动获取焦点
+        focus: {
+            type: Boolean,
+            default: defProps.getBoolean('codeInput.focus')
+        },
+        // 字体是否加粗
+        bold: {
+            type: Boolean,
+            default: defProps.getBoolean('codeInput.bold')
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: defProps.getString('codeInput.color')
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: defProps.getNumber('codeInput.fontSize')
+        },
+        // 输入框的大小，宽等于高
+        size: {
+            type: [String, Number],
+            default: defProps.getNumber('codeInput.size')
+        },
+        // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+        disabledKeyboard: {
+            type: Boolean,
+            default: defProps.getBoolean('codeInput.disabledKeyboard')
+        },
+        // 边框和线条颜色
+        borderColor: {
+            type: String,
+            default: defProps.getString('codeInput.borderColor')
+        },
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: Boolean,
+			default: defProps.getBoolean('codeInput.disabledDot')
+		}
+	})
+	
+	// 定义事件
+	const emit = defineEmits(['change', 'finish', 'update:modelValue'])
+	
+	// 响应式数据
+	const inputValue = ref('')
+	const isFocus = ref(false)
+	const timer = ref(null)
+	const opacity = ref(1)
+	
+	// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+	const codeLength = computed(() => {
+		let list: Array<string> = []
+		// @ts-ignore
+		for (var index = 0; index < (props.maxlength as number); index++) {
+			list.push('')
+		}
+		return list
+	})
+	
+	// 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+	const codeArray = computed(() => {
+		let codes =  props.modelValue.toString().split('')
+		while (codes.length < codeLength.value.length) {
+		  codes.push('') // 用空字符串补齐
+		}
+		return codes
+	})
+	
+	// 下划线模式下，横线的样式
+	const lineStyle = computed(() => {
+		const style = {}
+		style['height'] = props.hairline ? '2px' : '4px'
+		style['width'] = addUnit(props.size)
+		// 线条模式下，背景色即为边框颜色
+		style['backgroundColor'] = props.borderColor
+		return style
+	})
+	
+	// 监听输入框的值发生变化
+	const inputHandler = (e: UniInputEvent) => {
+		const value = e.detail.value
+		inputValue.value = value
+		// 是否允许输入"."符号
+		if(props.disabledDot) {
+			nextTick(() => {
+				inputValue.value = value.replace('.', '')
+			})
+		}
+		// 未达到maxlength之前，发送change事件，达到后发送finish事件
+		emit('change', value)
+		// 修改通过v-model双向绑定的值
+        emit("update:modelValue", value);
+		// 达到用户指定输入长度时，发出完成事件
+		if (value.length >= (props.maxlength as number)) {
+			emit('finish', value)
+		}
+	}
+	
+	// 根据索引获取对应项的样式
+	const itemStyle = (index: number): any => {
+		const style = {
+			width: addUnit(props.size),
+			height: addUnit(props.size)
+		}
+		// 盒子模式下，需要额外进行处理
+		if (props.mode == 'box') {
+			// 设置盒子的边框，如果是细边框，则设置为0.5px宽度
+			style['border'] = `${props.hairline ? 0.5 : 1}px solid ${props.borderColor}`
+			// 如果盒子间距为0的话
+			if (getPx(props.space) == '0') {
+				// 给第一和最后一个盒子设置圆角
+				if (index == 0) {
+					style['borderTopLeftRadius'] = '3px'
+					style['borderBottomLeftRadius'] = '3px'
+				}
+				if (index == codeLength.value.length - 1) {
+					style['borderTopRightRadius'] = '3px'
+					style['borderBottomRightRadius'] = '3px'
+				}
+				// 最后一个盒子的右边框需要保留
+				if (index != codeLength.value.length - 1) {
+					style['borderRight'] = 'none'
+				}
+			}
+		}
+		if (index != codeLength.value.length - 1) {
+			// 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+			style['marginRight'] = addUnit(props.space)
+		} else {
+			// 最后一个盒子的有边框需要保留
+			style['marginRight'] = '0px'
+		}
+
+		return style
+	}
+	
+	// 初始化焦点状态
+	isFocus.value = props.focus
+	
+	watch(
+		(): string|number => props.modelValue,
+		(val: string|number) => {
+			// 转为字符串，超出部分截掉
+			inputValue.value = (val.toString()).substring(0, props.maxlength as number)
+		}, 
+		{immediate: true}
+	)
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-code-input-cursor-width: 1px;
+	$up-code-input-cursor-height: 20px;
+	$up-code-input-cursor-animation-duration: 1s;
+	$up-code-input-cursor-animation-name: up-cursor-flicker;
+
+	.up-code-input {
+		@include flex;
+		position: relative;
+		overflow: hidden;
+
+		&__item {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			&__text {
+				font-size: 15px;
+				color: $up-content-color;
+			}
+
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 100px;
+				background-color: $up-content-color;
+			}
+
+			&__line {
+				position: absolute;
+				bottom: 0;
+				height: 4px;
+				border-radius: 100px;
+				width: 40px;
+				background-color: $up-content-color;
+			}
+			&__cursor {
+				position: absolute;
+				/* #ifndef APP-NVUE */
+				top: 50%;
+				left: 50%;
+				opacity: 1;
+				transform: translate(-50%,-50%);
+				/* #endif */
+				width: $up-code-input-cursor-width;
+				height: $up-code-input-cursor-height;
+				// todo wait uni-app-x
+				// animation: $up-code-input-cursor-animation-duration up-cursor-flicker infinite;
+			}
+		}
+
+		&__input {
+			// 之所以需要input输入框，是因为有它才能唤起键盘
+			// 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
+			position: absolute;
+			left: -750rpx;
+			width: 1500rpx;
+			top: 0;
+			background-color: transparent;
+			text-align: left;
+		}
+	}
+	
+	/* #ifndef APP-NVUE */
+	// @keyframes up-cursor-flicker {
+	// 	0% {
+	// 	    opacity: 0;
+	// 	}
+	// 	50% {
+	// 	    opacity: 1;
+	// 	}
+	// 	100% {
+	// 	    opacity: 0;
+	// 	}
+	// }
+	/* #endif */
+</style>

package/uview-ultra/components/up-code-input/up-code-input.vue

@@ -0,0 +1,300 @@
+<template>
+	<view class="up-code-input">
+		<view
+			class="up-code-input__item"
+			:style="[itemStyle(index)]"
+			v-for="(item, index) in codeLength"
+			:key="index"
+		>
+			<view
+				class="up-code-input__item__dot"
+				v-if="dot && codeArray.length > index"
+			></view>
+			<text
+				v-else
+				:style="{
+					fontSize: addUnit(fontSize),
+					fontWeight: bold ? 'bold' : 'normal',
+					color: color
+				}"
+			>{{codeArray[index]}}</text>
+			<view
+				class="up-code-input__item__line"
+				v-if="mode === 'line'"
+				:style="[lineStyle]"
+			></view>
+			<!-- #ifndef APP-NVUE -->
+			<view v-if="isFocus && codeArray.length === index"
+				:style="{backgroundColor: color}" class="up-code-input__item__cursor"></view>
+			<!-- #endif -->
+			<!-- #ifdef APP-NVUE -->
+			 <view v-if="isFocus && codeArray.length === index"
+			 :style="{backgroundColor: color, opacity: opacity}" class="up-code-input__item__cursor"></view>
+			<!-- #endif -->
+		</view>
+		<input
+			:disabled="disabledKeyboard"
+			type="number"
+			:focus="focus"
+			:value="inputValue"
+			:maxlength="maxlength"
+			:adjustPosition="adjustPosition"
+			class="up-code-input__input"
+			@input="inputHandler"
+			:style="{
+				height: addUnit(size)
+			}"
+			@focus="isFocus = true"
+			@blur="isFocus = false"
+		/>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addUnit, getPx } from '../../libs/function/index.js';
+	/**
+	 * CodeInput 验证码输入
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uview-plus的键盘组件使用
+	 * @tutorial https://ijry.github.io/uview-plus/components/codeInput.html
+	 * @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 {String | Number}	value				预置值
+	 * @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	<up-code-input v-model="value4" :focus="true"></up-code-input>
+	 */
+	export default {
+		name: 'up-code-input',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				inputValue: '',
+				isFocus: this.focus,
+				timer: null,
+				opacity: 1
+			}
+		},
+		watch: {
+			// #ifdef VUE2
+			value: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串，超出部分截掉
+					this.inputValue = String(val).substring(0, this.maxlength)
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串，超出部分截掉
+					this.inputValue = String(val).substring(0, this.maxlength)
+				}
+			},
+			// #endif
+			isFocus: {
+				handler(val) {
+					// #ifdef APP-NVUE
+					if (val) {
+						this.timer = setInterval(() => {
+							this.opacity = Math.abs(this.opacity - 1)
+						}, 600)
+					} else {
+						clearInterval(this.timer)
+					}
+					// #endif
+				}
+			}
+		},
+		created() {
+			
+		},
+		beforeUnmount() {
+			// #ifdef APP-NVUE
+			clearInterval(this.timer)
+			// #endif
+		},
+		computed: {
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			codeLength() {
+				return new Array(Number(this.maxlength))
+			},
+			// 循环item的样式
+			itemStyle() {
+				return index => {
+					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 (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 ? '2px' : '4px'
+				style.width = addUnit(this.size)
+				// 线条模式下，背景色即为边框颜色
+				style.backgroundColor = this.borderColor
+				return style
+			}
+		},
+		emits: ["change", 'finish', "update:modelValue"],
+		methods: {
+			addUnit,
+			// 监听输入框的值发生变化
+			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双向绑定的值
+				// #ifdef VUE3
+                this.$emit("update:modelValue", value);
+                // #endif
+                // #ifdef VUE2
+                this.$emit("input", value);
+                // #endif
+				// 达到用户指定输入长度时，发出完成事件
+				if (String(value).length >= Number(this.maxlength)) {
+					this.$emit('finish', value)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-code-input-cursor-width: 1px;
+	$up-code-input-cursor-height: 20px;
+	$up-code-input-cursor-animation-duration: 1s;
+	$up-code-input-cursor-animation-name: up-cursor-flicker;
+
+	.up-code-input {
+		@include flex;
+		position: relative;
+		overflow: hidden;
+
+		&__item {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			&__text {
+				font-size: 15px;
+				color: $up-content-color;
+			}
+
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 100px;
+				background-color: $up-content-color;
+			}
+
+			&__line {
+				position: absolute;
+				bottom: 0;
+				height: 4px;
+				border-radius: 100px;
+				width: 40px;
+				background-color: $up-content-color;
+			}
+			&__cursor {
+				position: absolute;
+				/* #ifndef APP-NVUE */
+				top: 50%;
+				left: 50%;
+				opacity: 1;
+				transform: translate(-50%,-50%);
+				/* #endif */
+				width: $up-code-input-cursor-width;
+				height: $up-code-input-cursor-height;
+				animation: $up-code-input-cursor-animation-duration up-cursor-flicker infinite;
+			}
+		}
+
+		&__input {
+			// 之所以需要input输入框，是因为有它才能唤起键盘
+			// 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
+			position: absolute;
+			left: -750rpx;
+			width: 1500rpx;
+			top: 0;
+			background-color: transparent;
+			text-align: left;
+		}
+	}
+	
+	/* #ifndef APP-NVUE */
+	@keyframes up-cursor-flicker {
+		0% {
+		    opacity: 0;
+		}
+		50% {
+		    opacity: 1;
+		}
+		100% {
+		    opacity: 0;
+		}
+	}
+	/* #endif */
+
+</style>

package/uview-ultra/components/up-col/col.js

@@ -0,0 +1,19 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/col.js
+ */
+export default {
+    // col 组件
+    col: {
+        span: 12,
+        offset: 0,
+        justify: 'start',
+        align: 'stretch',
+        textAlign: 'left'
+    }
+}

package/uview-ultra/components/up-col/col.uts

@@ -0,0 +1,19 @@
+/*
+ * @Author       : jry,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/col.js
+ */
+export default {
+    // col 组件
+    col: {
+        span: 12,
+        offset: 0,
+        justify: 'start',
+        align: 'stretch',
+        textAlign: 'left'
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-col/props.js

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