index.vue 7.7 KB
Newer Older
fxy060608's avatar
fxy060608 已提交
1
<template>
2 3 4
  <uni-input
    @change.stop
    v-on="$listeners"
fxy060608's avatar
fxy060608 已提交
5
  >
6 7 8
    <div
      ref="wrapper"
      class="uni-input-wrapper"
fxy060608's avatar
fxy060608 已提交
9
    >
10
      <div
11
        v-show="!(composing || valueSync.length)"
12 13 14 15
        ref="placeholder"
        :style="placeholderStyle"
        :class="placeholderClass"
        class="uni-input-placeholder"
16 17
        v-text="placeholder"
      />
18
      <input
19
        v-if="!disabled || !fixColor"
20
        ref="input"
21
        v-model="valueSync"
22
        v-keyboard
23 24 25
        :disabled="disabled"
        :type="inputType"
        :maxlength="maxlength"
26
        :step="step"
27
        :autofocus="focus"
28
        class="uni-input-input"
29
        autocomplete="off"
30 31 32 33
        @focus="_onFocus"
        @blur="_onBlur"
        @input.stop="_onInput"
        @compositionstart="_onComposition"
fxy060608's avatar
fxy060608 已提交
34
        @compositionend="_onComposition"
35 36
        @keyup.stop="_onKeyup"
      >
37 38 39 40 41 42 43 44 45 46 47
      <input
        v-if="disabled && fixColor"
        ref="input"
        :value="valueSync"
        tabindex="-1"
        :readonly="disabled"
        :type="inputType"
        :maxlength="maxlength"
        :step="step"
        class="uni-input-input"
      >
fxy060608's avatar
fxy060608 已提交
48 49 50 51 52
    </div>
  </uni-input>
</template>
<script>
import {
53
  baseInput
fxy060608's avatar
fxy060608 已提交
54
} from 'uni-mixins'
55
const INPUT_TYPES = ['text', 'number', 'idcard', 'digit', 'password']
56
const NUMBER_TYPES = ['number', 'digit']
fxy060608's avatar
fxy060608 已提交
57 58
export default {
  name: 'Input',
59
  mixins: [baseInput],
fxy060608's avatar
fxy060608 已提交
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
  props: {
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    password: {
      type: [Boolean, String],
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    placeholderStyle: {
      type: String,
      default: ''
    },
    placeholderClass: {
      type: String,
83
      default: 'input-placeholder'
fxy060608's avatar
fxy060608 已提交
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: 140
    },
    focus: {
      type: [Boolean, String],
      default: false
    },
    confirmType: {
      type: String,
      default: 'done'
    }
  },
  data () {
    return {
      composing: false,
105
      wrapperHeight: 0,
106 107 108
      cachedValue: '',
      // Safari 14 以上修正禁用状态颜色
      fixColor: String(navigator.vendor).indexOf('Apple') === 0 && CSS.supports('image-orientation:from-image')
fxy060608's avatar
fxy060608 已提交
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
    }
  },
  computed: {
    inputType: function () {
      let type = ''
      switch (this.type) {
        case 'text':
          this.confirmType === 'search' && (type = 'search')
          break
        case 'idcard':
          // TODO 可能要根据不同平台进行区分处理
          type = 'text'
          break
        case 'digit':
          type = 'number'
          break
        default:
126
          type = ~INPUT_TYPES.indexOf(this.type) ? this.type : 'text'
fxy060608's avatar
fxy060608 已提交
127 128 129 130 131 132
          break
      }
      return this.password ? 'password' : type
    },
    step () {
      // 处理部分设备中无法输入小数点的问题
133
      return ~NUMBER_TYPES.indexOf(this.type) ? '0.000000000000000001' : ''
fxy060608's avatar
fxy060608 已提交
134 135 136
    }
  },
  watch: {
137 138
    focus (val) {
      this.$refs.input && this.$refs.input[val ? 'focus' : 'blur']()
fxy060608's avatar
fxy060608 已提交
139 140
    },
    maxlength (value) {
141 142
      const realValue = this.valueSync.slice(0, parseInt(value, 10))
      realValue !== this.valueSync && (this.valueSync = realValue)
fxy060608's avatar
fxy060608 已提交
143 144 145 146 147 148 149 150 151 152
    }
  },
  created () {
    this.$dispatch('Form', 'uni-form-group-update', {
      type: 'add',
      vm: this
    })
  },
  mounted () {
    if (this.confirmType === 'search') {
153
      const formElem = document.createElement('form')
fxy060608's avatar
fxy060608 已提交
154 155 156 157
      formElem.action = ''
      formElem.onsubmit = function () {
        return false
      }
158
      formElem.className = 'uni-input-form'
fxy060608's avatar
fxy060608 已提交
159 160 161 162
      formElem.appendChild(this.$refs.input)
      this.$refs.wrapper.appendChild(formElem)
    }

163 164 165 166 167 168 169 170
    let $vm = this
    while ($vm) {
      const scopeId = $vm.$options._scopeId
      if (scopeId) {
        this.$refs.placeholder.setAttribute(scopeId, '')
      }
      $vm = $vm.$parent
    }
fxy060608's avatar
fxy060608 已提交
171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
  },
  beforeDestroy () {
    this.$dispatch('Form', 'uni-form-group-update', {
      type: 'remove',
      vm: this
    })
  },
  methods: {
    _onKeyup ($event) {
      if ($event.keyCode === 13) {
        this.$trigger('confirm', $event, {
          value: $event.target.value
        })
      }
    },
    _onInput ($event) {
      if (this.composing) {
        return
      }
190 191 192 193 194

      // 处理部分输入法可以输入其它字符的情况
      if (~NUMBER_TYPES.indexOf(this.type)) {
        if (this.$refs.input.validity && !this.$refs.input.validity.valid) {
          $event.target.value = this.cachedValue
195
          this.valueSync = $event.target.value
196 197
          // 输入非法字符不触发 input 事件
          return
198
        } else {
199
          this.cachedValue = this.valueSync
200 201
        }
      }
fxy060608's avatar
fxy060608 已提交
202

203 204 205 206 207
      // type="number" 不支持 maxlength 属性,因此需要主动限制长度。
      if (this.inputType === 'number') {
        const maxlength = parseInt(this.maxlength, 10)
        if (maxlength > 0 && $event.target.value.length > maxlength) {
          $event.target.value = $event.target.value.slice(0, maxlength)
208
          this.valueSync = $event.target.value
209 210
          // 字符长度超出范围不触发 input 事件
          return
211 212
        }
      }
213 214
      this.$triggerInput($event, {
        value: this.valueSync
fxy060608's avatar
fxy060608 已提交
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
      })
    },
    _onFocus ($event) {
      this.$trigger('focus', $event, {
        value: $event.target.value
      })
    },
    _onBlur ($event) {
      this.$trigger('blur', $event, {
        value: $event.target.value
      })
    },
    _onComposition ($event) {
      if ($event.type === 'compositionstart') {
        this.composing = true
      } else {
        this.composing = false
232 233
        // 部分输入法 compositionend 事件可能晚于 input
        this._onInput($event)
fxy060608's avatar
fxy060608 已提交
234 235 236
      }
    },
    _resetFormData () {
237
      this.valueSync = ''
fxy060608's avatar
fxy060608 已提交
238 239 240
    },
    _getFormData () {
      return this.name ? {
241
        value: this.valueSync,
fxy060608's avatar
fxy060608 已提交
242 243 244 245 246 247 248
        key: this.name
      } : {}
    }
  }
}
</script>
<style>
249 250 251 252 253 254
uni-input {
  display: block;
  font-size: 16px;
  line-height: 1.4em;
  height: 1.4em;
  min-height: 1.4em;
255
  overflow: hidden;
256
}
fxy060608's avatar
fxy060608 已提交
257

258 259 260
uni-input[hidden] {
  display: none;
}
fxy060608's avatar
fxy060608 已提交
261

262 263 264 265 266 267 268 269 270 271
.uni-input-wrapper,
.uni-input-placeholder,
.uni-input-form,
.uni-input-input {
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: inherit;
}
fxy060608's avatar
fxy060608 已提交
272

273 274
.uni-input-wrapper,
.uni-input-form {
275
  display: flex;
276 277 278
  position: relative;
  width: 100%;
  height: 100%;
279 280
  flex-direction: column;
  justify-content: center;
281
}
fxy060608's avatar
fxy060608 已提交
282

283
.uni-input-placeholder,
Q
qiang 已提交
284
.uni-input-input {
285 286
  width: 100%;
}
fxy060608's avatar
fxy060608 已提交
287

288
.uni-input-placeholder {
289
  position: absolute;
290
  top: auto !important;
291
  left: 0;
292 293 294 295 296
  color: gray;
  overflow: hidden;
  text-overflow: clip;
  white-space: pre;
  word-break: keep-all;
297
  pointer-events: none;
298
  line-height: inherit;
299
}
fxy060608's avatar
fxy060608 已提交
300

301
.uni-input-input {
302 303
  display: block;
  height: 100%;
304 305
  background: none;
  color: inherit;
306
  opacity: 1;
307 308 309 310 311 312 313 314
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-indent: inherit;
  text-transform: inherit;
  text-shadow: inherit;
}
fxy060608's avatar
fxy060608 已提交
315

316 317 318
.uni-input-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
fxy060608's avatar
fxy060608 已提交
319

320 321 322 323 324
.uni-input-input::-webkit-outer-spin-button,
.uni-input-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
fxy060608's avatar
fxy060608 已提交
325

326 327 328
.uni-input-input[type="number"] {
  -moz-appearance: textfield;
}
329 330 331 332 333

.uni-input-input:disabled {
  /* 用于重置iOS14以下禁用状态文字颜色 */
  -webkit-text-fill-color: currentcolor;
}
334
</style>