textarea右下角有字数计算

最新推荐文章于 2025-02-15 15:58:36 发布

qq_45894929

最新推荐文章于 2025-02-15 15:58:36 发布

阅读量797

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_45894929/article/details/118570317

版权

vue 专栏收录该内容

18 篇文章

订阅专栏

这是一个关于前端开发的示例，展示了如何在作品简介输入框中使用`el-form-item`和`el-input`组件。通过`v-model`双向绑定内容并监听`@input`事件更新字符计数`number`，同时用绝对定位显示剩余字符数。代码片段包含了样式定义，确保计数器在底部右侧显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

   <el-form-item label="作品简介" prop="content" class="content">
        <el-input
          type="textarea"
          v-model="ruleForm.content"
          @input="descInput($event)"
          maxlength="200"
        ></el-input>
        <div class="number">{{ number }}/200</div>
      </el-form-item>

   descInput(e) {
      this.number = e.length;
    },

    .content {
      position: relative;
      .number {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #999999;
        position: absolute;
        right: 8px;
        bottom: -2px;
      }
    }