| commit | author | age | ||
| 9bcb19 | 1 | import './style.less' |
| I | 2 | import { getStrFullLength, cutStrByFullLength } from '../_util/util' |
| 3 | import Input from 'ant-design-vue/es/input' | |
| 4 | const TextArea = Input.TextArea | |
| 5 | ||
| 6 | export default { | |
| 7 | name: 'LimitTextArea', | |
| 8 | model: { | |
| 9 | prop: 'value', | |
| 10 | event: 'change' | |
| 11 | }, | |
| 12 | props: Object.assign({}, TextArea.props, { | |
| 13 | prefixCls: { | |
| 14 | type: String, | |
| 15 | default: 'ant-textarea-limit' | |
| 16 | }, | |
| 17 | // eslint-disable-next-line | |
| 18 | value: { | |
| 19 | type: String | |
| 20 | }, | |
| 21 | limit: { | |
| 22 | type: Number, | |
| 23 | default: 200 | |
| 24 | } | |
| 25 | }), | |
| 26 | data () { | |
| 27 | return { | |
| 28 | currentLimit: 0 | |
| 29 | } | |
| 30 | }, | |
| 31 | watch: { | |
| 32 | value (val) { | |
| 33 | this.calcLimitNum(val) | |
| 34 | } | |
| 35 | }, | |
| 36 | created () { | |
| 37 | this.calcLimitNum(this.value) | |
| 38 | }, | |
| 39 | methods: { | |
| 40 | handleChange (e) { | |
| 41 | const value = e.target.value | |
| 42 | const len = getStrFullLength(value) | |
| 43 | if (len <= this.limit) { | |
| 44 | this.currentLimit = len | |
| 45 | this.$emit('change', value) | |
| 46 | return | |
| 47 | } else { | |
| 48 | const str = cutStrByFullLength(value, this.limit) | |
| 49 | this.currentLimit = getStrFullLength(str) | |
| 50 | this.$emit('change', str) | |
| 51 | } | |
| 52 | console.error('limit out! currentLimit:', this.currentLimit) | |
| 53 | }, | |
| 54 | calcLimitNum (val) { | |
| 55 | const len = getStrFullLength(val) | |
| 56 | this.currentLimit = len | |
| 57 | } | |
| 58 | }, | |
| 59 | render () { | |
| 60 | const { prefixCls, ...props } = this.$props | |
| 61 | return ( | |
| 62 | <div class={this.prefixCls}> | |
| 63 | <TextArea {...{ props }} value={this.value} onChange={this.handleChange}> | |
| 64 | </TextArea> | |
| 65 | <span class="limit">{this.currentLimit}/{this.limit}</span> | |
| 66 | </div> | |
| 67 | ) | |
| 68 | } | |
| 69 | } | |
