daikan-international/src/components/basic/miniMap.vue

<template>
  <teleport v-show="show" v-if="ifShow" :to="refMiniMap">
    <span class="button-switch" @click.stop="toggleMap">
      <i
        class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_map_collect iconzm-show_map_collect"
      />
    </span>
    <div v-if="showDollhouse" class="change" @click="changeMode">
      <i
        class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_3d_normal iconzm-show_3d_normal"
      />
      <span> 3D模型</span>
    </div>
  </teleport>
</template>
<script lang="ts">
import { defineComponent, onMounted, watchEffect, ref } from "vue";
import { propTypes } from "/@/utils/propTypes";
const refMiniMap = ref<Nullable<string>>(null);
const ifShow = ref(false);
const isCollapse = ref(false);

export default defineComponent({
  name: "minMap",
  props: {
    show: propTypes.bool.def(true),
    showDollhouse: propTypes.bool.def(false),
    to: {
      type: String as PropType<Nullable<string>>,
      default: null,
    },
  },
  emits: ["changeMode", "toggleMap"],
  setup(props, { emit }) {
    onMounted(() => {
      watchEffect(() => {
        if (props.to?.length) {
          ifShow.value = true;
          refMiniMap.value = props.to;
        }
      });
    });

    
    const toggleMap = () => {
      isCollapse.value = !isCollapse.value;
      emit("toggleMap", isCollapse.value);
      let $minmap = document.querySelector("[xui_min_map]");
      if ($minmap) {
        if (!isCollapse.value) {
          $minmap.classList.remove("collapse");
        } else {
          $minmap.classList.add("collapse");
        }
      }
    };
    const changeMode = () => {
      emit("changeMode", "dollhouse");
    };

    return {
      toggleMap,
      changeMode,
      refMiniMap,
      ifShow,
    };
  },
});
</script>