photo-sphere-viewer切换图片用vue4 怎么写

在Vue 4中，你可以使用Vue 3的方式来使用photo-sphere-viewer，但需要注意一些细节。

1. 安装photo-sphere-viewer
你需要通过npm或yarn来安装photo-sphere-viewer。

npm install photo-sphere-viewer

2. 在Vue组件中创建photo-sphere-viewer实例
你可以在Vue组件的`setup()`函数中创建photo-sphere-viewer实例，并将其添加到DOM中。需要注意的是，在Vue 4中，你需要使用Vue的响应式Reactivity API来管理photo-sphere-viewer实例的状态。

<template>
  <div ref="viewerContainer"></div>
  <button @click="changePanorama">切换图片</button>
</template>

<script>
import { ref, onMounted } from 'vue';
import PhotoSphereViewer from 'photo-sphere-viewer';

export default {
  setup() {
    const viewerContainer = ref(null);
    const viewer = ref(null);

    onMounted(() => {
      viewer.value = new PhotoSphereViewer({
        container: viewerContainer.value,
        panorama: '/path/to/your/panorama.jpg'
      });
    });

    function changePanorama() {
      viewer.value.setPanorama('/path/to/your/new/panorama.jpg');
    }

    return {
      viewerContainer,
      viewer,
      changePanorama
    }
  }
}
</script>

在这个例子中，我们使用了Vue的`ref`函数来创建了两个响应式的变量`viewerContainer`和`viewer`。在`onMounted()`生命周期钩子函数中，我们初始化了`viewer`变量，并在DOM中添加了photo-sphere-viewer实例。在`changePanorama()`方法中，我们使用了`viewer.value`来引用photo-sphere-viewer实例，并调用了`setPanorama()`方法来更改panorama选项。

需要注意的是，在Vue 4中，我们使用了`.value`来访问响应式变量的值，这与Vue 3有所不同。

3. 在Vue组件中使用Vue的事件处理程序来切换图片
我们可以在Vue组件中添加一个按钮，并使用Vue的事件处理程序来切换图片。

<template>
  <div ref="viewerContainer"></div>
  <button @click="changePanorama">切换图片</button>
</template>

<script>
import { ref, onMounted } from 'vue';
import PhotoSphereViewer from 'photo-sphere-viewer';

export default {
  setup() {
    const viewerContainer = ref(null);
    const viewer = ref(null);

    onMounted(() => {
      viewer.value = new PhotoSphereViewer({
        container: viewerContainer.value,
        panorama: '/path/to/your/panorama.jpg'
      });
    });

    function changePanorama() {
      viewer.value.setPanorama('/path/to/your/new/panorama.jpg');
    }

    return {
      viewerContainer,
      viewer,
      changePanorama
    }
  }
}
</script>

这样，当用户单击“切换图片”按钮时，你的Vue组件将调用`changePanorama()`方法，并使用`setPanorama()`方法更改photo-sphere-viewer实例的panorama选项，从而加载新的图片。