1. Input输入框
1.1. 通过鼠标或键盘输入字符。
1.2. 输入框属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| type | 类型 | string | text, textarea和其他原生input的type值 | text |
| value / v-model | 绑定值 | string / number | 无 | 无 |
| maxlength | 原生属性, 最大输入长度 | number | 无 | 无 |
| minlength | 原生属性, 最小输入长度 | number | 无 | 无 |
| show-word-limit | 是否显示输入字数统计, 只在type = "text"或type = "textarea"时有效 | boolean | 无 | false |
| placeholder | 输入框占位文本 | string | 无 | 无 |
| clearable | 是否可清空 | boolean | 无 | false |
| show-password | 是否显示切换密码图标 | boolean | 无 | false |
| disabled | 禁用 | boolean | 无 | false |
| size | 输入框尺寸, 只在type != "textarea"时有效 | string | medium / small / mini | 无 |
| prefix-icon | 输入框头部图标 | string | 无 | 无 |
| suffix-icon | 输入框尾部图标 | string | 无 | 无 |
| rows | 输入框行数, 只对type="textarea"有效 | number | 无 | 2 |
| autosize | 自适应内容高度, 只对type = "textarea"有效, 可传入对象, 如: { minRows: 2, maxRows: 6 } | boolean / object | 无 | false |
| autocomplete | 原生属性, 自动补全 | string | on, off | off |
| name | 原生属性 | string | 无 | 无 |
| readonly | 原生属性, 是否只读 | boolean | 无 | false |
| max | 原生属性, 设置最大值 | number / date | 无 | 无 |
| min | 原生属性, 设置最小值 | number / date | 无 | 无 |
| step | 原生属性, 设置输入字段的合法数字间隔 | number | 无 | 无 |
| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | 无 |
| autofocus | 原生属性, 自动获取焦点 | boolean | true, false | false |
| form | 原生属性 | string | 无 | 无 |
| tabindex | 输入框的tabindex | string | 无 | 无 |
| validate-event | 输入时是否触发表单的校验 | boolean | 无 | true |
| label | 输入框关联的label文字 | string | 无 | 无 |
1.3. 输入框插槽
| name | 说明 |
| prefix | 输入框头部内容, 只对type="text"有效 |
| suffix | 输入框尾部内容, 只对type="text"有效 |
| prepend | 输入框前置内容, 只对type="text"有效 |
| append | 输入框后置内容, 只对type="text"有效 |
1.4. 输入框事件
| 事件名称 | 说明 | 回调参数 |
| blur | 在Input失去焦点时触发 | (event: Event) |
| focus | 在Input获得焦点时触发 | (event: Event) |
| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string | number) |
| input | 在Input值改变时触发 | (value: string | number) |
| clear | 在点击由clearable属性生成的清空按钮时触发 | 无 |
1.5. 输入框方法
| 事件名称 | 说明 |
| blur | 在Input失去焦点 |
| focus | 在Input获得焦点 |
| select | 选中input中的文字 |
1.6. Autocomplete属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| placeholder | 输入框占位文本 | string | 无 | 无 |
| disabled | 禁用 | boolean | 无 | false |
| value-key | 输入建议对象中用于显示的键名 | string | 无 | value |
| value | 必填值, 输入绑定值 | string | 无 | 无 |
| debounce | 获取输入建议的去抖延时 | number | 无 | 300 |
| placement | 菜单弹出位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| fetch-suggestions | 返回输入建议的方法, 仅当你的输入建议数据resolve时, 通过调用callback(data:[])来返回它 | Function(queryString, callback) | 无 | 无 |
| popper-class | Autocomplete下拉列表的类名 | string | 无 | 无 |
| trigger-on-focus | 是否在输入框focus时显示建议列表 | boolean | 无 | true |
| name | 原生属性 | string | 无 | 无 |
| select-when-unmatched | 在输入没有任何匹配建议的情况下, 按下回车是否触发select事件 | boolean | 无 | false |
| label | 输入框关联的label文字 | string | 无 | 无 |
| prefix-icon | 输入框头部图标 | string | 无 | 无 |
| suffix-icon | 输入框尾部图标 | string | 无 | 无 |
| hide-loading | 是否隐藏远程加载时的加载图标 | boolean | 无 | false |
| popper-append-to-body | 是否将下拉列表插入至body元素。在下拉列表的定位出现问题时, 可将该属性设置为false | boolean | 无 | true |
| highlight-first-item | 是否默认突出显示远程搜索建议中的第一项 | boolean | 无 | false |
1.7. Autocomplete插槽
| name | 说明 |
| prefix | 输入框头部内容 |
| suffix | 输入框尾部内容 |
| prepend | 输入框前置内容 |
| append | 输入框后置内容 |
1.8. Autocomplete Scoped Slot
| name | 说明 |
| slot-scope | 自定义输入建议, 参数为{ item } |
1.9. Autocomplete事件
| 事件名称 | 说明 | 回调参数 |
| select | 点击选中建议项时触发 | 选中建议项 |
| change | 在Input值改变时触发 | (value: string | number) |
1.10. Autocomplete方法
| 事件名称 | 说明 |
| focus | 在Input获得焦点 |
2. Input输入框例子
2.1. 使用脚手架新建一个名为element-ui-input的前端项目, 同时安装Element插件。
2.2. 编写index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Input from '../components/Input.vue'
import Textarea from '../components/Textarea.vue'
import Autocomplete from '../components/Autocomplete.vue'
import TemplateAutocomplete from '../components/TemplateAutocomplete.vue'
import QuerySearchAsync from '../components/QuerySearchAsync.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/Input' },
{ path: '/Input', component: Input },
{ path: '/Textarea', component: Textarea },
{ path: '/Autocomplete', component: Autocomplete },
{ path: '/TemplateAutocomplete', component: TemplateAutocomplete },
{ path: '/QuerySearchAsync', component: QuerySearchAsync }
]
const router = new VueRouter({
routes
})
export default router2.3. 在components下创建Input.vue
<template>
<div>
<h1>基础用法</h1>
<el-input v-model="base_input" placeholder="请输入内容" label="用户名"></el-input>
<h1>禁用状态</h1>
<h4>通过disabled属性指定是否禁用input组件。</h4>
<el-input placeholder="请输入内容" v-model="disabled_input" :disabled="true"></el-input>
<h1>可清空</h1>
<h4>使用clearable属性即可得到一个可清空的输入框。</h4>
<el-input placeholder="请输入内容" v-model="clearable_input" clearable tabindex="1"></el-input>
<h1>密码框</h1>
<h4>使用show-password属性即可得到一个可切换显示隐藏的密码框。</h4>
<el-input placeholder="请输入密码" v-model="password_input" show-password></el-input>
<h1>带icon的输入框</h1>
<h4>可以通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标, 也可以通过slot来放置图标。</h4>
<div class="input-icon">
属性方式:
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input_icon_input1"></el-input>
<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input_icon_input2"></el-input>
</div>
<div class="input-icon input-icon-two">
slot方式:
<el-input placeholder="请选择日期" v-model="input_icon_input3"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input>
<el-input placeholder="请输入内容" v-model="input_icon_input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div>
<h1>尺寸</h1>
<h4>可通过size属性指定输入框的尺寸, 除了默认的大小外, 还提供了large、small和mini三种尺寸。</h4>
<div class="input-size">
<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="size_input1"></el-input>
<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="size_input2" size="medium"></el-input>
<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="size_input3" size="small"></el-input>
<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="size_input4" size="mini"></el-input>
</div>
</div>
</template>
<script>
export default {
data () {
return {
base_input: '',
disabled_input: '',
clearable_input: '',
password_input: '',
input_icon_input1: '',
input_icon_input2: '',
input_icon_input3: '',
input_icon_input4: '',
size_input1: '',
size_input2: '',
size_input3: '',
size_input4: ''
}
}
}
</script>
<style scoped>
#app .el-input {
width: 320px;
}
.input-icon-two {
margin-top: 20px;
}
.input-icon .el-input {
margin-left: 20px;
}
.input-size .el-input {
margin-right: 20px;
}
</style>2.4. 在components下创建Textarea.vue
<template>
<div>
<h1>文本域</h1>
<h4>用于输入多行文本信息, 通过将type属性的值指定为textarea。文本域高度可通过rows属性控制。</h4>
<el-input type="textarea" resize="none" placeholder="请输入内容" v-model="textarea" :rows="6"></el-input>
<h1>可自适应文本高度的文本域</h1>
<h4>通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整, 并且autosize还可以设定为一个对象, 指定最小行数和最大行数。</h4>
<el-input type="textarea" autosize placeholder="请输入内容" v-model="autosize_textarea1"></el-input>
<div style="margin: 20px 0;">最小行2, 最大行4</div>
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="autosize_textarea2"></el-input>
<h1>复合型输入框</h1>
<h4>可前置或后置元素, 一般为标签或按钮。可通过slot来指定在input中前置或者后置内容。</h4>
<div>
<el-input placeholder="请输入内容" v-model="complex_input1">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="complex_input2">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="complex_input3">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<h1>输入长度限制</h1>
<h4>maxlength和minlength是原生属性, 用来限制输入框的字符长度, 其中字符长度是用Javascript的字符串长度统计的。对于类型为text或textarea的输入框, 在使用maxlength属性限制最大输入长度的同时, 可通过设置show-word-limit属性来展示字数统计。</h4>
<el-input type="text" placeholder="请输入内容" v-model="length_text" maxlength="10" show-word-limit></el-input>
<div style="margin: 20px 0;"></div>
<el-input type="textarea" placeholder="请输入内容" v-model="length_textarea" maxlength="30" show-word-limit></el-input>
</div>
</template>
<script>
export default {
data () {
return {
textarea: '',
autosize_textarea1: '',
autosize_textarea2: '',
complex_input1: '',
complex_input2: '',
complex_input3: '',
length_text: '',
length_textarea: ''
}
}
}
</script>
<style scoped>
#app .el-input, #app .el-textarea {
width: 320px;
}
</style>2.5. 在components下创建Autocomplete.vue
<template>
<div>
<h1>带输入建议-根据输入内容提供对应的输入建议</h1>
<h4>autocomplete是一个可带输入建议的输入框组件, fetch-suggestions是一个返回输入建议的方法属性, 如querySearch(queryString, cb), 在该方法中你可以在你的输入建议数据准备好时通过cb(data)返回到autocomplete组件中。</h4>
<el-row>
<el-col :span="6">
<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="6">
<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>
</template>
<script>
export default {
data () {
return {
state1: '',
state2: ''
}
},
methods: {
querySearch (queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
cb(results)
},
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
loadAll () {
return [
{ value: '三全鲜食(北新泾店)', address: '长宁区新渔路144号' },
{ value: 'Hot honey 首尔炸鸡(仙霞路)', address: '上海市长宁区淞虹路661号' },
{ value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ value: '泷千家(天山西路店)', address: '天山西路438号' },
{ value: '胖仙女纸杯蛋糕(上海凌空店)', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ value: '贡茶', address: '上海市长宁区金钟路633号' },
{ value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
{ value: '茶芝兰(奶茶，手抓饼)', address: '上海市普陀区同普路1435号' },
{ value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
{ value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
{ value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
{ value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
{ value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
{ value: '浮生若茶(凌空soho店)', address: '上海长宁区金钟路968号9号楼地下一层' },
{ value: 'NONO JUICE 鲜榨果汁', address: '上海市长宁区天山西路119号' },
{ value: 'CoCo都可(北新泾店)', address: '上海市长宁区仙霞西路' },
{ value: '快乐柠檬(神州智慧店)', address: '上海市长宁区天山西路567号1层R117号店铺' },
{ value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
{ value: '猫山王(西郊百联店)', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
{ value: '枪会山', address: '上海市普陀区棕榈路' },
{ value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
{ value: '钱记', address: '上海市长宁区天山西路' },
{ value: '壹杯加', address: '上海市长宁区通协路' },
{ value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元' },
{ value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
{ value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
{ value: '鲜果榨汁(金沙江路和美广店)', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
{ value: '开心丽果(缤谷店)', address: '上海市长宁区威宁路天山路341号' },
{ value: '超级鸡车(丰庄路店)', address: '上海市嘉定区丰庄路240号' },
{ value: '妙生活果园(北新泾店)', address: '长宁区新渔路144号' },
{ value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
{ value: '凡仔汉堡(老真北路店)', address: '上海市普陀区老真北路160号' },
{ value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '蜀香源麻辣香锅(剑河路店)', address: '剑河路443-1' },
{ value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
{ value: '饭典*新简餐(凌空SOHO店)', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
{ value: '焦耳·川式快餐(金钟路店)', address: '上海市金钟路633号地下一层甲部' },
{ value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
{ value: '浏阳蒸菜', address: '天山西路430号' },
{ value: '四海游龙(天山西路店)', address: '上海市长宁区天山西路' },
{ value: '樱花食堂(凌空店)', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
{ value: '福荣祥烧腊(平溪路店)', address: '上海市长宁区协和路福泉路255弄57-73号' },
{ value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
{ value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
{ value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
{ value: '阳阳麻辣烫', address: '天山西路389号' },
{ value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
]
},
handleSelect (item) {
console.log(item)
}
},
mounted () {
this.restaurants = this.loadAll()
}
}
</script>2.6. 在components下创建TemplateAutocomplete.vue
<template>
<div>
<h1>自定义模板</h1>
<h4>使用scoped slot自定义输入建议的模板。该scope的参数为item, 表示当前输入建议对象。</h4>
<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data () {
return {
state: ''
}
},
methods: {
querySearch (queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
cb(results)
},
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
loadAll () {
return [
{ value: '三全鲜食(北新泾店)', address: '长宁区新渔路144号' },
{ value: 'Hot honey 首尔炸鸡(仙霞路)', address: '上海市长宁区淞虹路661号' },
{ value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ value: '泷千家(天山西路店)', address: '天山西路438号' },
{ value: '胖仙女纸杯蛋糕(上海凌空店)', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ value: '贡茶', address: '上海市长宁区金钟路633号' },
{ value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
{ value: '茶芝兰(奶茶，手抓饼)', address: '上海市普陀区同普路1435号' },
{ value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
{ value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
{ value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
{ value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
{ value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
{ value: '浮生若茶(凌空soho店)', address: '上海长宁区金钟路968号9号楼地下一层' },
{ value: 'NONO JUICE 鲜榨果汁', address: '上海市长宁区天山西路119号' },
{ value: 'CoCo都可(北新泾店)', address: '上海市长宁区仙霞西路' },
{ value: '快乐柠檬(神州智慧店)', address: '上海市长宁区天山西路567号1层R117号店铺' },
{ value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
{ value: '猫山王(西郊百联店)', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
{ value: '枪会山', address: '上海市普陀区棕榈路' },
{ value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
{ value: '钱记', address: '上海市长宁区天山西路' },
{ value: '壹杯加', address: '上海市长宁区通协路' },
{ value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元' },
{ value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
{ value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
{ value: '鲜果榨汁(金沙江路和美广店)', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
{ value: '开心丽果(缤谷店)', address: '上海市长宁区威宁路天山路341号' },
{ value: '超级鸡车(丰庄路店)', address: '上海市嘉定区丰庄路240号' },
{ value: '妙生活果园(北新泾店)', address: '长宁区新渔路144号' },
{ value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
{ value: '凡仔汉堡(老真北路店)', address: '上海市普陀区老真北路160号' },
{ value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '蜀香源麻辣香锅(剑河路店)', address: '剑河路443-1' },
{ value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
{ value: '饭典*新简餐(凌空SOHO店)', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
{ value: '焦耳·川式快餐(金钟路店)', address: '上海市金钟路633号地下一层甲部' },
{ value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
{ value: '浏阳蒸菜', address: '天山西路430号' },
{ value: '四海游龙(天山西路店)', address: '上海市长宁区天山西路' },
{ value: '樱花食堂(凌空店)', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
{ value: '福荣祥烧腊(平溪路店)', address: '上海市长宁区协和路福泉路255弄57-73号' },
{ value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
{ value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
{ value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
{ value: '阳阳麻辣烫', address: '天山西路389号' },
{ value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
]
},
handleSelect (item) {
console.log(item)
},
handleIconClick (ev) {
console.log(ev)
}
},
mounted () {
this.restaurants = this.loadAll()
}
}
</script>
<style scoped>
#app .el-input {
width: 320px;
}
.my-autocomplete .addr {
font-size: 12px;
display: block;
margin-top: -15px;
color: #909399;
}
</style>
2.7. 在components下创建QuerySearchAsync.vue
<template>
<div>
<h1>远程搜索-从服务端搜索数据</h1>
<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" highlight-first-item :debounce="50"></el-autocomplete>
</div>
</template>
<script>
export default {
data () {
return {
state: ''
}
},
methods: {
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
loadAll () {
return [
{ value: '三全鲜食(北新泾店)', address: '长宁区新渔路144号' },
{ value: 'Hot honey 首尔炸鸡(仙霞路)', address: '上海市长宁区淞虹路661号' },
{ value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ value: '泷千家(天山西路店)', address: '天山西路438号' },
{ value: '胖仙女纸杯蛋糕(上海凌空店)', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ value: '贡茶', address: '上海市长宁区金钟路633号' },
{ value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
{ value: '茶芝兰(奶茶，手抓饼)', address: '上海市普陀区同普路1435号' },
{ value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
{ value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
{ value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
{ value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
{ value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
{ value: '浮生若茶(凌空soho店)', address: '上海长宁区金钟路968号9号楼地下一层' },
{ value: 'NONO JUICE 鲜榨果汁', address: '上海市长宁区天山西路119号' },
{ value: 'CoCo都可(北新泾店)', address: '上海市长宁区仙霞西路' },
{ value: '快乐柠檬(神州智慧店)', address: '上海市长宁区天山西路567号1层R117号店铺' },
{ value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
{ value: '猫山王(西郊百联店)', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
{ value: '枪会山', address: '上海市普陀区棕榈路' },
{ value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
{ value: '钱记', address: '上海市长宁区天山西路' },
{ value: '壹杯加', address: '上海市长宁区通协路' },
{ value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元' },
{ value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
{ value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
{ value: '鲜果榨汁(金沙江路和美广店)', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
{ value: '开心丽果(缤谷店)', address: '上海市长宁区威宁路天山路341号' },
{ value: '超级鸡车(丰庄路店)', address: '上海市嘉定区丰庄路240号' },
{ value: '妙生活果园(北新泾店)', address: '长宁区新渔路144号' },
{ value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
{ value: '凡仔汉堡(老真北路店)', address: '上海市普陀区老真北路160号' },
{ value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '蜀香源麻辣香锅(剑河路店)', address: '剑河路443-1' },
{ value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
{ value: '饭典*新简餐(凌空SOHO店)', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
{ value: '焦耳·川式快餐(金钟路店)', address: '上海市金钟路633号地下一层甲部' },
{ value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
{ value: '浏阳蒸菜', address: '天山西路430号' },
{ value: '四海游龙(天山西路店)', address: '上海市长宁区天山西路' },
{ value: '樱花食堂(凌空店)', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
{ value: '福荣祥烧腊(平溪路店)', address: '上海市长宁区协和路福泉路255弄57-73号' },
{ value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
{ value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
{ value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
{ value: '阳阳麻辣烫', address: '天山西路389号' },
{ value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
]
},
handleSelect (item) {
console.log(item)
},
querySearchAsync (queryString, cb) {
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
cb(results)
}, 3000 * Math.random())
}
},
mounted () {
this.restaurants = this.loadAll()
}
}
</script>2.8. 运行项目, 访问http://localhost:8080/#/Input
2.9. 运行项目, 访问http://localhost:8080/#/Textarea
2.10. 运行项目, 访问http://localhost:8080/#/Autocomplete
2.11. 运行项目, 访问http://localhost:8080/#/TemplateAutocomplete
2.12. 运行项目, 访问http://localhost:8080/#/QuerySearchAsync
3994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
