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

164 165 166 167 168 169 170 171 172
    let $vm = this
    while ($vm) {
      const scopeId = $vm.$options._scopeId
      if (scopeId) {
        this.$refs.placeholder.setAttribute(scopeId, '')
      }
      $vm = $vm.$parent
    }

173 174
    this.initKeyboard(this.$refs.input)

fxy060608's avatar
fxy060608 已提交
175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
    this.focus && this._focusInput()
  },
  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
      }
195 196 197 198 199

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

208 209 210 211 212 213
      // 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)
          this.inputValue = $event.target.value
214 215
          // 字符长度超出范围不触发 input 事件
          return
216 217 218
        }
      }

fxy060608's avatar
fxy060608 已提交
219
      this.$trigger('input', $event, {
220
        value: this.inputValue
fxy060608's avatar
fxy060608 已提交
221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257
      })
    },
    _onFocus ($event) {
      this.$trigger('focus', $event, {
        value: $event.target.value
      })
    },
    _onBlur ($event) {
      this.$trigger('blur', $event, {
        value: $event.target.value
      })
    },
    _focusInput () {
      setTimeout(() => {
        this.$refs.input.focus()
      }, 350)
    },
    _blurInput () {
      setTimeout(() => {
        this.$refs.input.blur()
      }, 350)
    },
    _onComposition ($event) {
      if ($event.type === 'compositionstart') {
        this.composing = true
      } else {
        this.composing = false
      }
    },
    _resetFormData () {
      this.inputValue = ''
    },
    _getFormData () {
      return this.name ? {
        value: this.inputValue,
        key: this.name
      } : {}
Q
qiang 已提交
258 259 260
    },
    _getValueString (value) {
      return value === null ? '' : String(value)
fxy060608's avatar
fxy060608 已提交
261 262 263 264 265
    }
  }
}
</script>
<style>
266 267 268 269 270 271
uni-input {
  display: block;
  font-size: 16px;
  line-height: 1.4em;
  height: 1.4em;
  min-height: 1.4em;
272
  overflow: hidden;
273
}
fxy060608's avatar
fxy060608 已提交
274

275 276 277
uni-input[hidden] {
  display: none;
}
fxy060608's avatar
fxy060608 已提交
278

279 280 281 282 283 284 285 286 287 288
.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 已提交
289

290 291
.uni-input-wrapper,
.uni-input-form {
292
  display: flex;
293 294 295
  position: relative;
  width: 100%;
  height: 100%;
296 297
  flex-direction: column;
  justify-content: center;
298
}
fxy060608's avatar
fxy060608 已提交
299

300
.uni-input-placeholder,
Q
qiang 已提交
301
.uni-input-input {
302 303
  width: 100%;
}
fxy060608's avatar
fxy060608 已提交
304

305
.uni-input-placeholder {
306
  position: absolute;
307
  top: auto !important;
308
  left: 0;
309 310 311 312 313
  color: gray;
  overflow: hidden;
  text-overflow: clip;
  white-space: pre;
  word-break: keep-all;
314
  pointer-events: none;
315
  line-height: inherit;
316
}
fxy060608's avatar
fxy060608 已提交
317

318
.uni-input-input {
319 320
  display: block;
  height: 100%;
321 322
  background: none;
  color: inherit;
323
  opacity: 1;
324
  -webkit-text-fill-color: currentcolor;
325 326 327 328 329 330 331 332
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-indent: inherit;
  text-transform: inherit;
  text-shadow: inherit;
}
fxy060608's avatar
fxy060608 已提交
333

334 335 336
.uni-input-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
fxy060608's avatar
fxy060608 已提交
337

338 339 340 341 342
.uni-input-input::-webkit-outer-spin-button,
.uni-input-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
fxy060608's avatar
fxy060608 已提交
343

344 345 346
.uni-input-input[type="number"] {
  -moz-appearance: textfield;
}
347
</style>