#

whycq

2023-12-01 d8e6f395fea1419c73f6b6f0a2ddd75eac3eed84

 components/My-input/My-input.vue

@@ -1,31 +1,106 @@
<template>
   <view class="my-input">
      <uni-icons type="person" size="20" color="#707070" style="margin: 0 8px 0 8px;"></uni-icons>
      <view class="box-text">账号:</view>
      <input type="text" class="input" placeholder="请输入账号" style="margin-left: 8px;margin-right:8px;flex:1;">
      <uni-icons type="eye" size="20" color="#707070" style="margin-left: auto;margin-right: 8px;"></uni-icons>
   <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="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>

<script>
   export default{
      name: 'My-input',
      components: {
			
      },
      props: {
         titleIcon: {
            type: String,
            default: 'person'
         },
         title: {
            type: String,
            default: '账号'
         },
         placeholder: {
            type: String,
            default: ''
         },
         inputType: {
            type: String,
            default: 'text'
         },
         optIcon: {
            type: String,
            default: 'eye'
         },
         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: 3rem;
      height: 45px;
      display: flex;
      color: #606164;
      align-items: center;
      background-color:  #ECF0F1;
      border-radius: 14rpx;
      box-shadow: inset 8rpx 8rpx 8rpx rgba(0,0,0,.3),
               inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
               -8rpx -8rpx 10rpx rgba(0,0,0,.4);
      border-radius: 7px;
      box-shadow: inset 4px 4px 4px rgba(0,0,0,.3),
               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;
   }
   .box-text {
      line-height: 1;
   }
   .input {
      // background-color:  #ECF0F1;
      flex:1;
      margin-left: 8px;
      margin-right:8px;
   }
   .opt-icon {
      margin-left: auto;
      margin-right: 8px;
   }
</style>