Element el |
您所在的位置:网站首页 › el-input输入限制 › Element el |
点此查看全部文字教程、视频教程、源代码 本文目录 1. 用途2. 输入框2.1 输入框基本功能2.2 显示占位文本2.3 禁用2.4 可清空的输入框2.5 显示密码框2.6 显示图标2.7 输入长度限制 3. 文本域 1. 用途输入框是使用非常多的元素,用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框,本篇就来了解下。 2. 输入框输入框为el-input,其编译后生成的HTML元素为input,样式class中包含el-input,所以我们首先设定下统一样式,便于演示。 .el-input { width: 200px; } 2.1 输入框基本功能输入框可以与js变量双向绑定,代码为: 输入框基本功能:双向绑定 输入内容为:{{input1}}效果如下: 2.2 显示占位文本占位文本可以在输入框内容未输入时显示提示信息。 输入框功能1:显示占位文本 2.3 禁用可以使用disabled属性禁用输入框。 输入框功能2:禁用 2.4 可清空的输入框可以使用clearable属性提供可清空功能,当输入框中已有内容时即显示一个清空按钮,点击清空按钮后直接清空文本框。 输入框功能3:可清空 2.5 显示密码框可以通过show-password属性将输入框显示为密码框。 输入框功能4:显示为密码框 2.6 显示图标可以通过prefix-icon或suffix-icon属性为输入框设置显示在前方/后方的图标。 输入框功能5:显示图标 2.7 输入长度限制可以设置输入长度的上限。 输入框功能6:输入长度限制 3. 文本域可以使用type="textarea"将输入框转换为文本域,注意文本域编译后对应HTML类型为,对应样式为el-textarea,所以我们CSS部分设置为: .el-textarea { width: 400px; }HTML代码: 文本域基本功能:显示多行文本效果: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |