inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
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 }