From a7b6c051c9ee8960409380bed90d03c1fcc2d527 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期日, 01 十月 2023 01:28:51 +0800
Subject: [PATCH] #

---
 components/z-input/z-input.vue |   47 ++++++++++++++++-------
 pages/component/demo.vue       |   39 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/components/z-input/z-input.vue b/components/z-input/z-input.vue
index 8267ab4..d87d95a 100644
--- a/components/z-input/z-input.vue
+++ b/components/z-input/z-input.vue
@@ -3,11 +3,13 @@
 		<view class="main">
 			<view class="inner1">{{desc}}</view>
 			<view class="put inner2">
-				<input class="p-input" type="text" :placeholder="placeholder" @input="input" v-model="data">
-				<uni-icons class="p-icon" type="closeempty" size="16" color="#707070" v-show="data.length" @click="clear"></uni-icons>
+				<input class="p-input" type="text" :placeholder="placeholder" v-model="data" :focus="focusData">
+				<uni-icons class="p-icon" type="closeempty" size="16" color="#707070" 
+					v-show="data.length" @click="clear">
+				</uni-icons>
 			</view>
 			<view class="inner3" v-show="btn">
-				<button class="m-btn" size="mini">{{btnName}}</button>
+				<button class="m-btn" size="mini" @click="clickBtn">{{btnName}}</button>
 			</view>
 		</view>
 	</view>
@@ -19,6 +21,7 @@
 		data() {
 			return {
 				data:'',
+				focusData: false
 			};
 		},
 		props: {
@@ -39,35 +42,51 @@
 				default: '璇疯緭鍏�'
 			},
 			value: {
-				type: String,
+				type: [String,Number],
 				default: ''
 			},
 			lenCheck: {
 				type: [Number],
 				default: null
 			},
+			focus: {
+				type: Boolean,
+				default: false
+			}
 		},
 		watch: {
 			data(val) {
-				if (this.data.length != this.lenCheck) {
-					console.log(123);
-					this.data = val
+				if (!this.lenCheck) {
+					this.$emit('input',val)
+					return
 				}
-				this.$emit('input',val)
+				if (val.length != this.lenCheck) {
+					setTimeout(()=>{
+						this.data = ''
+						this.$emit('input','')
+					},10)
+				} else {
+					this.$emit('input',val)
+				}
 			},
-			value(val) {
-				this.data = val
-			},
+			focus(f) {
+				console.log(f);
+				this.focusData = !f
+				setTimeout(()=>{
+					this.focusData = f
+				},10)
+			}
 		},
 		created() {
 			this.data = this.value
+			this.focusData = this.focus
 		},
 		methods: {
-			input() {
-				
-			},
 			clear() {
 				this.data = ''
+			},
+			clickBtn() {
+				this.$emit('clickBtn');
 			}
 		}
 	}
diff --git a/pages/component/demo.vue b/pages/component/demo.vue
index ae8e039..a1c1252 100644
--- a/pages/component/demo.vue
+++ b/pages/component/demo.vue
@@ -1,10 +1,16 @@
 <template>
 	<view>
-		<z-input v-for="it in zInputList" :desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val" :lenCheck="it.lenCheck"></z-input>
+		<z-input v-for="it in zInputList" 
+			:desc="it.desc" :btn="it.btn" :btn-name="it.btnName" v-model="it.val" 
+			:lenCheck="it.lenCheck" :focus="it.focus" @clickBtn='entry(it.name)'>
+		</z-input>
 		<view>杈撳叆妗�1</view>
 		<view>{{zInputList[0].val}}</view>
 		<view>杈撳叆妗�2</view>
 		<view>{{zInputList[1].val}}</view>
+		<view>杈撳叆妗�2</view>
+		<view>{{zInputList[2].val}}</view>
+		<button @click="focus">focus</button>
 	</view>
 </template>
 
@@ -13,12 +19,39 @@
 		data() {
 			return {
 				zInputList: [ 
-					{name: 'yyy',desc: '鎵樼洏鐮�',val: '2',lenCheck: 8},
-					{name: 'yyy',desc: '鐗╂枡鐮�',btn: true,btnName: '鎻愬彇',placeholder: '',val: '1'}
+					{name: 'ccc',desc: '璁㈠崟鍙�',btn: true,btnName: '闃挎柉椤�',val: 'orderNo',focus: true},
+					{name: 'yyy',desc: '鎵樼洏鐮�',val: '2',lenCheck: 8,focus: false},
+					{name: 'aaa',desc: '鐗╂枡鐮�',btn: true,btnName: '鎻愬彇',placeholder: '',val: '1',focus: false}
 				],
 				
 			}
+		},
+		methods: {
+			entry(e) {
+			},
+			ccc() {
+			},
+			aaa() {
+				
+			},
+			focus() {
+				if (this.zInputList[0].focus) {
+					this.zInputList[0].focus = false
+					this.zInputList[1].focus = true
+					this.zInputList[2].focus = false
+				} else if (this.zInputList[1].focus){
+					this.zInputList[0].focus = false
+					this.zInputList[1].focus = false
+					this.zInputList[2].focus = true
+				} else {
+					this.zInputList[0].focus = true
+					this.zInputList[1].focus = false
+					this.zInputList[2].focus = false
+				}
+				
+			}
 		}
+		
 	}
 </script>
 

--
Gitblit v1.9.1