兼容elementUI低版本:文本域字数限制

公司维护的项目使用的是elementUI最早的1.x版本的,文本域不支持show-word-limit属性

解决:

        <el-form-item label="申请理由">
          <el-input v-model="formData.applycontent" type="textarea" :autosize="{ minRows:3, maxRows: 5}" placeholder="请输入申请理由" :maxlength='200' />
          <spanclass="strLimit">{{strLimit}}/200</span>
        </el-form-item>
      strLimit: 0 // 申请理由字数
  watch: {
    'formData.applycontent': {
      handler(val) {
        this.strLimit = val.length
      },
      immediate: true
    }
  }
复制代码
      .el-form-item {
        .strLimit {
          position: absolute;
          right: 10px;
          bottom: 5px;
          line-height: 1;
          color: #999;
        }
      }
复制代码

 

posted @   吴小明-  阅读(416)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
历史上的今天:
2020-12-07 二进制流学习-Blob、ArrayBuffer、File、FileReader和FormData的区别
2020-12-07 前端vue以数据流方式导出word----借助 jquery
2019-12-07 input type属性为number时,去掉右边的上下箭头
点击右上角即可分享
微信分享提示