From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-code-input/u-code-input.vue | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 251 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..ea69177
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-code-input/u-code-input.vue
@@ -0,0 +1,251 @@
+<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"
+ 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 璇ョ粍浠朵竴鑸敤浜庨獙璇佺敤鎴风煭淇￠獙璇佺爜鐨勫満鏅紝涔熷彲浠ョ粨鍚坲View鐨勯敭鐩樼粍浠朵娇鐢�
+ * @tutorial https://www.uviewui.com/components/codeInput.html
+ * @property {String | Number} maxlength 鏈�澶ц緭鍏ラ暱搴� 锛堥粯璁� 6 锛�
+ * @property {Boolean} dot 鏄惁鐢ㄥ渾鐐瑰～鍏� 锛堥粯璁� false 锛�
+ * @property {String} mode 鏄剧ず妯″紡锛宐ox-鐩掑瓙妯″紡锛宭ine-搴曢儴妯嚎妯″紡 锛堥粯璁� '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 瀛椾綋澶у皬锛屽崟浣峱x 锛堥粯璁� 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 杈撳叆瀛楃涓暟杈緈axlength鍊兼椂瑙﹀彂锛岃涓婃柟璇存槑 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: {
+ // 鏍规嵁闀垮害锛屽惊鐜緭鍏ユ鐨勪釜鏁帮紝鍥犱负澶存潯灏忕▼搴忔暟鍊间笉鑳界敤浜巚-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('.', '')
+ })
+ }
+ // 鏈揪鍒癿axlength涔嬪墠锛屽彂閫乧hange浜嬩欢锛岃揪鍒板悗鍙戦�乫inish浜嬩欢
+ 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 {
+ // 涔嬫墍浠ラ渶瑕乮nput杈撳叆妗嗭紝鏄洜涓烘湁瀹冩墠鑳藉敜璧烽敭鐩�
+ // 杩欓噷灏嗗畠璁剧疆涓轰袱鍊嶇殑灞忓箷瀹藉害锛屽啀灏嗗乏杈圭殑涓�鍗婄Щ鍑哄睆骞曪紝涓轰簡涓嶈鐢ㄦ埛鐪嬪埌杈撳叆鐨勫唴瀹�
+ 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.9.3