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