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