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
- 1
- 2
前往页