66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div v-if="results.length" class="map-search-results">
|
|
<div class="map-search-results__title">搜索结果</div>
|
|
<el-empty v-if="!results.length" description="暂无搜索结果" :image-size="60" />
|
|
<div
|
|
v-for="(item, index) in results"
|
|
:key="item.id || index"
|
|
class="map-search-results__item"
|
|
@click="$emit('select', item)"
|
|
>
|
|
<div class="map-search-results__name">{{ item.name || item.address || '未命名地址' }}</div>
|
|
<div class="map-search-results__address">{{ item.address || item.name || '-' }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
results: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
emits: ['select'],
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.map-search-results {
|
|
width: 260px;
|
|
height: 420px;
|
|
overflow-y: auto;
|
|
border: 1px solid #eff1f7;
|
|
background: #fff;
|
|
flex: 0 0 260px;
|
|
|
|
&__title {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid #eff1f7;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__item {
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
&__item:hover {
|
|
background: #f5f9ff;
|
|
}
|
|
|
|
&__name {
|
|
color: #303133;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&__address {
|
|
margin-top: 4px;
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|