VUE 全景展厅 示例代码

以下是一个简单的VUE全景展厅示例代码：

<template>
  <div>
    <pano :image="image" :preview="preview" :hotspots="hotspots"></pano>
  </div>
</template>

<script>
import Pano from 'vue-pano'

export default {
  components: {
    Pano
  },
  data () {
    return {
      image: 'path/to/panorama.jpg',
      preview: 'path/to/preview.jpg',
      hotspots: [
        {
          pitch: 0,
          yaw: 0,
          image: 'path/to/hotspot.jpg',
          width: 100,
          height: 100
        },
        {
          pitch: 10,
          yaw: 30,
          image: 'path/to/hotspot.jpg',
          width: 100,
          height: 100
        }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了`vue-pano`组件来展示全景图片。`image`属性指定了全景图片的路径，`preview`属性指定了预览图片的路径，`hotspots`属性指定了热点的位置和图片路径。用户可以通过鼠标或VR设备来浏览全景图片并与热点进行交互。