Element-ui 中设置input中字符长度并提示，vue

最新推荐文章于 2024-05-11 16:28:06 发布
最新推荐文章于 2024-05-11 16:28:06 发布
阅读量1.1w 收藏 8
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/candybaby1223/article/details/106994328
版权
需求如下规定设置的字符串，如有超过会有提示。代码如下 <el-row> <el-col :span="24"> <el-form-item prop="vacationNote" label="法假备注"> <el-input v-model="dataForm.vacationNote" placeholder="法假备注" clearable></el-input>
摘要由CSDN通过智能技术生成

需求如下
规定设置的字符串，如有超过会有提示。
在这里插入图片描述
代码如下

 <el-row>
        <el-col :span="24">
          <el-form-item prop="vacationNote" label="法假备注">
最低0.47元/天 解锁文章
candybaby1223
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 利用Tooltip提示框实现动态显示文字提示
weixin_44283571的博客
09-28 9472
利用element的提示框来实现动态显示循环的数据，效果图如下： 这里的四个项都是通过循环数组来展示出来的，需要用Tooltip提示框将代码包裹起来就可以达到此效果，代码如下： HTML: <div v-for="(item,index) in choice" :key="index" class="equipmentname center2"> <i class="el-icon-circle-close" style="margin:0 10px 0 1
vue中使用element-ui进行表单验证的实例代码
08-27
Vue 中使用 Element-UI 进行表单验证是许多开发者所面临的挑战，本文将详细介绍如何使用 Element-UI 进行表单验证，并提供了实例代码供参考。 一、简单逻辑验证（直接使用 rules） 在使用 Element-UI 进行表单验证...
element-vue 如何在文本框后添加文字
George_huhu的博客
12-08 1万+
vue-element 文章目录vue-element前言一、怎么做？1.示例代码2.结果图片 前言 在我们设计前端页面时，总会使用input输入框，当你要输入某些固定单位时，如何在输入框后固定单位呢？。 一、怎么做？ 1.示例代码 代码如下（示例）： <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="公里数" prop="cMile"
el-input实现尾部加字
weixin_43923808的博客
06-24 3433
element
el-input输入框根据字节限制输入长度（中文占两字节，数字英文占一字节）
qq_41518803的博客
05-11 779
需求：某个字段需要限制输出长度 字符长度小于64个VARCHAR2(64)，这一眼就看出来是数据库的限制，数据库是根据字节做的限制，而前端组件el-input的限制长度（maxlength）只能限制字符串的长度，无法直接限制字节，所以我封装了一个方法，以下是具体代码。我把这个方法封装在通用方法中 commonUtils.js，下面是commonUtils.js的代码。在main.js引用，然后注入到原型，以后可以直接使用该方法。
element-ui输入框（el-input）前缀图标和后缀图标 并添加点击事件（vue3 插槽）
m0_66572664的博客
09-22 3009
vue3 el-input添加搜索图标 并给图标绑定click事件
给 el-input 设置内容长度的方法
逆风优雅的博客
07-21 1万+
首先，我们都知道，限制input文本框的输入长度的，可以通过给这个元素加上maxlength的属性来实现 <input type="text" value="我是一个输入框" maxlength="5" /> <!-- 此时在文本框中输入的内容只能限制在5个字符 --> 但是，在饿了么框架中，我们想要设置el-input 输入框的长度，使用maxlength,就是无效的，解决的方法是，给这个输入框加上一个oninput属性 <el-input type="te..
Vue el-input限制输入的字符（多种情况 进来看吧）
梁小茹的博客
02-15 7987
通过@input 只能输入英文大小写和数字 及最大长度maxlength <el-form-item label="经营许可证号" prop="businessCertificate"> <el-input v-model="tableList.businessCertificate" maxlength="50" plac
element输入框文本超出悬浮提示
lay7889的博客
01-13 1387
element输入框文本超出悬浮提示
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
12-29
link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css rel=external nofollow > </head> <body > <!--此处model的abc 要是下面input 绑定的对象名称, ref 要和...
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
vue + el-input 中 textarea 实现 placeholder 换行
最新发布
06-14
在Vue.js项目中，Element UI 是一个常用的设计组件库，提供了丰富的UI组件，包括`el-input`，这个组件可以用来创建输入框。当涉及到多行文本输入时，`textarea`元素通常会比`input`更合适。在这个场景下，我们可能会...
input标签
gf_lvah的博客
08-09 786
想要开发一个自动化运维系统，学习Html，Css和JavaScript是不可避免的
vue之element输入框限制长度并显示输入字数
琅枫的博客
09-09 2253
maxlength和minlength是属性长度，使用限制输入框的字符长度，其中字符长度是使用 Javascript 的字符串属性长度统计的。对于类型为text或textarea输入框，在使用maxlength限制最大输入长度的同时，可通过设置show-word-limit属性来展示字数统计。
vue element el-input 输入框当内容长度超出时现示el-tooltip提示
周家大小姐
04-24 1万+
选择专员的时候,会发送请求;请求的结果会进入寿险机构:要判断内容会不会过长;如果过长就显示提示状态 html; <el-form-item label="派驻寿险机构" prop="lifeComName"> <el-tooltip :disabled="disabledTooltip" effect="dark" :content...
el-input 显示最大长度和已输入内容长度
前端笔记——放弃很容易,但坚持一定很酷
01-30 1333
属性限制最大输入长度的同时，可通过设置。属性来展示字数统计。
关于element的input输入框 ---- 带输入提示
id_dimu的博客
04-22 1万+
<el-autocomplete v-model="data" placeholder="请输入内容" :fecth-suggestions="querySearch" @select="mySelect"></el-autocomplete> querySearch(queryString,cb){...
Vue及ElementUI中自定义指令实现判断文本内容超出显示省略号和el-tooltip提示，不超出则禁用el-tooltip
楚楚梦厦的博客
06-13 7227
Vue框架中在使用elementUI插件时，判断文本内容是否超出，超出则展示省略号和el-tooltip，不超出则禁止hover展示el-tooltip。即移除没有超出的文案的el-tooltip，因为已经完整的展示文案了，hover的tooltip提示就没有必要了.........
el-input长度的设置
热门推荐
weixin_39249427的博客
03-16 3万+
直接设置宽度大小，不具响应式 问题？ 先设置label-width，设置的是你的el-form-itemlabel所占宽度，如下方 <divclass="search"> <el-form:inline="true":model="applyRecord"class="demo-form-inline"ref="refname"label...
vue中element-ui清除表单校验
05-24
在vue中使用element-ui进行表单校验时，可以通过调用`this.$refs.formName.resetFields()`来清除表单的校验状态。其中`formName`为表单的ref属性值。 示例代码如下： ```html <template> <el-form :model="form" :rules="rules" ref="myForm" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('myForm')">提交</el-button> <el-button @click="resetForm('myForm')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log('表单校验通过') } else { console.log('表单校验失败') } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } } </script> ``` 注意，在调用`resetFields()`之前，需要确保该表单已经被挂载到了DOM上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值