008_Input输入框

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 router

2.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.restaurantsvar results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurantscb(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.restaurantsvar results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurantscb(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.restaurantsvar results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurantscb(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 

总结

以上是生活随笔为你收集整理的008_Input输入框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。