From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 20 Oct 2023 15:21:35 +0800
Subject: [PATCH] fix:立行立改Uniapp小程序新建项目

---
 uni_modules/uview-ui/components/u-code-input/u-code-input.vue |  252 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 252 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-code-input/u-code-input.vue b/uni_modules/uview-ui/components/u-code-input/u-code-input.vue
new file mode 100644
index 0000000..96241cf
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-code-input/u-code-input.vue
@@ -0,0 +1,252 @@
+<template>
+	<view class="u-code-input">
+		<view
+			class="u-code-input__item"
+			:style="[itemStyle(index)]"
+			v-for="(item, index) in codeLength"
+			:key="index"
+		>
+			<view
+				class="u-code-input__item__dot"
+				v-if="dot && codeArray.length > index"
+			></view>
+			<text
+				v-else
+				:style="{
+					fontSize: $u.addUnit(fontSize),
+					fontWeight: bold ? 'bold' : 'normal',
+					color: color
+				}"
+			>{{codeArray[index]}}</text>
+			<view
+				class="u-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="u-code-input__item__cursor"></view>
+			<!-- #endif -->
+		</view>
+		<input
+			:disabled="disabledKeyboard"
+			type="number"
+			:focus="focus"
+			:value="inputValue"
+			:maxlength="maxlength"
+			:adjustPosition="adjustPosition"
+			class="u-code-input__input"
+			@input="inputHandler"
+			:style="{
+				height: $u.addUnit(size) 
+			}"
+			@focus="isFocus = true"
+			@blur="isFocus = false"
+		/>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * CodeInput ���������������
+	 * @description ���������������������������������������������������������������������������uView���������������������
+	 * @tutorial https://www.uviewui.com/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	<u-code-input v-model="value4" :focus="true"></u-code-input>
+	 */
+	export default {
+		name: 'u-code-input',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				inputValue: '',
+				isFocus: this.focus
+			}
+		},
+		watch: {
+			value: {
+				immediate: true,
+				handler(val) {
+					// ������������������������������������
+					this.inputValue = String(val).substring(0, this.maxlength)
+				}
+			},
+		},
+		computed: {
+			// ���������������������������������������������������������������������������������v-for
+			codeLength() {
+				return new Array(Number(this.maxlength))
+			},
+			// ������item���������
+			itemStyle() {
+				return index => {
+					const addUnit = uni.$u.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 (uni.$u.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 = uni.$u.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)
+				// ������������������������������������������������������
+				if (String(value).length >= Number(this.maxlength)) {
+					this.$emit('finish', value)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$u-code-input-cursor-width: 1px;
+	$u-code-input-cursor-height: 40%;
+	$u-code-input-cursor-animation-duration: 1s;
+	$u-code-input-cursor-animation-name: u-cursor-flicker;
+
+	.u-code-input {
+		@include flex;
+		position: relative;
+		overflow: hidden;
+
+		&__item {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			&__text {
+				font-size: 15px;
+				color: $u-content-color;
+			}
+
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 100px;
+				background-color: $u-content-color;
+			}
+
+			&__line {
+				position: absolute;
+				bottom: 0;
+				height: 4px;
+				border-radius: 100px;
+				width: 40px;
+				background-color: $u-content-color;
+			}
+			/* #ifndef APP-PLUS */
+			&__cursor {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%,-50%);
+				width: $u-code-input-cursor-width;
+				height: $u-code-input-cursor-height;
+				animation: $u-code-input-cursor-animation-duration u-cursor-flicker infinite;
+			}
+			/* #endif */
+			
+		}
+
+		&__input {
+			// ���������������input���������������������������������������������
+			// ������������������������������������������������������������������������������������������������������������������������
+			position: absolute;
+			left: -750rpx;
+			width: 1500rpx;
+			top: 0;
+			background-color: transparent;
+			text-align: left;
+		}
+	}
+	
+	/* #ifndef APP-PLUS */
+	@keyframes u-cursor-flicker {
+		0% {
+		    opacity: 0;
+		}
+		50% {
+		    opacity: 1;
+		}
+		100% {
+		    opacity: 0;
+		}
+	}
+	/* #endif */
+
+</style>

--
Gitblit v1.8.0