68 lines
1.5 KiB
React
68 lines
1.5 KiB
React
import './style.less'
|
|
import { getStrFullLength, cutStrByFullLength } from '../_util/util'
|
|
import Input from 'ant-design-vue/es/input'
|
|
const TextArea = Input.TextArea
|
|
|
|
export default {
|
|
name: 'LimitTextArea',
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
props: Object.assign({}, TextArea.props, {
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'ant-textarea-limit'
|
|
},
|
|
// eslint-disable-next-line
|
|
value: {
|
|
type: String
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
default: 200
|
|
}
|
|
}),
|
|
data () {
|
|
return {
|
|
currentLimit: 0
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.calcLimitNum(val)
|
|
}
|
|
},
|
|
created () {
|
|
this.calcLimitNum(this.value)
|
|
},
|
|
methods: {
|
|
handleChange (e) {
|
|
const value = e.target.value
|
|
const len = getStrFullLength(value)
|
|
if (len <= this.limit) {
|
|
this.currentLimit = len
|
|
this.$emit('change', value)
|
|
} else {
|
|
const str = cutStrByFullLength(value, this.limit)
|
|
this.currentLimit = getStrFullLength(str)
|
|
this.$emit('change', str)
|
|
}
|
|
},
|
|
calcLimitNum (val) {
|
|
const len = getStrFullLength(val)
|
|
this.currentLimit = len
|
|
}
|
|
},
|
|
render () {
|
|
const { prefixCls, ...props } = this.$props
|
|
return (
|
|
<div class={this.prefixCls}>
|
|
<TextArea {...{ props }} value={this.value} onChange={this.handleChange}>
|
|
</TextArea>
|
|
<span class="limit">{this.currentLimit}/{this.limit}</span>
|
|
</div>
|
|
)
|
|
}
|
|
}
|