vue预览全景图片

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>

附件