Element UI学习2--input输入框

最新推荐文章于 2024-06-12 08:00:00 发布

爱喝奶茶的小韩

最新推荐文章于 2024-06-12 08:00:00 发布

阅读量1k

点赞数

分类专栏： element ui vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/hanrabbit/article/details/112278419

版权

这篇博客详细介绍了Element UI中的input输入框组件的多种用法，包括基础用法、禁用状态、可清空功能、密码框、带icon的输入框、文本域、可自适应高度的文本域、复合型输入框以及输入长度限制，提供了丰富的示例和截图。

摘要由CSDN通过智能技术生成

1、基础用法

<template>
   <div>
       <el-input v-model="input" placeholder="请输入内容"></el-input>
   </div>
</template>

<script>
export default {
   
    name:'input',
    data(){
   
        return{
   
           input:''
        }
    }
    
}
</script>

如图：
在这里插入图片描述
2、禁用状态
通过 disabled 属性指定是否禁用 input 组件

<el-input 
v-model="input" 
placeholder="请输入内容" 
:disabled="true">
</el-input>

如图：
在这里插入图片描述
3、可清空
使用clearable属性即可得到一个可清空的输入框

<el-input 
v-model="input" 
placeholder="请输入内容" 
clearable>
</el-input>

如图：
在这里插入图片描述
4、密码框
使用show-password属性即可得到一个可切换显示隐藏的密码框

 <el-input 
 placeholder="请输入密码" 
 v-model="input" 
 show-password>
 </el-input

关注

专栏目录