vue elementui 中带字数校验的 textarea组件封装

在form表单中经常会遇到带字数校验的textarea需求，具体效果如下图所示，实现的功能如下：

1. 右下角有最大的字数限制
2. 实时计算文本框内输入的字数
3. 在超过最大字数时自动截断

下面我们看一下，希望存在一个如下控件可以供我们使用

    <el-form-item label="其它反馈意见:" prop="others">
      <text-area v-model="form.others" :max-length="maxLength" :rows="3"/>
    </el-form-item>

TextArea.vue 实现代码如下：

<template>
  <div>
    <el-input v-model="textAreaVal" class="text-area" type="textarea" clearable :rows="row" @input="handleInputChange" />
    <span class="remain-word">{{ valueLength }}/{{ maxLength }}</span>
  </div>
</template>

<script>
const isEmpty = (str) => {
  if (str === '' || str === undefined || str === null) {
    return true
  }
  return false
}

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    row: {
      type: Number,
      default: 3
    },
    maxLength: {
      type: Number,
      default: 512
    }
  },
  data() {
    return {
      textAreaVal: ''
    }
  },
  computed: {
  	// 计算当前文本框中内容的字数
    valueLength() {
      if (isEmpty(this.textAreaVal)) {
        return 0
      }
      return this.textAreaVal.length
    }
  },
  watch: {
  	// 监听value的变化
    value: {
      handler(val, oldVal) {
        this.textAreaVal = val
      },
      immediate: true
    }
  },
  methods: {
  	// 计算textAreaVal值，超过最大值则直接截断
    handleInputChange() {
      this.textAreaVal = this.textAreaVal.substring(0, this.maxLength)
      this.$emit('change', this.textAreaVal)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .text-area {
  padding-bottom: 24px;
  border: 1px solid;
  border-color: #dcdfe6;
  border-radius: 4px;
  .el-textarea__inner {
    border: none;
  }
}

.remain-word {
  position: absolute;
  right: 24px;
  bottom: -8px;
}
</style>

上面的控件只是简单的提供了el-input的一个row属性，如果我们还需要设置el-input的其他属性要怎么办呢？ 我们可以使用$attrs和$attrs和listeners"
v-bind=“$attrs" 用于绑定属性， v-on="$attrs"用于绑定属性，v−on="listeners” 用于绑定事件
改进方案如下：

  <div>
    <el-input 
    v-model="textAreaVal" 
    class="text-area" 
    type="textarea" 
    clearable 
    :rows="row" 
    v-bind="$attrs" 
    v-on="$listeners" 
    @input="handleInputChange" 
    />
    <span class="remain-word">{{ valueLength }}/{{ maxLength }}</span>
  </div>

这样我们在使用的时候就只需要把TextArea.vue当成是普通的el-input 组件来使用啦：）