feat: add TextArea

src/components/TextArea/index.jsx

@@ -0,0 +1,69 @@
+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
+      let len = getStrFullLength(value)
+      if (len <= this.limit) {
+        this.currentLimit = len
+        this.$emit('change', value)
+        return
+      } else {
+        const str = cutStrByFullLength(value, this.limit)
+        this.currentLimit = getStrFullLength(str)
+        this.$emit('change', str)
+      }
+      console.error('limit out! currentLimit:', this.currentLimit)
+    },
+    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>
+    )
+  }
+}

src/components/TextArea/style.less

@@ -0,0 +1,12 @@
+.ant-textarea-limit {
+  position: relative;
+
+  .limit {
+    position: absolute;
+    color: #909399;
+    background: #fff;
+    font-size: 12px;
+    bottom: 5px;
+    right: 10px;
+  }
+}