#

whycq

2023-10-07 2f4ecca95c56d3d30402e480e9d97368a5254cbf

 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 {