vue预览全景图片

vue预览全景图片

  • 安装
shell 复制代码
npm i photo-sphere-viewer --save
  • 使用
html 复制代码
<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>

附件

相关推荐
正在学习前端的---小方同学5 分钟前
vue-easy-tree树状结构
前端·javascript·vue.js
毕业设计制作和分享1 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键4 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
你的人类朋友6 小时前
【Node】认识multer库
前端·javascript·后端
可触的未来,发芽的智生7 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者8 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀8 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
天***88969 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体9 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc