AutoComplete prop: placement add more value
This commit is contained in:
parent
4e32dc403f
commit
64de8de933
2 changed files with 91 additions and 30 deletions
|
@ -1,40 +1,101 @@
|
|||
<template>
|
||||
<div style="margin: 100px;width: 200px;">
|
||||
<AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @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>-->
|
||||
<div style="margin: 100px">
|
||||
<AutoComplete
|
||||
v-model="value4"
|
||||
icon="ios-search"
|
||||
placeholder="input here"
|
||||
placement="bottom-start"
|
||||
style="width:300px">
|
||||
<div class="demo-auto-complete-item" v-for="item in data4">
|
||||
<div class="demo-auto-complete-group">
|
||||
<span>{{ item.title }}</span>
|
||||
<a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
|
||||
</div>
|
||||
<Option v-for="option in item.children" :value="option.title" :key="option.title">
|
||||
<span class="demo-auto-complete-title">{{ option.title }}</span>
|
||||
<span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
|
||||
</Option>
|
||||
</div>
|
||||
<a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
|
||||
</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'
|
||||
value4: '',
|
||||
data4: [
|
||||
{
|
||||
title: '话题',
|
||||
children: [
|
||||
{
|
||||
title: 'iView',
|
||||
count: 10000,
|
||||
|
||||
},
|
||||
{
|
||||
title: 'iView UI',
|
||||
count: 10600,
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '问题',
|
||||
children: [
|
||||
{
|
||||
title: 'iView UI 有多好',
|
||||
count: 60100,
|
||||
|
||||
},
|
||||
{
|
||||
title: 'iView 是啥',
|
||||
count: 30010,
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '文章',
|
||||
children: [
|
||||
{
|
||||
title: 'iView 是一个设计语言',
|
||||
count: 100000,
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
hc (v) {
|
||||
// console.log(v)
|
||||
},
|
||||
fm (value, item) {
|
||||
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-auto-complete-item{
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
.demo-auto-complete-group{
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.demo-auto-complete-group span{
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
.demo-auto-complete-group a{
|
||||
float: right;
|
||||
}
|
||||
.demo-auto-complete-count{
|
||||
float: right;
|
||||
color: #999;
|
||||
}
|
||||
.demo-auto-complete-more{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -87,9 +87,9 @@
|
|||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'bottom']);
|
||||
return oneOf(value, ['top', 'bottom', 'top-start', 'bottom-start', 'top-end', 'bottom-end']);
|
||||
},
|
||||
default: 'bottom'
|
||||
default: 'bottom-start'
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
|
|
Loading…
Add table
Reference in a new issue