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输入框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。