From 5f65206b6703c8a0f30b0606bd7ed8a631761b55 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 10 Jan 2022 11:10:53 +0800
Subject: [PATCH] +路线导航 单条改成可选路线
---
src/components/mobileCloseRouter/index.vue | 74 ++++++++++++++++++++++++++++++++++---
1 files changed, 68 insertions(+), 6 deletions(-)
diff --git a/src/components/mobileCloseRouter/index.vue b/src/components/mobileCloseRouter/index.vue
index 8d48d09..0538cef 100644
--- a/src/components/mobileCloseRouter/index.vue
+++ b/src/components/mobileCloseRouter/index.vue
@@ -1,10 +1,26 @@
<template>
<!-- v-show="isOpenDrawALine" -->
- <div
- :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
- @click="mobileRouterClose"
- >
- 退出导航
+ <div class="routers">
+ <div
+ :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
+ @click="mobileRouterClose"
+ >
+ 退出导航
+ </div>
+ <div
+ v-for="(item, index) in routerS"
+ :key="item.Str"
+ :style="{ bottom: 357 + index * 37 + 'px' }"
+ :class="[
+ 'mobileCloseRouterOpen',
+ index < lengthS && isOpenDrawALine ? 'mobileCloseActive' : '',
+ choiceRouterS == index ? 'mobileCloseActiveOpen' : '',
+ ]"
+ @click="mobileRouterCloseOpen(item.Str, index)"
+ >
+ <!-- 路径{{ index + 1 }}：{{ item.titles }} -->
+ 路径{{ index + 1 }}
+ </div>
</div>
</template>
@@ -13,7 +29,12 @@
export default {
name: "mobileCloseRouter",
computed: {
- ...mapGetters(["isOpenDrawALine"]),
+ ...mapGetters(["isOpenDrawALine", "routerS", "choiceRouterS"]),
+ },
+ data() {
+ return {
+ lengthS: 0,
+ };
},
watch: {
isOpenDrawALine() {
@@ -21,16 +42,35 @@
} else {
}
},
+ routerS() {
+ if (this.routerS.length == 0) {
+ this.lengthS = 0;
+ }
+ setTimeout(() => {
+ this.lengthS++;
+ }, 200);
+ },
},
methods: {
mobileRouterClose() {
this.$store.commit("removePolyline");
+ },
+ mobileRouterCloseOpen(Str, index) {
+ if (this.choiceRouterS == index) {
+ return;
+ }
+ this.$store.commit("set_choiceRouterS", index);
+ this.$store.dispatch("MSET_DRAWALINELAYER", Str);
},
},
};
</script>
<style lang="scss" scoped>
+.routers {
+ width: 0;
+ height: 0;
+}
.mobileCloseRouter {
position: fixed;
width: 80px;
@@ -48,8 +88,30 @@
color: #fff;
transition: all 0.5s;
}
+.mobileCloseRouterOpen {
+ position: fixed;
+ // width: 127px;
+ width: 80px;
+ height: 32px;
+ background-color: #fff;
+ z-index: 600;
+ right: -100px;
+ opacity: 0;
+ bottom: 357px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 8px 0 0 8px;
+ color: #000;
+ transition: all 0.5s;
+}
.mobileCloseActive {
right: 0px;
opacity: 1;
}
+.mobileCloseActiveOpen {
+ background-color: #409eff;
+ color: #fff;
+}
</style>
--
Gitblit v1.9.3