elementUI学习入门之input输入框

基础用法

1
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.属性方式

　　2.solt 方式

文本域

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

复合型输入框

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

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

1

6
复合型输入框

带输入建议输入框

1

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')
建议输入框