vue全景预览插件photo-sphere-viewer

<template>
  <div id="panorama-container"></div>
</template>
 
<script>
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import { PhotoSphereViewer } from 'photo-sphere-viewer';
 
export default {
  name: 'PanoramaViewer',
  data() {
    return {
      psv: null, // 用于保存全景预览实例
    };
  },
  mounted() {
    // 初始化全景预览
    this.psv = new PhotoSphereViewer({
      // 容器元素的选择器
      container: document.getElementById('panorama-container'),
      // 全景图片的URL
      panorama: 'path/to/your/panorama.jpg',
      // 其他配置项...
    });
  },
  beforeDestroy() {
    // 清理资源
    if (this.psv) {
      this.psv.destroy();
    }
  },
};
</script>
 
<style>
#panorama-container {
  width: 100%;
  height: 500px;
}
</style>

这个代码实例展示了如何在Vue组件中集成photo-sphere-viewer插件来创建全景图片预览。在mounted生命周期钩子中初始化了全景预览，并在beforeDestroy钩子中清理了相关资源。