drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

save

Browse source
This commit is contained in:
prefert 2020-09-03 15:53:31 +08:00
parent 8f9d3604e6
commit 5bb83ff8e5
258 changed files with 12974 additions and 7838 deletions
Download patch file Download diff file Expand all files Collapse all files

156
examples/routers/auto-complete.vue
View file

@ -1,51 +1,131 @@
<template>
<div style="margin: 100px;width: 200px;">
<div style="margin: 100px">
<AutoComplete
placement="top"
transfer
v-model="value"
icon="ios-search"
:data="data"
@on-search="onHandleSearch"
@on-change="onChange"
@on-select="onSelect"
>
<!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
<!--<span style="color: red">{{ item }}</span>-->
<!--</Option>-->
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>
<!-- <Select v-model="model1" style="width:200px">-->
<!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!-- </Select>-->
</div>
</template>
<script>
export default {
props: {},
data () {
return {
value: "",
source: ["1", "2", "3", "11", "12", "13"],
data: []
};
},
computed: {},
methods: {
onHandleSearch (value) {
let result = [];
for (let val of this.source) {
if (val.includes(value)) {
result.push(val);
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,
}
]
}
}
this.data = result;
},
onSelect (e) {
console.log('onSelect', e);
},
onChange (v) {
console.log("onChange", v);
},
fm (value, item) {
return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
],
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: ''
}
}
};
}
</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>