Element Input输入框的使用方法
5星 · 超过95%的资源 65 浏览量
2020-10-15
01:58:18
上传
评论
收藏 56KB PDF 举报 
Element Input输入框的使用方法输入框的使用方法
主要介绍了Element Input输入框的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有
一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文来源于Element官方文档：
http://element-cn.eleme.io/#/zh-CN/component/input
基础用法
带图标的输入框（属性方式）
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input2">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input21">
</el-input>
带图标的输入框（slot方式）
<el-input
placeholder="请选择日期"
v-model="input22">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input23">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
复合输入框
<div>
<el-input placeholder="请输入内容" v-model="input3">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div>
<el-input placeholder="请输入内容" v-model="input4">
<template slot="append">.com</template>
</el-input>
</div>
<div>
<el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
带提示的输入框
<el-autocomplete
class="inline-input"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
></el-autocomplete>
<el-autocomplete
popper-class="my-autocomplete"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i
weixin_38633967
- 粉丝: 7
- 资源: 931
最新资源
- PLC实验4-水塔水位控制模拟实验-实验手册的梯形图例程（基于STEP 7-MicroWIN SMART软件）
- STK 12.7 用户手册
- 深度学习之图像分类Transformer in Transformer(TNT)网络详解.docx
- 论文笔记RRU-Net The Ringed Residual U-Net for Image .docx
- CN-DS-N32A455 Series Datasheet V0.9.2.pdf
- 超分辨率综述.docx
- TNTTransformer in transformer论文精读.docx
- SpringData JPA笔记.docx
- Semantic-Agnostic Feature Learning Network with Auxiliary.docx
- PSCC-Net Progressive Spatio-Channel Correlation Network .docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页