tangjinzhou
7 years ago
parent
b2a4d8c231
commit
f1b6d1d3d1
@ -0,0 +1,133 @@
|
||||
<script>
|
||||
import omit from 'omit.js'
|
||||
|
||||
import inputProps from './inputProps'
|
||||
|
||||
import calculateNodeHeight from './calculateNodeHeight'
|
||||
|
||||
function onNextFrame (cb) {
|
||||
if (window.requestAnimationFrame) {
|
||||
return window.requestAnimationFrame(cb)
|
||||
}
|
||||
return window.setTimeout(cb, 1)
|
||||
}
|
||||
|
||||
function clearNextFrameAction (nextFrameId) {
|
||||
if (window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame(nextFrameId)
|
||||
} else {
|
||||
window.clearTimeout(nextFrameId)
|
||||
}
|
||||
}
|
||||
function fixControlledValue (value) {
|
||||
if (typeof value === 'undefined' || value === null) {
|
||||
return ''
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TextArea',
|
||||
props: {
|
||||
...inputProps,
|
||||
autosize: [Object, Boolean],
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change.value',
|
||||
},
|
||||
data () {
|
||||
const { value, defaultValue } = this.$props
|
||||
return {
|
||||
stateValue: fixControlledValue(value === undefined ? defaultValue : value),
|
||||
nextFrameActionId: undefined,
|
||||
textareaStyles: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.stateValue = fixControlledValue(val)
|
||||
if (this.nextFrameActionId) {
|
||||
clearNextFrameAction(this.nextFrameActionId)
|
||||
}
|
||||
this.nextFrameActionId = onNextFrame(this.resizeTextarea)
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.resizeTextarea()
|
||||
},
|
||||
methods: {
|
||||
handleKeyDown (e) {
|
||||
if (e.keyCode === 13) {
|
||||
this.$emit('pressEnter', e)
|
||||
}
|
||||
this.$emit('keydown', e)
|
||||
},
|
||||
resizeTextarea () {
|
||||
const { autosize } = this.$props
|
||||
if (!autosize || !this.$refs.textArea) {
|
||||
return
|
||||
}
|
||||
const minRows = autosize ? autosize.minRows : null
|
||||
const maxRows = autosize ? autosize.maxRows : null
|
||||
const textareaStyles = calculateNodeHeight(this.$refs.textArea, false, minRows, maxRows)
|
||||
this.textareaStyles = textareaStyles
|
||||
},
|
||||
|
||||
getTextAreaClassName () {
|
||||
const { prefixCls, disabled } = this.$props
|
||||
return {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
}
|
||||
},
|
||||
|
||||
handleTextareaChange (e) {
|
||||
const { value } = this.$props
|
||||
if (value === undefined) {
|
||||
this.stateValue = e.target.value
|
||||
this.$nextTick(() => {
|
||||
this.resizeTextarea()
|
||||
})
|
||||
} else {
|
||||
this.$forceUpdate()
|
||||
this.$emit('change.value', e.target.value)
|
||||
this.$emit('change', e)
|
||||
}
|
||||
},
|
||||
|
||||
focus () {
|
||||
this.$refs.textArea.focus()
|
||||
},
|
||||
|
||||
blur () {
|
||||
this.$refs.textArea.blur()
|
||||
},
|
||||
|
||||
},
|
||||
render () {
|
||||
const { stateValue, getTextAreaClassName, handleKeyDown, handleTextareaChange, textareaStyles } = this
|
||||
const otherProps = omit(this.$props, [
|
||||
'prefixCls',
|
||||
'autosize',
|
||||
'type',
|
||||
])
|
||||
const attrs = {
|
||||
attrs: { ...otherProps, ...this.$attrs },
|
||||
}
|
||||
return (
|
||||
<textarea
|
||||
{...attrs}
|
||||
value={stateValue}
|
||||
class={getTextAreaClassName()}
|
||||
style={textareaStyles}
|
||||
onKeydown={handleKeyDown}
|
||||
onInput={handleTextareaChange}
|
||||
ref='textArea'
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<AntTextArea placeholder="Autosize height based on content lines" autosize />
|
||||
<div style="margin: 24px 0" />
|
||||
<ant-textArea placeholder="Autosize height with minimum and maximum number of lines" :autosize="{ minRows: 2, maxRows: 6 }" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { Input } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
AntTextArea: Input.TextArea,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style="width: 200px"
|
||||
@search="onSearch"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { Input } from 'antd'
|
||||
export default {
|
||||
methods: {
|
||||
onSearch (value) {
|
||||
console.log(value)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Search: Input.Search,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="example-input">
|
||||
<AntInput size="large" placeholder="large size" />
|
||||
<AntInput placeholder="default size" />
|
||||
<AntInput size="small" placeholder="small size" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { Input } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
AntInput: Input,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.example-input .ant-input {
|
||||
width: 200px;
|
||||
margin: 0 8px 8px 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<AntTextArea placeholder="Basic usage" :rows="4"/>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { Input } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
AntTextArea: Input.TextArea,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,9 +1,9 @@
|
||||
import Input from './Input'
|
||||
import Group from './Group'
|
||||
import Search from './Search'
|
||||
// import TextArea from './TextArea'
|
||||
import TextArea from './TextArea'
|
||||
|
||||
Input.Group = Group
|
||||
Input.Search = Search
|
||||
// Input.TextArea = TextArea
|
||||
Input.TextArea = TextArea
|
||||
export default Input
|
||||
|
||||
Loading…
Reference in new issue