#

whycq

2023-10-06 8e15159256cd131705aff50b2973bdae52ce6b9b

 components/My-input/My-input.vue

@@ -1,13 +1,50 @@
<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>
      <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">
      <uni-icons class="opt-icon" :type="optIcon" size="20" color="#707070" v-show="optIconShow"></uni-icons>
   </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
         }
      },
      data() {
         return {
         }
      }
		
   }
</script>

<style lang="scss">
@@ -22,10 +59,19 @@
               inset -8rpx -8rpx 8rpx rgba(255,255,255,.7),
               -8rpx -8rpx 10rpx rgba(0,0,0,.4);
   }
   .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>