input 改写成最多输入多少条内容

最新推荐文章于 2024-10-04 17:24:00 发布

csstmg

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量126

点赞数 1

文章标签：前端 vue

本文链接：https://blog.csdn.net/csstmg/article/details/141934121

版权

在这里插入图片描述


 <el-form-item label="关键字" prop="keywordArray">
        <div class="keyword-input">
          <el-input
            v-model="form.keywordArray"
            type="textarea"
            :placeholder="`1、最多支持50个关键字，每个关键字最多支持30个字，默认1行是1个关键字\n2、可通过换行完成批量设置\n3、举例：\n价格\n什么价\到手多少钱`"
            rows="6"
            show-word-limit
            @input="keywordArrayInput" />
          <span class="limit">
            {{ form.keywordArray.split('\n').filter(i => i).length }}条/50条
          </span>
        </div>
      </el-form-item>


 keywordArrayInput(e) {
      this.form.keywordArray = (e||'').split('\n').map(str => str.substr(0, 30)).join('\n')
    },


<style lang="scss" scoped>

.keyword-input{
    position: relative;
    /deep/ .el-textarea{
      textarea{
        padding-bottom: 30px;
      }
    }
    .limit{
      position: absolute;
      bottom: 5px;
      right: 12px;
      font-size: 12px;
      color: #86909C;
      line-height: 20px;
    }
  }
  </style>