1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <template>
| <span class="inline-flex justify-center items-center rounded-md h-[42px] space-x-1 bg-[hsla(0,0%,0%,0.9)] font-pingfang-regular">
| <span
| v-for="item in maps"
| :key="item.id"
| class="map flex items-center px-[16px] h-full rounded-md hover:bg-[#334CAF] hover:cursor-pointer"
| :class="{ activated: item.id === selected }"
| @click="onItemClick(item)"
| >
| {{ item.label }}
| </span>
| </span>
| </template>
|
| <script>
| export default {
| name: "SwitchMap",
| props: {
| mapType: {
| type: String,
| default: "pic",
| },
| },
| data() {
| return {
| selected: this.mapType,
| maps: [
| { id: "pic", label: "影像地图" },
| { id: "gis", label: "GIS地图" },
| ],
| };
| },
| methods: {
| onItemClick(item) {
| if (item.id === this.selected) return;
| this.selected = item.id;
| this.$emit("changeMap", item);
| },
| },
| };
| </script>
| <style>
| .map.activated {
| @apply bg-[#334CAF];
| }
| </style>
|
|
