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