#

whycq

2023-11-01 9b3f629cb2d15d0e77d7ecd827f84629ddd0c9a9

 components/My-input/My-input.vue

@@ -1,9 +1,18 @@
<template>
   <view class="my-input">
   <view class="user-input">
      <uni-icons class="title-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
      <view class="box-text">{{title}}:</view>
      <input class="input" :type="inputType"  :placeholder="placeholder">
      <input class="input" type="text"  :placeholder="placeholder" v-model="data" v-show="inputType == 'text'">
      <input class="input" type="password"  :placeholder="placeholder" v-model="data" v-show="inputType == 'password'">
      <uni-icons class="opt-icon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons>
		
      <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
      <view class="user-input-text">{{title}}:</view>
      <input class="user-input-input" :type="inputType"  :placeholder="placeholder" v-model="data">
      <uni-icons class="user-input-opticon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons> -->
      <!-- <uni-icons class="user-input-icon" :type="titleIcon" size="20" color="#707070" ></uni-icons>
      <view class="user-input-text">{{title}}:</view>
      <input class="user-input-input" :type="inputType"  :placeholder="placeholder" v-model="data"> -->
   </view>
</template>

@@ -37,18 +46,31 @@
         optIconShow: {
            type: Boolean,
            default: false
         }
         },
         value: {
            type: [String,Number],
            default: ''
         },
      },
      watch: {
         data(val) {
            this.$emit('input',val)
         },
         value(val) {
            this.data = val
         },
      },
      data() {
         return {
            data:'',
         }
      }
      
   }
</script>

<style lang="scss">
   .my-input {
<style lang="scss" scoped>
   .user-input {
      width: 100%;
      height: 45px;
      display: flex;
@@ -60,6 +82,12 @@
               inset -4px -4px 4px rgba(255,255,255,.7),
               -4px -4px 5px rgba(0,0,0,.4);
   }
	
   .user-input-icon{
		
   }
	
	
   .title-icon {
      margin: 0 8px 0 8px;
   }