1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <template>
| <a-input
| :addon-after="addonAfter"
| :addon-before="addonBefore"
| :default-value="defaultValue"
| :disabled="disabled"
| :id="id"
| :max-length="maxLength"
| :prefix="prefix"
| :size="size"
| :suffix="suffix || lenSuffix"
| :type="type"
| :allow-clear="allowClear"
| v-model="sValue"
| :value="value"
| @change="onChange"
| @input="onInput"
| @pressEnter="onPressEnter"
| @keydown="onKeydown"
| >
| <template :slot="slot" v-for="slot in Object.keys($slots)">
| <slot :name="slot"></slot>
| </template>
| </a-input>
| </template>
|
| <script>
| export default {
| name: 'IInput',
| model: {
| prop: 'value',
| event: 'change.value'
| },
| props: ['addonAfter', 'addonBefore', 'defaultValue', 'disabled', 'id', 'maxLength', 'prefix', 'size', 'suffix', 'type', 'value', 'allowClear'],
| data() {
| return {
| sValue: this.value || this.defaultValue || ''
| }
| },
| watch: {
| value(val) {
| this.sValue = val
| }
| },
| computed: {
| lenSuffix() {
| return this.maxLength && `${(this.sValue + '').length}/${this.maxLength}`
| }
| },
| methods: {
| onChange(e) {
| this.$emit('change', e)
| this.$emit('change.value', e.target.value)
| },
| onInput(e) {
| this.$emit('input', e)
| },
| onPressEnter(e) {
| this.$emit('pressEnter', e)
| },
| onKeydown(e) {
| this.$emit('keydown', e)
| }
| }
| }
| </script>
|
|
