- <template>
- <div id="PanelDisplayHidden">
- <!-- 面板显示隐藏 -->
- <img
- v-show="Gettype == 'another'"
- id="ShowComVs"
- :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
- @click="ShowComvsClick()"
- :src="showPanel ? ZuoYou2 : ZuoYou1"
- />
-
- <img
- v-show="Gettype == 'WaterAssets'"
- id="ShowComVs"
- :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
- @click="ShowComvsClick()"
- :src="showPanel ? WaterAssetsZuoYou2 : WaterAssetsZuoYou1"
- />
- </div>
- </template>
-
- <script setup name="PanelDisplayHidden">
- import { ref, reactive, toRefs, onMounted } from 'vue';
- import { defineEmits } from 'vue';
-
- const props = defineProps({
- Gettype: {
- type: String,
- default: 'another',
- },
- });
-
- const emit = defineEmits(['showPanelChange']);
- // 左右滑动
- import ZuoYou1 from '@/assets/images/pictureOnMap/ZuoYou1.png';
- import ZuoYou2 from '@/assets/images/pictureOnMap/ZuoYou2.png';
- import WaterAssetsZuoYou1 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou1.png';
- import WaterAssetsZuoYou2 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou2.png';
- const showPanel = ref(false); //面板展开收起
- const AllData = reactive({});
- const ShowComvsClick = () => {
- showPanel.value = !showPanel.value;
- emit('showPanelChange', showPanel.value);
- };
- onMounted(() => {});
- </script>
-
- <style lang="scss" scoped>
- #ShowComVs {
- position: absolute;
- top: 480px;
- left: 468px;
- width: 15px;
- height: 56px;
- // background: #00cee0;
- cursor: pointer;
- }
- .ShowComVsTrue {
- transition: all 0.5s;
- transform: translateX(-468px);
- }
- .ShowComVsFalse {
- transition: all 0.5s;
- transform: translateX(0px);
- }
- </style>