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