add AutoComplete component
This commit is contained in:
parent
1183836a92
commit
fed3e09d15
11 changed files with 255 additions and 31 deletions
|
@ -56,6 +56,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/notice">Notice</router-link></li>
|
||||
<li><router-link to="/avatar">Avatar</router-link></li>
|
||||
<li><router-link to="/color-picker">ColorPicker</router-link></li>
|
||||
<li><router-link to="/auto-complete">AutoComplete</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
@ -188,6 +188,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/color-picker',
|
||||
component: require('./routers/color-picker.vue')
|
||||
},
|
||||
{
|
||||
path: '/auto-complete',
|
||||
component: require('./routers/auto-complete.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
40
examples/routers/auto-complete.vue
Normal file
40
examples/routers/auto-complete.vue
Normal file
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div style="margin: 100px;width: 200px;">
|
||||
<AutoComplete transfer v-model="value" :data="data" @on-change="hc" :filter-method="fm">
|
||||
<!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
|
||||
<!--<span style="color: red">{{ item }}</span>-->
|
||||
<!--</Option>-->
|
||||
</AutoComplete>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: '',
|
||||
// data: [],
|
||||
data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleSearch (value) {
|
||||
this.data = !value ? [] : [
|
||||
value + '@qq.com',
|
||||
value + '@sina.com',
|
||||
value + '@163.com'
|
||||
]
|
||||
},
|
||||
hc (v) {
|
||||
console.log(v)
|
||||
},
|
||||
fm (value, item) {
|
||||
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue