elementUI 学习入门之 input 输入框

基础用法

 <el-input v-model="input1" palcehoder="请输入"></el-input>

 var Main = {
   data() {
     return {
       input1: ''
     }
   }
 }
 var Ctor = Vue.extend(Main)
 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 中前置或后置的内容

 <div style="margin-top: 15px;">
   <el-input v-model="input11" placeholde="请输入">
     <label slot="append">.club</label>
   </el-input>
 </div>
 <div style="margin-top: 15px;">
   <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>

复合型输入框

带输入建议输入框

 <div id="app">
 <el-row class="demo-autocomplete">
   <el-col :span="12">
     <div class="sub-title">激活即列出输入建议</div>
     <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
   </el-col>
   <el-col :span="12">
     <div class="sub-title">输入后匹配输入建议</div>
     <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
   </el-col>
 </el-row>
 </div>

 var Main = {
     data() {
       return {
         restaurants: [],
         state1: '',
         state2: ''
       };
     },
     methods: {
       querySearch(queryString, cb) {
         var restaurants = this.restaurants;
         var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
         // 调用 callback 返回建议列表的数据
         cb(results);
       },
       createFilter(queryString) {
         return (restaurant) => {
           return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
         return [
           { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
           { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
         ];
       },
       handleSelect(item) {
         console.log(item);
       }
     },
     mounted() {
       this.restaurants = this.loadAll();
     }
   }
 var Ctor = Vue.extend(Main)
 new Ctor().$mount('#app')

建议输入框