地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 uview-ui/components/u-input/u-input.vue

New file
@@ -0,0 +1,387 @@
<template>
   <view
      class="u-input"
      :class="{
         'u-input--border': border,
         'u-input--error': validateState
      }"
      :style="{
         padding: `0 ${border ? 20 : 0}rpx`,
         borderColor: borderColor,
         textAlign: inputAlign
      }"
      @tap.stop="inputClick"
   >
      <textarea
         v-if="type == 'textarea'"
         class="u-input__input u-input__textarea"
         :style="[getStyle]"
         :value="defaultValue"
         :placeholder="placeholder"
         :placeholderStyle="placeholderStyle"
         :disabled="disabled"
         :maxlength="inputMaxlength"
         :fixed="fixed"
         :focus="focus"
         :autoHeight="autoHeight"
         :selection-end="uSelectionEnd"
         :selection-start="uSelectionStart"
         :cursor-spacing="getCursorSpacing"
         :show-confirm-bar="showConfirmbar"
         @input="handleInput"
         @blur="handleBlur"
         @focus="onFocus"
         @confirm="onConfirm"
      />
      <input
         v-else
         class="u-input__input"
         :type="type == 'password' ? 'text' : type"
         :style="[getStyle]"
         :value="defaultValue"
         :password="type == 'password' && !showPassword"
         :placeholder="placeholder"
         :placeholderStyle="placeholderStyle"
         :disabled="disabled || type === 'select'"
         :maxlength="inputMaxlength"
         :focus="focus"
         :confirmType="confirmType"
         :cursor-spacing="getCursorSpacing"
         :selection-end="uSelectionEnd"
         :selection-start="uSelectionStart"
         :show-confirm-bar="showConfirmbar"
         @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" @tap="onClear" v-if="clearable && value != '' && focused">
            <u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
         </view>
         <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"/>
         </view>
         <view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
            'u-input__right-icon--select--reverse': selectOpen
         }">
            <u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></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} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
 * @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
 * @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: ''
      },
      // 输入框的类型，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: #c0c4cc;'
      },
      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: true
      },
      // type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
      // open-打开，close-关闭
      selectOpen: {
         type: Boolean,
         default: false
      },
      // 高度，单位rpx
      height: {
         type: [Number, String],
         default: ''
      },
      // 是否可清空
      clearable: {
         type: Boolean,
         default: true
      },
      // 指定光标与键盘的距离，单位 px
      cursorSpacing: {
         type: [Number, String],
         default: 0
      },
      // 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
      selectionStart: {
         type: [Number, String],
         default: -1
      },
      // 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
      selectionEnd: {
         type: [Number, String],
         default: -1
      },
      // 是否自动去除两端的空格
      trim: {
         type: Boolean,
         default: true
      },
      // 是否显示键盘上方带有”完成“按钮那一栏
      showConfirmbar:{
         type:Boolean,
         default:true
      }
   },
   data() {
      return {
         defaultValue: this.value,
         inputHeight: 70, // input的高度
         textareaHeight: 100, // textarea的高度
         validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
         focused: false, // 当前是否处于获得焦点的状态
         showPassword: false, // 是否预览密码
         lastValue: '', // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间
      };
   },
   watch: {
      value(nVal, oVal) {
         this.defaultValue = nVal;
         // 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
         if(nVal != oVal && this.type == 'select') this.handleInput({
            detail: {
               value: nVal
            }
         })
      },
   },
   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 = Object.assign(style, this.customStyle);
         return style;
      },
      //
      getCursorSpacing() {
         return Number(this.cursorSpacing);
      },
      // 光标起始位置
      uSelectionStart() {
         return String(this.selectionStart);
      },
      // 光标结束位置
      uSelectionEnd() {
         return String(this.selectionEnd);
      }
   },
   created() {
      // 监听u-form-item发出的错误事件，将输入框边框变红色
      this.$on('on-form-item-error', this.onFormItemError);
   },
   methods: {
      /**
       * change 事件
       * @param event
       */
      handleInput(event) {
         let value = event.detail.value;
         // 判断是否去除空格
         if(this.trim) value = this.$u.trim(value);
         // vue 原生的方法 return 出去
         this.$emit('input', value);
         // 当前model 赋值
         this.defaultValue = value;
         // 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
         // 尚未更新到u-form-item，导致获取的值为空，从而校验混论
         // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
         setTimeout(() => {
            // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
            // #ifdef MP-TOUTIAO
            if(this.$u.trim(value) == this.lastValue) return ;
            this.lastValue = value;
            // #endif
            // 将当前的值发送到 u-form-item 进行校验
            this.dispatch('u-form-item', 'on-form-change', value);
         }, 40)
      },
      /**
       * blur 事件
       * @param event
       */
      handleBlur(event) {
         // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
         // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
         setTimeout(() => {
            this.focused = false;
         }, 100)
         // vue 原生的方法 return 出去
         this.$emit('blur', event.detail.value);
         setTimeout(() => {
            // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
            // #ifdef MP-TOUTIAO
            if(this.$u.trim(value) == this.lastValue) return ;
            this.lastValue = value;
            // #endif
            // 将当前的值发送到 u-form-item 进行校验
            this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
         }, 40)
      },
      onFormItemError(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');
      }
   }
};
</script>

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

.u-input {
   position: relative;
   flex: 1;
   @include vue-flex;

   &__input {
      //height: $u-form-item-height;
      font-size: 28rpx;
      color: $u-main-color;
      flex: 1;
   }

   &__textarea {
      width: auto;
      font-size: 28rpx;
      color: $u-main-color;
      padding: 10rpx 0;
      line-height: normal;
      flex: 1;
   }

   &--border {
      border-radius: 6rpx;
      border-radius: 4px;
      border: 1px solid $u-form-item-border-color;
   }

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

   &__right-icon {

      &__item {
         margin-left: 10rpx;
      }

      &--select {
         transition: transform .4s;

         &--reverse {
            transform: rotate(-180deg);
         }
      }
   }
}
</style>