更新

uni_modules/xt-verify-code/changelog.md

@@ -0,0 +1,46 @@
+## 1.3.1（2023-06-08）
+- 修改验证码过小 出现两个光标的问题
+## 1.3.0（2023-05-20）
+- 增加自定义输入文字的颜色
+## 1.2.6（2023-05-17）
+- 光标增加层级
+## 1.2.5（2023-05-14）
+- 处理多次触犯confirm 问题
+## 1.2.4（2023-05-07）
+- 兼容vue3 h5打包后运行找到createSelectorQuery 函数的问题
+## 1.2.3（2023-04-25）
+- 双向绑定v-model 写法兼容性
+## 1.2.2（2023-03-31）
+- 抽离公共代码，部分优化
+## 1.2.1（2023-03-19）
+- 处理vue2情况下，出现引入vue3api bug
+## 1.2.0（2023-03-19）
+- 增加vue3 环境
+## 1.1.6（2023-01-01）
+- scss样式修改成css
+- size 去除 数量限制，限制只能输入正整数
+## 1.1.5（2022-12-08）
+- 修复支付宝小程序，因input组件遮蔽的问题。显示样式不一致问题
+## 1.1.4（2022-12-02）
+- 修复密码形式ios手机失去焦点后再聚焦，不能删除的问题
+## 1.1.3（2022-12-02）
+- 撤销对ios手机的特殊处理
+## 1.1.2（2022-11-13）
+- 处理ios问题，添加ios机型判断
+## 1.1.1（2022-10-11）
+- 优化对ios的input组件bug的处理
+## 1.1.0（2022-10-11）
+- 修复ios环境下input组件，失去焦点后再次输入会自动清空bug
+## 1.0.4（2021-12-27）
+## 修改文档
+## 1.0.3（2021-10-18）
+修改说明文档
+## 1.0.2（2021-10-18）
+修改size 传入值，可以传入1~6 的值
+
+## 1.0.1（2021-09-02）
+- type 属性参数修改 box、middle、bottom 三种
+- 新增middle模式
+## 1.0.0（2021-08-31）
+- 验证码输入
+- 提供两种显示模式

uni_modules/xt-verify-code/components/xt-verify-code/config.js

@@ -0,0 +1,51 @@
+export const propsMap = {
+	// #ifdef VUE2
+	value: {
+		type: String,
+		default: () => ''
+	},
+	// #endif
+	
+	// #ifdef VUE3
+	modelValue: {
+		type: String,
+		default: () => ''
+	},
+	// #endif
+	type: {
+		type: String,
+		default: () => 'box'
+	},
+	inputType: {
+		type: String,
+		default: () => 'number'
+	},
+	size: {
+		type: Number,
+		default: () => 6
+	},
+	isFocus: {
+		type: Boolean,
+		default: () => true
+	},
+	isPassword: {
+		type: Boolean,
+		default: () => false
+	},
+	cursorColor: {
+		type: String,
+		default: () => '#cccccc'
+	},
+	boxNormalColor: {
+		type: String,
+		default: () => '#cccccc'
+	},
+	boxActiveColor: {
+		type: String,
+		default: () => '#000000'
+	},
+	color: {
+		type: String,
+		default: () => '#333333'
+	}
+}

uni_modules/xt-verify-code/components/xt-verify-code/util.js

@@ -0,0 +1,35 @@
+/**
+ * @description 获取元素节点 - 大小等信息
+ * @param {string} elm - 节点的id、class 相当于 document.querySelect的参数 -eg: #id
+ * @param {string} type = [single|array] - 单个元素获取多个元素 默认是单个元素
+ * @param {Function} callback - 回调函数
+ * @param {object} that - 上下文环境 vue2：this ,vue3: getCurrentInstance();
+ */
+export const getElementRect = (that) => (elm, type = 'single', callback) => {
+
+	// #ifndef H5
+	uni
+		.createSelectorQuery()
+		.in(that)[type === 'array' ? 'selectAll' : 'select'](elm)
+		.boundingClientRect()
+		.exec(data => {
+			callback(data[0]);
+		});
+	// #endif
+
+	// #ifdef H5
+	let elmArr = [];
+	const result = [];
+	if (type === 'array') {
+		elmArr = document.querySelectorAll(elm);
+	} else {
+		elmArr.push(document.querySelector(elm));
+	}
+
+	for (let elm of elmArr) {
+		result.push(elm.getBoundingClientRect());
+	}
+	console.log('result', result)
+	callback(type === 'array' ? result : result[0]);
+	// #endif
+}

uni_modules/xt-verify-code/components/xt-verify-code/xt-verify-code.vue

@@ -0,0 +1,408 @@
+<template>
+	<!-- #ifdef VUE2 -->
+	<view class="xt__verify-code">
+		<!-- 输入框 -->
+		<input id="xt__input" :value="code" class="xt__input" :focus="isFocus" :type="inputType" :maxlength="itemSize" @input="onInput" @focus="inputFocus" @blur="inputBlur" />
+
+		<!-- 光标 -->
+		<view
+			id="xt__cursor"
+			v-if="cursorVisible && type !== 'middle'"
+			class="xt__cursor"
+			:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: cursorColor }"
+		></view>
+
+		<!-- 输入框 - 组 -->
+		<view id="xt__input-ground" class="xt__input-ground">
+			<view
+				v-for="(item, index) in itemSize"
+				:key="index"
+				:style="{ borderColor: code.length === index && cursorVisible ? boxActiveColor : boxNormalColor }"
+				:class="['xt__box', `xt__box-${type + ''}`, `xt__box::after`]"
+			>
+				<view :style="{ borderColor: boxActiveColor }" class="xt__middle-line" v-if="type === 'middle' && !code[index]"></view>
+
+				<text :style="{ color: color }" class="xt__code-text">{{ code[index] | codeFormat(isPassword) }}</text>
+			</view>
+		</view>
+	</view>
+	<!-- #endif -->
+
+	<!-- #ifdef VUE3 -->
+	<view class="xt__verify-code">
+		<!-- 输入框 -->
+		<input
+			id="xt__input"
+			:value="code"
+			class="xt__input"
+			:focus="props.isFocus"
+			:type="props.inputType"
+			:maxlength="itemSize"
+			@input="onInput"
+			@focus="inputFocus"
+			@blur="inputBlur"
+		/>
+
+		<!-- 光标 -->
+		<view
+			id="xt__cursor"
+			v-if="cursorVisible && props.type !== 'middle'"
+			class="xt__cursor"
+			:style="{ left: codeCursorLeft[code.length] + 'px', height: cursorHeight + 'px', backgroundColor: props.cursorColor }"
+		></view>
+
+		<!-- 输入框 - 组 -->
+		<view id="xt__input-ground" class="xt__input-ground">
+			<view
+				v-for="(item, index) in itemSize"
+				:key="index"
+				:style="{ borderColor: code.length === index && cursorVisible ? props.boxActiveColor : props.boxNormalColor }"
+				:class="['xt__box', `xt__box-${props.type + ''}`, `xt__box::after`]"
+			>
+				<view :style="{ borderColor: props.boxActiveColor }" class="xt__middle-line" v-if="props.type === 'middle' && !code[index]"></view>
+				<text :style="{ color: props.color }" class="xt__code-text">{{ codeFormat(code[index], props.isPassword) }}</text>
+			</view>
+		</view>
+	</view>
+	<!-- #endif -->
+</template>
+
+<!-- #ifdef VUE3 -->
+<script setup>
+/**
+ * @description 输入验证码组件
+ * @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom
+ * @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number
+ * @property {number} size - 验证码输入框数量 默认：6 -eg:6
+ * @property {boolean} isFocus - 是否立即聚焦 默认：true
+ * @property {boolean} isPassword - 是否以密码形式显示 默认false -eg: false
+ * @property {string} cursorColor - 光标颜色 默认：#cccccc
+ * @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc
+ * @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000
+ * @property {string} color - 光标聚焦到的框的颜色 默认：#333333
+ * @event {Function(data)} confirm - 输入完成回调函数
+ */
+import { defineProps, onMounted, ref, getCurrentInstance, watch } from 'vue';
+import { propsMap } from './config.js';
+import { getElementRect } from './util.js';
+
+const props = defineProps(propsMap);
+const emits = defineEmits(['update:modelValue', 'confirm']);
+
+// 获取当前组件的实例
+const currentInstance = getCurrentInstance();
+
+const getElement = getElementRect(currentInstance);
+
+const cursorVisible = ref(false);
+const cursorHeight = ref(35);
+const code = ref(''); // 输入的验证码
+const codeCursorLeft = ref([]); // 向左移动的距离数组,
+const itemSize = ref(6);
+const isPatch = ref(false);
+
+/**
+ * 设置验证码框数量
+ */
+function validatorSize() {
+	if (props.size > 0) {
+		itemSize.value = Math.floor(props.size);
+	} else {
+		throw "methods of 'size' is integer";
+	}
+}
+/**
+ * @description 初始化
+ */
+function init() {
+	getCodeCursorLeft();
+	setCursorHeight();
+}
+
+/**
+ * @description 计算光标的高度
+ */
+function setCursorHeight() {
+	getElement('.xt__box', 'single', boxElm => {
+		cursorHeight.value = boxElm.height * 0.6;
+	});
+}
+/**
+ * @description 获取光标在每一个box的left位置
+ */
+function getCodeCursorLeft() {
+	// 获取父级框的位置信息
+	getElement('#xt__input-ground', 'single', parentElm => {
+		const parentLeft = parentElm.left;
+		// 获取各个box信息
+		getElement('.xt__box', 'array', elms => {
+			codeCursorLeft.value = [];
+			elms.forEach(elm => {
+				codeCursorLeft.value.push(elm.left - parentLeft + elm.width / 2);
+			});
+		});
+	});
+}
+
+// 输入框输入变化的回调
+function onInput(e) {
+	let { value, keyCode } = e.detail;
+	cursorVisible.value = value.length < itemSize.value;
+	code.value = value;
+	emits('update:modelValue', value);
+	inputSuccess(value);
+}
+
+// 输入完成回调
+function inputSuccess(value) {
+	if (value.length === itemSize.value && !isPatch.value) {
+		isPatch.value = true;
+		emits('confirm', value);
+	} else {
+		isPatch.value = false;
+	}
+}
+// 输入聚焦
+function inputFocus() {
+	cursorVisible.value = code.value.length < itemSize.value;
+}
+// 输入失去焦点
+function inputBlur() {
+	cursorVisible.value = false;
+}
+
+// 判断文本如何显示
+function codeFormat(val, isPassword) {
+	return val ? (isPassword ? '*' : val) : '';
+}
+
+onMounted(() => {
+	cursorVisible.value = props.isFocus;
+	validatorSize();
+	init();
+});
+
+watch(
+	() => props.modelValue,
+	val => {
+		if (val !== code.value) {
+			code.value = val;
+		}
+	}
+);
+</script>
+<!-- #endif -->
+
+<!-- #ifdef VUE2 -->
+<script>
+/**
+ * @description 输入验证码组件
+ * @property {string} type = [box|middle|bottom] - 显示类型 默认：box -eg:bottom
+ * @property {string} inputType = [text|number] - 输入框类型 默认：number -eg:number
+ * @property {number} size - 验证码输入框数量 默认：6 -eg:6
+ * @property {boolean} isFocus - 是否立即聚焦 默认：true
+ * @property {boolean} isPassword - 是否以密码形式显示 默认false -eg: false
+ * @property {string} cursorColor - 光标颜色 默认：#cccccc
+ * @property {string} boxNormalColor - 光标未聚焦到的框的颜色 默认：#cccccc
+ * @property {string} boxActiveColor - 光标聚焦到的框的颜色 默认：#000000
+ * @property {string} color - 光标聚焦到的框的颜色 默认：#333333
+ * @event {Function(data)} confirm - 输入完成回调函数
+ */
+import { propsMap } from './config.js';
+import { getElementRect } from './util.js';
+export default {
+	name: 'xt-verify-code',
+	props: propsMap,
+	model: {
+		prop: 'value',
+		event: 'input'
+	},
+	data() {
+		return {
+			cursorVisible: false,
+			cursorHeight: 35,
+			code: '', // 输入的验证码
+			codeCursorLeft: [], // 向左移动的距离数组,
+			itemSize: 6,
+			getElement: getElementRect(this),
+			isPatch: false
+		};
+	},
+	created() {
+		this.cursorVisible = this.isFocus;
+		this.validatorSize();
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		/**
+		 * 设置验证码框数量
+		 */
+		validatorSize() {
+			if (this.size > 0) {
+				this.itemSize = Math.floor(this.size);
+			} else {
+				throw "methods of 'size' is integer";
+			}
+		},
+		/**
+		 * @description 初始化
+		 */
+		init() {
+			this.getCodeCursorLeft();
+			this.setCursorHeight();
+		},
+		/**
+		 * @description 计算光标的高度
+		 */
+		setCursorHeight() {
+			this.getElement('.xt__box', 'single', boxElm => {
+				this.cursorHeight = boxElm.height * 0.6;
+			});
+		},
+		/**
+		 * @description 获取光标在每一个box的left位置
+		 */
+		getCodeCursorLeft() {
+			// 获取父级框的位置信息
+			this.getElement('#xt__input-ground', 'single', parentElm => {
+				const parentLeft = parentElm.left;
+				// 获取各个box信息
+				this.getElement('.xt__box', 'array', elms => {
+					this.codeCursorLeft = [];
+					elms.forEach(elm => {
+						this.codeCursorLeft.push(elm.left - parentLeft + elm.width / 2);
+					});
+				});
+			});
+		},
+
+		// 输入框输入变化的回调
+		onInput(e) {
+			let { value, keyCode } = e.detail;
+			this.cursorVisible = value.length < this.itemSize;
+			this.code = value;
+			this.$emit('input', value);
+			this.inputSuccess(value);
+		},
+
+		// 输入完成回调
+		inputSuccess(value) {
+			if (value.length === this.itemSize && !this.isPatch) {
+				this.$emit('confirm', value);
+			} else {
+				this.isPatch = false;
+			}
+		},
+		// 输入聚焦
+		inputFocus() {
+			this.cursorVisible = this.code.length < this.itemSize;
+		},
+		// 输入失去焦点
+		inputBlur() {
+			this.cursorVisible = false;
+		}
+	},
+	watch: {
+		value(val) {
+			if (val !== this.code) {
+				this.code = val;
+			}
+		}
+	},
+	filters: {
+		codeFormat(val, isPassword) {
+			return val ? (isPassword ? '*' : val) : '';
+		}
+	}
+};
+</script>
+<!-- #endif -->
+
+<style >
+.xt__verify-code {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.xt__verify-code .xt__input {
+	height: 100%;
+	width: 200vw;
+	position: absolute;
+	left: -100vw;
+	z-index: 1;
+	color: transparent;
+	caret-color: transparent;
+	background-color: rgba(0, 0, 0, 0);
+}
+.xt__verify-code .xt__cursor {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	display: inline-block;
+	width: 2px;
+	animation-name: xt__cursor;
+	animation-duration: 0.8s;
+	animation-iteration-count: infinite;
+	z-index: 1;
+}
+
+.xt__verify-code .xt__input-ground {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.xt__verify-code .xt__input-ground .xt__box {
+	position: relative;
+	display: inline-block;
+	width: 100rpx;
+	height: 140rpx;
+}
+
+.xt__verify-code .xt__input-ground .xt__box-bottom {
+	border-bottom-width: 2px;
+	border-bottom-style: solid;
+}
+
+.xt__verify-code .xt__input-ground .xt__box-box {
+	border-width: 2px;
+	border-style: solid;
+}
+
+.xt__verify-code .xt__input-ground .xt__box-middle {
+	border: none;
+}
+
+.xt__input-ground .xt__box .xt__middle-line {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 50%;
+	transform: translate(-50%, -50%);
+	border-bottom-width: 2px;
+	border-bottom-style: solid;
+}
+
+.xt__input-ground .xt__box .xt__code-text {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	font-size: 80rpx;
+	transform: translate(-50%, -50%);
+}
+
+@keyframes xt__cursor {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+</style>

uni_modules/xt-verify-code/package.json

@@ -0,0 +1,79 @@
+{
+	"id": "xt-verify-code",
+	"displayName": "xt-verify-code验证码输入",
+	"version": "1.3.1",
+	"description": "xt-verify-code验证码输入组件，提供三种显示模式",
+	"keywords": [
+        "xt-verify-code",
+        "verify",
+        "验证码"
+    ],
+	"repository": "https://github.com/xiaodaweb/xt-ui/tree/main/uni_modules/xt-verify-code",
+	"engines": {
+		"HBuilderX": "^3.1.0"
+	},
+    "dcloudext": {
+        "sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": "1010161292"
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+        "npmurl": "",
+        "type": "component-vue"
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y"
+				},
+				"快应用": {
+					"华为": "y",
+					"联盟": "y"
+				}
+			}
+		}
+	}
+}

uni_modules/xt-verify-code/readme.md

@@ -0,0 +1,20 @@
+# 验证码输入框
+## 使用方法
+```vue
+<xt-verify-code v-model="verifyCode" @confirm="confirm"></xt-verify-code>
+```
+
+## 参数
+|属性						|类型		|说明																								|默认值	|
+|--							|--			|--																									|--			|
+|value(v-model)	|string	|值(可双向绑定)																			|''			|
+|type						|string	|验证输入框类型可选值: box、middle、bottom					|box		|
+|inputType			|string	|输入类型 可选值：text、number											|number	|
+|size						|number	|验证码框数量																				|6			|
+|isFocus				|boolean|是否一开始聚焦																			|true		|
+|isPassword			|boolean|是否使用密码方式显示																|false	|
+|cursorColor		|string	|光标颜色																						|#cccccc|
+|boxNormalColor	|string	|显示框未选中的颜色																	|#cccccc|
+|boxActiveColor	|string	|显示框选中的颜色如果type='middle' 则是线的默认样式	|#000000|
+|color					|string	|输入文字的颜色																			|#333333|
+|@confirm				|event	|输入完成的回调事件  {(code)=>{}}										|				|