From 151cf0b26965874cc5ebdc93b1c1c203034399c7 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期四, 12 十月 2023 18:19:18 +0800
Subject: [PATCH] #
---
components/z-input/z-input.vue | 88 ++++++++++++++++++++++++++++++--------------
1 files changed, 60 insertions(+), 28 deletions(-)
diff --git a/components/z-input/z-input.vue b/components/z-input/z-input.vue
index ab8a105..0e8f0dc 100644
--- a/components/z-input/z-input.vue
+++ b/components/z-input/z-input.vue
@@ -3,11 +3,22 @@
<view class="main">
<view class="inner1">{{desc}}</view>
<view class="put inner2">
- <input class="p-input" type="text" :placeholder="placeholder" @input="input" v-model="val">
- <uni-icons class="p-icon" type="closeempty" size="16" color="#707070" v-show="val.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="#b9b9b9"
+ 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>
@@ -16,6 +27,12 @@
<script>
export default {
name:"z-input",
+ data() {
+ return {
+ data:'',
+ focusData: false
+ };
+ },
props: {
desc: {
type: String,
@@ -34,39 +51,51 @@
default: '璇疯緭鍏�'
},
value: {
- type: String,
+ type: [String,Number],
default: ''
},
lenCheck: {
type: [Number],
default: null
},
+ focus: {
+ type: Boolean,
+ default: false
+ }
},
watch: {
- value(val) {
- console.log(1);
- this.val = val
+ data(val) {
+ if (!this.lenCheck) {
+ this.$emit('input',val)
+ return
+ }
+ if (val.length != this.lenCheck) {
+ setTimeout(()=>{
+ this.data = ''
+ this.$emit('input','')
+ },10)
+ } else {
+ this.$emit('input',val)
+ }
},
+ focus(f) {
+ console.log(f);
+ this.focusData = !f
+ setTimeout(()=>{
+ this.focusData = f
+ },10)
+ }
},
created() {
- this.val = this.value
- },
- data() {
- return {
- val:'',
- };
+ this.data = this.value
+ this.focusData = this.focus
},
methods: {
- input() {
- console.log(3);
- if(this.val.length != this.lenCheck) {
- this.val = ''
- }
- this.$emit('input',this.val);
- },
clear() {
- this.val = ''
- this.input()
+ this.data = ''
+ },
+ clickBtn() {
+ this.$emit('clickBtn');
}
}
}
@@ -76,7 +105,7 @@
.main {
display: flex;
align-items: center;
- min-height: 70rpx;
+ min-height: 35px;
background-color: #FFF;
/* border-bottom: 1px solid darkgray; */
}
@@ -86,17 +115,20 @@
}
.inner1 {
- width: 120rpx;
+ width: 65px;
padding-left: 8px;
- font-weight: 700;
+ color: #606164;
+ font-weight: 900;
font-family:'Helvetica Neue';
}
.inner2 {
- background-color: aliceblue;
+ background-color: #f1f3f4;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
+ border-radius: 5px;
+ color: #606266;
}
.p-input {
flex:1;
@@ -107,13 +139,13 @@
margin-right: 8px;
}
.inner3 {
- width: 200rpx;
+ width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.m-btn {
- background-color: #3c9cff;
+ background-color: #00aeec;
color: #FFF;
}
.m-btn:active {
--
Gitblit v1.9.1