vue预览全景图片
- 安装
npm i photo-sphere-viewer --save
- 使用
<template>
<div id="pano" ref="panoshow"></div>
</template>
<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
name: "HomeView",
data() {
return {
PSV: null,
};
},
mounted() {
this.$nextTick(() => {
this.initPhotoSphere();
});
},
methods: {
initPhotoSphere() {
this.PSV = new Viewer({
container: document.getElementById("pano"),
panorama: require("../assets/img/1.jpg"),
autorotateDelay: true,
autorotateSpeed: 0,
size: {
width: "100%",
height: "100%",
},
maxFov: 100,
minFov: 10,
navbar: false,
}).on("ready", () => {
console.log("pano ok");
});
},
},
};
</script>