u-input

<template>
  <view
    class="u-input"
    :class="{
      'u-input--border': border,
    }"
    @tap.stop="inputClick"
  >
    <textarea
      v-if="type == 'textarea'"
      :class="{ 'error-input-110': validateState, input110: !validateState }"
      class="u-input__input u-input__textarea"
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :maxlength="inputMaxlength"
      :fixed="fixed"
      :focus="focused"
      :autoHeight="autoHeight"
      @input="handleInput"
      @blur="handleBlur"
      @focus="onFocus"
      @confirm="onConfirm"
    />
    <input
      v-else
      :class="{ 'error-input-110': validateState, input110: !validateState }"
      class="u-input__input"
      :type="type == 'password' ? 'text' : type"
      :value="defaultValue"
      :password="type == 'password' && !showPassword"
      :placeholder="placeholder"
      :disabled="disabled || type === 'select'"
      :maxlength="inputMaxlength"
      :focus="focused"
      :confirmType="confirmType"
      :cursor-spacing="getCursorSpacing"
      :confirm-hold="confirmHold"
      @focus="onFocus"
      @blur="handleBlur"
      @input="handleInput"
      @confirm="onConfirm"
    />

    <view class="u-input__right-icon u-flex">
      <view
        class="u-input__right-icon__clear u-input__right-icon__item"
        v-if="clearable && value != '' && focused && !imgRightSrc"
      >
        <!-- <u-icon
          size="18"
          name="close-circle-fill"
          color="#c0c4cc"
          @touchstart="onClear"
        /> -->
        <image src="/static/base-module/icons/close.png" class="icon-close"  @touchstart="onClear"></image>
      </view>

      <image
        v-if="imgRightSrc"
        class="u-input__right-img"
        :src="imgRightSrc"
        @longtap="handerImg"
      ></image>
      <view
        class="u-input__right-icon__clear u-input__right-icon__item"
        v-if="passwordIcon && type == 'password'"
      >
        <!-- <u-icon
          size="32"
          :name="!showPassword ? 'eye' : 'eye-fill'"
          color="#c0c4cc"
          @click="showPassword = !showPassword"
        /> -->
            <image
              src="/static/base-module/icons/hidepwd.png"
              class="icon"
              mode="aspectFit"
              v-if="!showPassword"
              @click="showPassword = !showPassword"
            ></image>
            <image
              src="/static/base-module/icons/showpwd.png"
              class="icon"
              mode="aspectFit"
             v-if="showPassword"
             @click="showPassword = !showPassword"
            ></image>
      </view>
      <view
        class="u-input__right-icon--select u-input__right-icon__item"
        v-if="type == 'select'"
      >
        <u-icon
          name="arrow-down"
          size="14"
          color="#000"
          :class="{
            'u-input__right-icon--select--reverse': selectOpen,
          }"
        ></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import Emitter from "../../libs/util/emitter.js";

/**
 * input 输入框
 * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
 * @tutorial http://uviewui.com/components/input.html
 * @property {String} type 模式选择，见官网说明
 * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
 * @property {} v-model 用于双向绑定输入框的值
 * @property {String} input-align 输入框文字的对齐方式(默认left)
 * @property {String} placeholder placeholder显示值(默认 '请输入内容')
 * @property {Boolean} disabled 是否禁用输入框(默认false)
 * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
 * @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
 * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
 * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
 * @property {Object} custom-style 自定义输入框的样式，对象形式
 * @property {Boolean} focus 是否自动获得焦点(默认false)
 * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
 * @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
 * @property {Boolean} border 是否显示边框(默认false)
 * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
 * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
 * @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
 * @example <u-input v-model="value" :type="type" :border="border" />
 */
export default {
  name: "u-input",
  mixins: [Emitter],
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    confirmHold:{
      type: Boolean,
      default: true,
    },
    // 输入框的类型，textarea，text，number
    type: {
      type: String,
      default: "text",
    },
    inputAlign: {
      type: String,
      default: "left",
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: [Number, String],
      default: 140,
    },
    placeholderStyle: {
      type: String,
      default: "color:rgba(140,140,140,1)",
    },
    confirmType: {
      type: String,
      default: "done",
    },
    // 输入框的自定义样式
    customStyle: {
      type: Object,
      default() {
        return {};
      },
    },
    // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
    fixed: {
      type: Boolean,
      default: false,
    },
    // 是否自动获得焦点
    focus: {
      type: Boolean,
      default: false,
    },
    // 密码类型时，是否显示右侧的密码图标
    passwordIcon: {
      type: Boolean,
      default: true,
    },
    // input|textarea是否显示边框
    border: {
      type: Boolean,
      default: false,
    },
    // 输入框的边框颜色
    borderColor: {
      type: String,
      default: "#dcdfe6",
    },
    autoHeight: {
      type: Boolean,
      default: false,
    },
    // type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
    // open-打开，close-关闭
    selectOpen: {
      type: Boolean,
      default: false,
    },
    // 高度，单位rpx
    height: {
      type: [Number, String],
      default: 110 / 3.64,
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true,
    },
    // 指定光标与键盘的距离，单位 px
    cursorSpacing: {
      type: [Number, String],
      default: 0,
    },
    imgRightSrc: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      defaultValue: this.value,
      inputHeight: 70, // input的高度
      textareaHeight: 100, // textarea的高度
      validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
      focused: false, // 当前是否处于获得焦点的状态
      showPassword: false, // 是否预览密码
      marginRight: 0, // 输入框右边的距离，当获得焦点时各一个后面的距离，避免点击右边图标误触输入框
    };
  },
  watch: {
    value(nVal, oVal) {
      this.defaultValue = nVal;
      // 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
      if (nVal != oVal && this.type == "select")
        this.handleInput({
          detail: {
            value: nVal,
          },
        });
      // 值变化，且是右对齐时，计算右侧的清除图标的位置尺寸，避免input-align=right时文字与清除图标重合
      if (oVal == "" && this.inputAlign == "right") this.getMarginRight();
    },
    focused(nVal) {
      if (this.clearable && this.value) {
        this.getMarginRight();
      }
    },
  },
  computed: {
    // 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
    inputMaxlength() {
      return Number(this.maxlength);
    },
    getStyle() {
      let style = {};
      // 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
      style.minHeight = this.height
        ? this.height + "rpx"
        : this.type == "textarea"
        ? this.textareaHeight + "rpx"
        : this.inputHeight + "rpx";
      style.marginRight = this.marginRight + "px";
      style = Object.assign(style, this.customStyle);
      return style;
    },
    //
    getCursorSpacing() {
      return Number(this.cursorSpacing);
    },
  },
  created() {
    // 监听u-form-item发出的错误事件，将输入框边框变红色
    this.$on("on-form-item-error", this.onFormItemError);
  },
  mounted() {
    this.getMarginRight();
  },
  methods: {
    // 计算输入框的右边距
    getMarginRight() {
      this.$nextTick(() => {
        this.$uGetRect(".u-input__right-icon").then((res) => {
          this.marginRight = res.width;
        });
      });
    },
    /**
     * change 事件
     * @param event
     */
    handleInput(event) {
      // 当前model 赋值
      this.defaultValue = event.detail.value;
      // vue 原生的方法 return 出去
      this.$emit("input", event.detail.value);
      // 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
      // 尚未更新到u-form-item，导致获取的值为空，从而校验混论
      this.$nextTick(() => {
        // 将当前的值发送到 u-form-item 进行校验
        this.dispatch("u-form-item", "on-form-change", event.detail.value);
      });
    },
    /**
     * blur 事件
     * @param event
     */
    handleBlur(event) {
      setTimeout(() => {
        this.focused = false;
      }, 50)
      // vue 原生的方法 return 出去
      this.$emit("blur", event.detail.value);
      this.$nextTick(() => {
        // 将当前的值发送到 u-form-item 进行校验
        this.dispatch("u-form-item", "on-form-blur", event.detail.value);
      });
    },
    onFormItemError(status) {
      console.log(status)
      this.validateState = status;
    },
    onFocus(event) {
      this.focused = true
      this.$emit("focus");
    },
    onConfirm(e) {
      this.$emit("confirm", e.detail.value);
    },
    onClear(event) {
      this.$emit("input", "");
    },
    inputClick() {
      this.$emit("click");
    },
    handerImg() {
      this.$emit("handerRightImg");
    },
  },
};
</script>

<style lang="scss" scoped>
.u-input {
  position: relative;
  flex: 1;
  &__input {
    font-size: rpx(40);
    color:rgba(0,0,0,1);
    width: 100%;
    height: rpx(110);
  }
  /deep/ .u-icon {
    transition: transform 0.4s;
  }
  /deep/ .u-icon__icon {
    font-weight: bold !important;
  }
  /deep/ .u-input__right-img {
    width: 19.78rpx;
    height: 19.78rpx;
    margin-top: 50%;
    border-left: 1px solid #bebebe;
    padding-left: 7.41rpx;
  }
  &__textarea {
    width: auto;
    font-size: rpx(40);
    color:rgba(0,0,0,1);
    min-height: rpx(142);
  }

  &--border {
    border-radius: 6rpx;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3.88rpx;
    border: 1px solid rgba(135, 135, 135, 1);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1),
      inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  }

  &--error {
    border-color: $u-type-error !important;
  }

  &__right-icon {
    position: absolute;
    right: rpx(34);
    top: 50%;
    margin-top: rpx(-22);
    z-index: 3;

    &__item {
      margin-left: 5rpx;
    }

    &--select {
      transition: transform 0.4s;

      &--reverse {
        transform: rotate(-180deg);
      }
    }
  }
}
.u-input__input {
  padding: 0 rpx(20);
}
.icon-close {
        width: rpx(44);
        height: rpx(44);
      }
       .icon {
        width: rpx(64);
        height: rpx(64);
      }
</style>