yangshi_cloudExbition/src/components/hotspot/index.vue

<template>
  <div class="hotspotcon" @mousemove.stop>
    <component @close="close" :type="scene" :is="active" :hotspot="hotspot"></component>
  </div>
</template>

<script>
import audio from './audio.vue';
import image from './image.vue';
import video from './video.vue';
import title from './title.vue';
import iframe from './iframe.vue';
import model from './model.vue';



let iconArr = [
  { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
  { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
  { name: "图片", key: "images", id: "vImage", img: "img-icon", display: false },
  { name: "模型", key: "model",  id: "vModel", img: "model-icon", display: false },
  { name: "介绍", key: "title", id: "vTitle", img: "txt-icon", display: false }
];

export default {
  props:['hotspot'],
  components:{
    vAudio:audio,
    vImage:image,
    vIframe:iframe,
    vTitle:title,
    vVideo:video,
    vModel:model,
  },
  methods:{
    close(){
      this.$emit('close')
    }
  },
  mounted(){
    // console.log(this.hotspot);
    iconArr.forEach(item => {
      if (this.hotspot[item.key]) {
        this.active = !this.active ? item.id : this.active;
      }
    });
    !this.active && (this.active = 'vTitle')
  },
  data(){
    return {
      active:''
    }
  },
  computed:{
    scene(){
      return this.$route.params.type
    }
  }
}
</script>

<style lang="less" scoped>
.hotspotcon{
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .close{
    position: fixed;
    top: 40px;
    right: 40px;
    width: 30px;
    height: 70px;
    cursor: pointer;
  }
  .ifrclose{
    top: 100px;
  }
}


</style>