element-ui input-textarea 提示自定义改造

 element-ui input-textarea组件官方地址Element - The world's most popular Vue UI framework

 

该组件，运用在现实场景中依旧不满足甲方的胃口。

改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀~改呀!

1.展示个数，

2.到达最大个数不可输入，

3.继续输入时提示最大字数

效果展示：

完整代码实现

<template>
<div>
  <el-input
    :type="typeInput?'':'textarea'"
    :placeholder="placeholderData"
    v-model="text"
    v-on:input="inputChange"
  >
  </el-input>
  <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
                <span class="el-input__count">
                    <span class="el-input__count-inner" :style="typeInput?'':'margin-top: 100%;'">
                        {{text===null?0:text.length}}/{{maxlength}}
                    </span>
                </span>
            </span>
        </span>
  <span v-show="showSpan" class="spanClass">{{placeholderData}}</span>
</div>
</template>

<script>
export default {
  props:{
    typeInput:{
      type:Boolean
    },
    valueData:{
      type:String,
      default:''
    },
    placeholderData:{
      type:String
    },
    maxlength:{
      type: Number
    }
  },
  data() {
    return {
      text: '',
      showSpan:false
    }
  },
  mounted() {
    this.$nextTick(() => {
      let obj;
      if(this.valueData){
        obj={
          data:this.valueData
        }
      }else {
        obj={
          data:''
        }
      }
      this.text=JSON.parse(JSON.stringify(obj)).data
      this.$forceUpdate()
    })

  },
  watch:{
    valueData: {
      handler (newValue, oldValue) {
        let obj ={
          data:newValue
        }
        this.text=JSON.parse(JSON.stringify(obj)).data
        this.$forceUpdate()
      },
      deep: true
    }
  },
  methods:{
    inputChange(val) {
      if(val.length>this.maxlength){
        this.text=val.slice(0,this.maxlength)
        this.showSpan=true
      }else {
        this.showSpan=false
      }
      this.$emit('inputData',this.text)
    }
  }
}
</script>

<style scoped>
.spanClass {
  color: #F56C6C;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
}
.inputWord /deep/{
  position: relative;
.el-input__inner{
  padding-right: 80px;
}
}
.el-input__suffix{
  position: absolute;
  height: 100%;
  right: 5px;
  top: 0;
  text-align: center;
  color: #c0c4cc;
  transition: all .3s;
  pointer-events: none;
}
.el-input__count { background-color: transparent;
  bottom: 37px;
  height: 100%;

  align-items: center;
  color: #909399;
  font-size: 12px;
}
.el-input__count-inner {
  margin-right: 10%;
  background: #fff;
  line-height: normal;
  display: inline-block;
}

</style>

 代码引用

<els-textarea  :typeInput="false"  :valueData="data" @inputData="data=$event"  :maxlength="200" :placeholderData="'数据（内容200字以内）'"></els-textarea>