fix input
parent
f82be7e667
commit
b2a4d8c231
|
@ -1,5 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import omit from 'omit.js'
|
|
||||||
// import TextArea from './TextArea';
|
// import TextArea from './TextArea';
|
||||||
|
|
||||||
import inputProps from './inputProps'
|
import inputProps from './inputProps'
|
||||||
|
@ -11,13 +10,15 @@ function fixControlledValue (value) {
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
|
|
||||||
let inputKey = 1
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Input',
|
name: 'Input',
|
||||||
props: {
|
props: {
|
||||||
...inputProps,
|
...inputProps,
|
||||||
},
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change.value',
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
const { value, defaultValue } = this.$props
|
const { value, defaultValue } = this.$props
|
||||||
return {
|
return {
|
||||||
|
@ -44,8 +45,8 @@ export default {
|
||||||
this.stateValue = e.target.value
|
this.stateValue = e.target.value
|
||||||
} else {
|
} else {
|
||||||
this.$forceUpdate()
|
this.$forceUpdate()
|
||||||
this.$emit('input', e)
|
this.$emit('change.value', e.target.value)
|
||||||
this.$emit('change', e.target.value)
|
this.$emit('change', e)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -143,19 +144,10 @@ export default {
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
getInputKey () {
|
|
||||||
const { value } = this
|
|
||||||
// 模拟受控组件
|
|
||||||
if (value !== undefined) {
|
|
||||||
return inputKey++
|
|
||||||
} else {
|
|
||||||
return inputKey
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderInput () {
|
renderInput () {
|
||||||
const { placeholder, type, readOnly = false, name, id, disabled = false } = this.$props
|
const { placeholder, type, readOnly = false, name, id, disabled = false } = this.$props
|
||||||
const { getInputKey, stateValue, getInputClassName, handleKeyDown, handleChange } = this
|
const { stateValue, getInputClassName, handleKeyDown, handleChange } = this
|
||||||
return this.renderLabeledIcon(
|
return this.renderLabeledIcon(
|
||||||
<input
|
<input
|
||||||
value={stateValue}
|
value={stateValue}
|
||||||
|
@ -169,7 +161,6 @@ export default {
|
||||||
onKeydown={handleKeyDown}
|
onKeydown={handleKeyDown}
|
||||||
onInput={handleChange}
|
onInput={handleChange}
|
||||||
ref='input'
|
ref='input'
|
||||||
key={getInputKey()}
|
|
||||||
/>,
|
/>,
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<AntInput placeholder="Basic usage" value="123"/>
|
<AntInput placeholder="Basic usage" v-model="value"/>
|
||||||
|
<AntInput placeholder="Basic usage" :value="value" @change="change"/>
|
||||||
<AntInput placeholder="Basic usage" defaultValue="mysite"/>
|
<AntInput placeholder="Basic usage" defaultValue="mysite"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -9,6 +10,16 @@
|
||||||
|
|
||||||
import { Input } from 'antd'
|
import { Input } from 'antd'
|
||||||
export default {
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
value: '12345',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
change (e) {
|
||||||
|
this.value = e.target.value
|
||||||
|
},
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
AntInput: Input,
|
AntInput: Input,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue