element input组件常用属性用法

最新推荐文章于 2024-07-30 16:02:28 发布
最新推荐文章于 2024-07-30 16:02:28 发布
阅读量1.1w 收藏 28
点赞数 6
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangfeixiang001/article/details/120673680
版权

在vue项目中肯定会用到element组件库，里面的input组件的用法和常用属性如下：

**

1，type属性：用法跟原生输入框一样，例：type=“text”，type=“password”,进行输入框的类型设置

2，value 或 v-model：用于输入框内的数据进行双向数据绑定，例：value=“name”,或v-model=“name”

3，maxlength属性和minlength属性："maxlength"用于现在输入框最多输入的字符，同理 “minlength” 用于输入框最少输入的字符

4，placeholder属性：用于输入框内灰色的占位字符的设置，例：placeholder=“请输入用户名”

5，clearable属性：用于在输入框内末尾添加删除图标，可用于清空当前输入框内容，用法："< el-input clearable> < /el-input >",直接在标签内填入即可，或**"< el-input clearable = “true”> < /el-input >"**

6，show-password属性：用于输入框为密码框状态时使用的属性，可让密码框后添加小眼睛图标，可让输入的密码在*和内容来回切换，用法如clearable属性一样

7，disabled属性：用于禁用输入框，让输入框无法输入，用法如clearable属性一样

8，size属性：用于设置输入框大小，例："< el-input size=“medium”> < /el-input >" 值有三个“medium / small / mini”，分别对应大，中，小

9，prefix-icon属性和suffix-icon属性：用于在输入框头部添加图标，运用范围例子：用户登录页面账号输入框，使用方式**"< el-input prefix-icon=“el-icon-date”> < /el-input >"** ，el-icon-date为icon图标，suffix-icon属性同理，在输入框末尾添加图标

10，max属性和min属性：用于数字输入框的数字可输入值的最大值和最小值设置

yangfeixiang001
关注
  • 6
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
input的type属性
weixin_43748812的博客
11-24 3789
1.input的type 属性的新增值 1.概述 eamil 用于应该包含“e-mail"地址的输入框 url 用于应该包含“URL"地址的输入框 search 用于应该“搜索内容"的输入框 number 用于应该包含“数值"的输入控件 tel 规定显示的类型为“电话号码"的输入框 range 规定显示的类型为“数值选择范围"选择控件 color规定显示的类型为“颜色"选择控件 日期相关 1....
Element Input输入框的使用方法
10-15
本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model` 双向绑定数据，`placeholder` 设置占位文本。例如： ```html <el-input v-model=...
element-ui组件中input等的change事件中传递自定义参数
10-16
主要介绍了element-ui组件中的input等的change事件中传递自定义参数的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
el-select的clearable 属性的应用
guapilixianghe的博客
03-03 2004
是不行的，医生并没有清空，后来查看element-ui的时候看到了它的。那这样我们就可以利用这个属性来解决问题了。
ElementUI，el-input输入框max、min限制最大最小值失效
最新发布
anqiaoyun的博客
07-30 544
ElementUI，el-input输入框max、min限制最大最小值失效
el-input 用法
qq_33240556的博客
07-01 1045
可以通过添加style属性或外部 CSS 类来调整输入框的样式。
el-input限制输入整数等分析
Bruce__taotao的博客
11-22 1万+
input 限制输入在平时的需求比较常见，例如限制输入非数字，限制输入整数，限制输入的小数位数等等。这里分析下各种实现方式。使用自定义指令：你可以编写一个自定义指令，通过监听输入事件并验证输入内容，只允许输入整数。以下是一个简单的示例：
element-ui中的el-input组件和普通的input框type属性设置为number后,去掉上下箭头
Zh_0489的博客
06-22 354
element-ui中的el-input组件和普通的input框type属性设置为number后,去掉上下箭头
Element el-input 输入框详解
热门推荐
程序员大阳
02-02 7万+
1. 用途 输入框是使用非常多的元素，用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框，本篇就来了解下。 2. 输入框 输入框为el-input，其编译后生成的HTML元素为input，样式class中包含el-input，所以我们首先设定下统一样式，便于演示。 .el-input { width: 200px; } 2.1 输入框基本功能 输入框可以与js变量双向绑定，代码为： 输入框基本功能：双向绑定 <el-input v-model="input1
element-ui《input》输入框效验
码上红尘仙的博客
09-07 2109
element-ui《input》输入框效验
Element InputNumber计数器的使用方法
10-15
计数器的使用方法的文章就介绍到这里了，Element UI 的 InputNumber 组件是一个非常实用的元素，用于创建可增减数值的输入框。这个组件在前端开发中常用于处理需要精确控制数字输入的场景，例如商品数量选择、评分等...
vue基于element的区间选择组件
10-18
这两个输入框可以使用 Element UI 的 `el-input` 组件实现，并通过 `v-model` 双向绑定到 Vue 数据模型上。表单的结构如下： ```html <el-input v-model="form.min" /> <!-- ... --> <el-input v-model=...
el-input添加属性clearable后样式（宽）发生变化
weixin_49516521的博客
03-15 3214
检查发现，element 中clearable图标是用span包裹起来的，我的代码结构中 标题也是用span包裹起来的，并且统一设置了li下面的span的样式。而clearable也刚好在li下面，所以也被更改了。el-input添加属性clearable之前，宽都是一样的，在项目中并没有设置过input相关的样式， 在添加完属性，输入内容后宽发生了变化，并且清除的图标位置也往前偏。解决：选择li下面的子元素span，并把input的宽度设置成加上clearable之后的宽。今天就来简单记录个小问题吧，
element js 包含字符_谈谈 Element 文档中的 Markdown 解析
weixin_39796752的博客
11-23 207
题图来自 Plush Design StudioElement 的文档站与普通的 web 项目开发并无二致，只不过我们把 Markdown 当成 Vue 组件来使用。在文档中，我们还编写了许多示例去描述组件的用法。在编写示例代码时，我们还有这两个需求：示例代码格与单文件组件保持一致示例代码像组件一样在页面中渲染原生的 Markdown 不具备上述功能。因此，势必要对 Markdown 进行特殊的订...
vue Input
ycc15179643695的博客
10-23 2619
vue Input 默认选中以及手写获取焦点指令 双向绑定 v-model="createName" 获取焦点指令 import Vue from 'vue' Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() }, //也可以用
vue获取input的属性_vuejs 中如何优雅的获取 Input 值
weixin_39716160的博客
12-19 472
原生 js使用 getElementById 比较麻烦的地方需要为元素设置 id设置 id 之后，无法复用，因为一个页面中不能存在两个相同的 id双向绑定 v-model分两种情况input 默认为空。这种情况使用 v-model 最方便，通过 this.inputName 即可获取到对应的值。input 有默认值。即，设置了 value 属性的 Input。这种情况不能使用 v-model。否则...
elementui 之input 框总结
zhouzhiwengang的专栏
02-16 1万+
1.elementUI的input框，需要用v-model绑定一个变量，这个变量相当于原生input框的value 2.placeholder属性和原生的一样 <!-- v-model相当于input里的value,必须绑定 --> <el-input v-model="test" placeholder="请输入内容"></el-input> 3.禁用el-input，绑定一个disabled属性即可 <!-- 禁用el-input -->
el-input限制输入正整数
weixin_57246351的博客
02-25 5707
在上述代码中，@input事件绑定了handleInput方法，该方法使用正则表达式将非数字字符替换为空字符串，从而实现只能输入数字的效果。
input 中新增加的type类型
止水Itachi
03-17 751
input 中新增加的type类型 type="email" 请输入邮箱地址 type="url" 请输入网址 type="range" 滑块 type="number" 请输入数字 type="search" 搜索表单 type="color" 生成颜色表单 作为了解 type=“time” 限制用户必须输入时间类型 ...
分析下element input 源码
03-26
Element Input 是基于 Web Components 技术开发的组件，实现了 input 元素的功能，具体的源码分析如下： 1. 构造函数 Element Input 的构造函数首先调用了 HTMLElement 的构造函数，然后定义了一些属性和方法，以及绑定了一些事件。 ```javascript class ElementInput extends HTMLElement { constructor() { super(); this.shadow = this.attachShadow({ mode: 'open' }); // 创建影子DOM this.shadow.innerHTML = ` <style> :host { display: inline-block; } input { // input元素的样式 } </style> <input type="text"> `; this.input = this.shadow.querySelector('input'); this.handleChange = this.handleChange.bind(this); this.handleBlur = this.handleBlur.bind(this); } // 组件的其他属性和方法 } ``` 2. 属性和方法 Element Input 定义了一些属性和方法，供外界调用和修改。其中，最重要的是 value 属性和 setValue 方法，用于设置和获取 input 元素的值。 ```javascript class ElementInput extends HTMLElement { constructor() { // ... this._value = ''; Object.defineProperty(this, 'value', { get: () => this._value, set: (value) => this.setValue(value), }); } setValue(value) { this._value = value; this.input.value = value; } // ... } ``` 3. 事件处理 Element Input 绑定了一些 input 元素的事件，以便在用户输入或失焦时做出相应的处理。其中，最重要的是 change 和 blur 事件，用于在用户完成输入后更新组件的值。 ```javascript class ElementInput extends HTMLElement { constructor() { // ... this.input.addEventListener('input', this.handleChange); this.input.addEventListener('change', this.handleChange); this.input.addEventListener('blur', this.handleBlur); } handleChange(event) { this.setValue(event.target.value); this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value, }, })); } handleBlur(event) { this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value, }, })); } // ... } ``` 4. 注册组件 最后，Element Input 调用了 customElements.define 方法，将组件注册到自定义元素中。 ```javascript customElements.define('element-input', ElementInput); ``` 通过这种方式，Element Input 就成为了一个可在 HTML 中使用的自定义元素，可以像使用其他元素一样来调用。例如： ```html <element-input></element-input> ``` 这样就可以在页面中使用 Element Input 组件了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值