Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / PanelDisplayHidden.vue
@zhangqy zhangqy on 29 Nov 1 KB first commit
  1. <template>
  2. <div id="PanelDisplayHidden">
  3. <!-- 面板显示隐藏 -->
  4. <img
  5. v-show="Gettype == 'another'"
  6. id="ShowComVs"
  7. :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
  8. @click="ShowComvsClick()"
  9. :src="showPanel ? ZuoYou2 : ZuoYou1"
  10. />
  11.  
  12. <img
  13. v-show="Gettype == 'WaterAssets'"
  14. id="ShowComVs"
  15. :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
  16. @click="ShowComvsClick()"
  17. :src="showPanel ? WaterAssetsZuoYou2 : WaterAssetsZuoYou1"
  18. />
  19. </div>
  20. </template>
  21.  
  22. <script setup name="PanelDisplayHidden">
  23. import { ref, reactive, toRefs, onMounted } from 'vue';
  24. import { defineEmits } from 'vue';
  25.  
  26. const props = defineProps({
  27. Gettype: {
  28. type: String,
  29. default: 'another',
  30. },
  31. });
  32.  
  33. const emit = defineEmits(['showPanelChange']);
  34. // 左右滑动
  35. import ZuoYou1 from '@/assets/images/pictureOnMap/ZuoYou1.png';
  36. import ZuoYou2 from '@/assets/images/pictureOnMap/ZuoYou2.png';
  37. import WaterAssetsZuoYou1 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou1.png';
  38. import WaterAssetsZuoYou2 from '@/assets/images/pictureOnMap/WaterAssetsZuoYou2.png';
  39. const showPanel = ref(false); //面板展开收起
  40. const AllData = reactive({});
  41. const ShowComvsClick = () => {
  42. showPanel.value = !showPanel.value;
  43. emit('showPanelChange', showPanel.value);
  44. };
  45. onMounted(() => {});
  46. </script>
  47.  
  48. <style lang="scss" scoped>
  49. #ShowComVs {
  50. position: absolute;
  51. top: 480px;
  52. left: 468px;
  53. width: 15px;
  54. height: 56px;
  55. // background: #00cee0;
  56. cursor: pointer;
  57. }
  58. .ShowComVsTrue {
  59. transition: all 0.5s;
  60. transform: translateX(-468px);
  61. }
  62. .ShowComVsFalse {
  63. transition: all 0.5s;
  64. transform: translateX(0px);
  65. }
  66. </style>