elementUI 学习入门之 input 输入框

基础用法

 1 <el-input v-model="input1" palcehoder="请输入"></el-input>
 2 
 3 var Main = {
 4   data() {
 5     return {
 6       input1: ''
 7     }
 8   }
 9 }
10 var Ctor = Vue.extend(Main)
11 new Ctor().$mount('#app')

基础输入框

可指定不同的属性值对输入框进行设置

disabled ：输入框禁用；size：输入框大小（large、medium、small、mini）；clearable：可清空

带有 icon 的输入框

　　通过 prefix-icon 或 suffix 属性指定 input 组件头部或尾部显示图标。也可以通过 solt 方式来放置图标

　　1.属性方式

<el-input placeholder="请输入" v-model="input10" prefix-icon="el-icon-search"></el-input>
<el-input placeholder="请输入" v-model="input10" suffix-icon="el-icon-search"></el-input>

　　2.solt 方式

<el-input placeholder="请输入" v-model="input11"><i slot="prefix" class="el-input__icon el-icon-date"></i></el-input>
<el-input placeholder="请输入" v-model="input12"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input>

文本域

　　通过指定 type 属性值为 textarea。属性 autosize 可自适应文本高度的文本域，也可以通过 rows 属性指定文本域行高度

复合型输入框

　　前置或后置元素，一般为标签或按钮

　　通过 slot 指定在 input 中前置或后置的内容

 1 <div style="margin-top: 15px;">
 2   <el-input v-model="input11" placeholde="请输入">
 3     <label slot="append">.club</label>
 4   </el-input>
 5 </div>
 6 <div style="margin-top: 15px;">
 7   <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
 8     <el-select v-model="select" slot="prepend" placeholder="请选择">
 9       <el-option label="餐厅名" value="1"></el-option>
10       <el-option label="订单号" value="2"></el-option>
11       <el-option label="用户电话" value="3"></el-option>
12     </el-select>
13     <el-button slot="append" icon="el-icon-search"></el-button>
14   </el-input>
15 </div>

复合型输入框

带输入建议输入框

 1 <div id="app">
 2 <el-row class="demo-autocomplete">
 3   <el-col :span="12">
 4     <div class="sub-title">激活即列出输入建议</div>
 5     <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
 6   </el-col>
 7   <el-col :span="12">
 8     <div class="sub-title">输入后匹配输入建议</div>
 9     <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
10   </el-col>
11 </el-row>
12 </div>
13 
14 var Main = {
15     data() {
16       return {
17         restaurants: [],
18         state1: '',
19         state2: ''
20       };
21     },
22     methods: {
23       querySearch(queryString, cb) {
24         var restaurants = this.restaurants;
25         var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
26         // 调用 callback 返回建议列表的数据
27         cb(results);
28       },
29       createFilter(queryString) {
30         return (restaurant) => {
31           return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
32         };
33       },
34       loadAll() {
35         return [
36           { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
37           { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
38         ];
39       },
40       handleSelect(item) {
41         console.log(item);
42       }
43     },
44     mounted() {
45       this.restaurants = this.loadAll();
46     }
47   }
48 var Ctor = Vue.extend(Main)
49 new Ctor().$mount('#app')

建议输入框

 

原文地址：https://www.cnblogs.com/xsmile/p/10413544.html