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输入框相关推荐

adb 输入很长的内容 (input text) 在模拟机输入框里面快速输入内容
有时候需要在模拟机上面输入很长的内容来测试, 可以使用input text xx 来输入步骤1 adb shell 步骤2 input text xxxxxxxx 注意:需要先清理模拟输入框里面的内 ...
HarmonyOS 输入框TextField的使用
TextField 是什么 TextField是HarmonyOS 里面的输入框 TextField 的属性 TextField 继承Text 所以Text的属行也适用TextField ,需要记住的 ...
文本输入框、密码输入框
当用户要在表单中键入字母.数字等内容时,就会用到文本输入框.文本框也可以转化为密码输入框. 语法: <form><input type="text/password&quo ...
对输入框以及选择框集体的数据检验
对于一个档案输入框,有很多输入框是需要输入数据的,但有时候我们会在输入的时候遗留一些必填的项,如果不做数据校验,这时候点击保存按钮,就悲剧了,报错不说,我们前面填写的数据也就没有了. 所以数据校验非常 ...
android监听输入框光标,EditText光标的移动
在做项目时,我们可能会遇到当输入框的内容变化后让光标自动显示在下一个输入框,这样就省去了手工的点击,从而提高了效率. requestFocus() 获取焦点即光标的显示 setOnFocusCha ...
js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定解决办法 ...
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧，敲击讨厌滴啦，怎么去掉介个样式尼
//为什么不直接就用input,那是因为这样会覆盖checkbox和radio的样式,我们这里只需要清除输入框的谷歌样式 input[type="text"], input[typ ...
input反应慢 vue_Vue v-model实时更新带来的输入框卡顿问题
背景最近在开发的时候,发现在内容较多的页面上对v-model绑定的输入框上输入内容,页面会变得很卡顿,有些带有动画的元素还会闪动,初步怀疑是v-model实时更新引起整个组件(页面)的 re-ren ...
input输入框为number类型时，去掉上下小箭头
input输入框type为number时,去掉上下小箭头,方式如下: <input type="number" ...><style>/* 在Chrome浏 ...

008_Input输入框

008_Input输入框相关推荐

最新文章

热门文章