Commit 9d767f2084ca54417f0f0b1385b713626685c611
Committed by
GitHub
GitHub
1 parent
5f25feca
Update auto-complete.vue
Showing
1 changed file
with
35 additions
and
36 deletions
Show diff stats
examples/routers/auto-complete.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div style="margin: 100px;width: 200px;"> | ||
| 3 | - <auto-complete v-model="value" :data="data" :disabled="disabled"></auto-complete> | ||
| 4 | - </div> | 2 | + <div style="margin: 100px;width: 200px;"> |
| 3 | + <AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm"> | ||
| 4 | + <!--<Option v-for="item in data" :value="item" :label="item" :key="item">--> | ||
| 5 | + <!--<span style="color: red">{{ item }}</span>--> | ||
| 6 | + <!--</Option>--> | ||
| 7 | + </AutoComplete> | ||
| 8 | + </div> | ||
| 5 | </template> | 9 | </template> |
| 6 | <script> | 10 | <script> |
| 7 | -export default { | ||
| 8 | - data() { | ||
| 9 | - return { | ||
| 10 | - value: "", | ||
| 11 | - disabled: false, | ||
| 12 | - data: [] | 11 | + |
| 12 | + export default { | ||
| 13 | + props: { | ||
| 14 | + | ||
| 15 | + }, | ||
| 16 | + data () { | ||
| 17 | + return { | ||
| 18 | + value: '', | ||
| 19 | + data: [], | ||
| 20 | +// data: ['Burns Bay Road', 'Downing Street', 'Wall Street'] | ||
| 21 | + }; | ||
| 22 | + }, | ||
| 23 | + computed: {}, | ||
| 24 | + methods: { | ||
| 25 | + handleSearch (value) { | ||
| 26 | + this.data = !value ? [] : [ | ||
| 27 | + value + '@qq.com', | ||
| 28 | + value + '@sina.com', | ||
| 29 | + value + '@163.com' | ||
| 30 | + ] | ||
| 31 | + }, | ||
| 32 | + hc (v) { | ||
| 33 | +// console.log(v) | ||
| 34 | + }, | ||
| 35 | + fm (value, item) { | ||
| 36 | + return item.toUpperCase().indexOf(value.toUpperCase()) !== -1; | ||
| 37 | + } | ||
| 38 | + } | ||
| 13 | }; | 39 | }; |
| 14 | - }, | ||
| 15 | - methods: {}, | ||
| 16 | - created() { | ||
| 17 | - setTimeout(() => { | ||
| 18 | - this.value = "1.0.0.5"; | ||
| 19 | - this.data = [ | ||
| 20 | - "12412515", | ||
| 21 | - "123444", | ||
| 22 | - "12355", | ||
| 23 | - "12345", | ||
| 24 | - "12312", | ||
| 25 | - "1234", | ||
| 26 | - "123", | ||
| 27 | - "111", | ||
| 28 | - "5.2.3.4", | ||
| 29 | - "1.2.3.4", | ||
| 30 | - "1.2.3.4.5", | ||
| 31 | - "1.2.3.4.5.6", | ||
| 32 | - "1.2.3.4.5.6.7", | ||
| 33 | - "1.0.0.8", | ||
| 34 | - "1.0.0.5", | ||
| 35 | - "whb-03" | ||
| 36 | - ]; | ||
| 37 | - // this.disabled = true; | ||
| 38 | - }, 1000); | ||
| 39 | - } | ||
| 40 | -}; | ||
| 41 | </script> | 40 | </script> |