92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<!--
|
||
* @Author: lixin
|
||
* @Date: 2023-5-27
|
||
* @Description: 地图上半部分工具栏，包括: 图层、漫游、量测、在线标绘、卷帘、出图等
|
||
-->
|
||
<template>
|
||
<div class="tool-list">
|
||
<div v-for="(item, index) in toolList" :key="index" class="tool-bar">
|
||
<img :src="item.id === selectedTool ? getImgUrl(item.id + '_press') : getImgUrl(item.id)">
|
||
<span class="tool-text" :class="item.id === selectedTool ? 'press': ''" @click="handleTool(item)">{{ item.label }}</span>
|
||
<b v-if="index !==(toolList.length -1)" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from 'vue'
|
||
export default {
|
||
emits: ['tool'],
|
||
setup(props, { emit }) {
|
||
const data = reactive({
|
||
toolList: [
|
||
{ id: 'tuceng', label: '图层' },
|
||
{ id: 'liangce', label: '量测' }
|
||
],
|
||
selectedTool: null
|
||
})
|
||
|
||
const getImgUrl = (src) => {
|
||
return new URL(`../../../../assets/basemap/toolbar/${src}.png`, import.meta.url).href
|
||
}
|
||
|
||
const handleTool = (info) => {
|
||
if (info?.id !== data.selectedTool) {
|
||
data.selectedTool = info?.id
|
||
} else {
|
||
data.selectedTool = null
|
||
}
|
||
emit('tool', data.selectedTool)
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
getImgUrl,
|
||
handleTool
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tool-list{
|
||
// width: 592px;
|
||
height: 40px;
|
||
position: absolute;
|
||
top: 60px;
|
||
right: 20px;
|
||
cursor: pointer;
|
||
background: url("../../../../assets/basemap/toolbar/caozuo_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
|
||
.tool-bar{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 15px;
|
||
|
||
.tool-text{
|
||
font-size:14px;
|
||
font-family:Microsoft YaHei;
|
||
font-weight:400;
|
||
/*color:rgba(78,253,255,1);*/
|
||
color: #FFFFFF;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.tool-text.press{
|
||
color: rgb(98,223,255);
|
||
}
|
||
|
||
b {
|
||
height: 20px;
|
||
display: inline-block;
|
||
border-right: 2px solid rgb(98,223,255);
|
||
// border-right: 1px solid #eee;
|
||
position: relative;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|