elementui 限制输入字数

最新推荐文章于 2024-05-11 16:28:06 发布

古迪红尘

最新推荐文章于 2024-05-11 16:28:06 发布

阅读量855

点赞数

分类专栏： VUE 文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/weixin_57246351/article/details/125545636

版权

VUE 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<template>
  <div>
    <div class="rejectedPoPMain">
      <div class="rejectedPoPMainCenter">
        <div class="instructionsLeft">说明:</div>

        <div class="instructionsRight">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请说明复议原因"
            v-model="reviewTextarea"
            :maxlength="200"
          >
          </el-input>

          <p class="instructionNum">
            您还可以输入{{ 200 - reviewTextarea.length }}字
          </p>
        </div>
      </div>

      <div class="submitBtn">
        <button class="btnSubmit" @click="mendCollectDiaBtn()">提交</button>
      </div>
      <el-form
        ref="entryregistration"
        :model="entryregistration"
        label-width="80px"
      >
        <el-form-item label="项目名称" :required="true">
          <el-input
            v-model="entryregistration.projectname"
            @input="projectNameInput"
            style="width: 500px"
            maxlength="50"
            placeholder="简洁清晰,不多于50字"
            clearable
            @
          ></el-input>
          <div style="padding-left: 5px; color: gray">
            字数限制:{{ enter=='' ? "0":enter }}/50
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import elForm from '../组件库/CSDN/el-form.vue'
export default {
  // components: { elForm },
  data() {
    return {
      reviewTextarea: '',
      enter: '', // 项目名称输入字数
      entryregistration: {
        projectname: ''
      }
    }
  },
  methods: {
    mendCollectDiaBtn() {
      console.log('aa')
    },
    projectNameInput() {
      var Val = this.entryregistration.projectname.length
      this.enter = Val
    }
  }
}
</script>

<style></style>