zx_flk_app/pages/loginRegister/components/ZxInput.vue

<template>
  <view
    :class="[
      'input-item',
      isFocus && 'is-focus',
      hightlight && 'hightlight'
    ]"
    :style="{ background }"
  >
    <input
      v-model="inputValue"
      :type="isPassword ? localType : 'text'"
      :placeholder="placeholder"
      placeholder-class="input-placeholder"
      @focus="handleFocus"
      @blur="handleBlur"
    >
    <view v-if="showIcon">
      <view
        v-if="isPassword"
        :class="[
          'input-icon',
          'eye-icon', localType === 'text' && 'show'
        ]"
        @tap="togglePasswordType"
      />
      <view
        v-else
        class="input-icon clear-icon"
        @tap="clearInput"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    inputType: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    hightlight: {
      type: Boolean,
      default: false
    },
    isPassword: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
      isFocus: false,
      inputValue: this.value,
      localType: 'password'
    }
  },
  computed: {
    showIcon() {
      return this.isFocus && this.inputValue
    }
  },
  watch: {
    inputValue(val) {
      this.$emit('input', val)
    },
    type(newVal) {
      this.localType = newVal
    }
  },
  methods: {
    handleFocus() {
      this.isFocus = true
      this.$emit('focus')
    },
    handleBlur() {
      this.isFocus = false
      this.$emit('blur')
    },
    clearInput() {
      this.inputValue = ''
      this.$emit('input', '')
    },
    togglePasswordType() {
      this.localType = this.localType === 'text' ? 'password' : 'text'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";

.input-item {
  position: relative;
  width: 100%;
  height: 112rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  padding: 0 74rpx 0 32rpx;
  box-sizing: border-box;
  border: 4rpx solid transparent;
  input {
      height: 100%;
      font-weight: 500;
      font-size: 36rpx;
      color: #060809;
  }
  /deep/ .input-placeholder {
      font-size: 32rpx;
      color: #BAC1D0;
  }
  &.is-focus {
      border: 4rpx solid #060809;
  }
  &.hightlight {
      border-color: #f85658;
      background: rgba(248, 86, 88, .1);
      input {
        color: #f85658;
      }
  }
  .input-icon {
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      top: 36rpx;
      right: 32rpx;
      z-index: 10;
      pad: 30rpx;
  }
  .clear-icon {
      background: url('https://qiniu.bms16.com/FhKzwftEPo70kloqIVxKH7g0pD6I');
      background-size: 100%;
  }
  .eye-icon {
      background: url('https://qiniu.bms16.com/FhGVSXLjP7rcS1eC-I2cD3eIXB6V');
      background-size: 100%;
      &.show {
          background: url('https://qiniu.bms16.com/FmYDP5QlyBeKER3jqrH12rfZrBRc');
          background-size: 100%;
      }
  }
}
</style>