<template>
	<div id="photosphere-container" :style="{'width':width,'height':height}"></div>
</template>
<script>
	// 先在项目安装 photo-sphere-viewer
	// npm install photo-sphere-viewer --save
	import {
		Viewer
	} from 'photo-sphere-viewer';
	import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';

	// 当前是vue2版本，vue3项目中复制过去稍微修改下即可
	export default {
		// props:['imgSrc','height','height'],
		props: {
			imgSrc: {
				type: String,
				required: true,
				default: 'https://img2.baidu.com/it/u=3220405547,4187203989&fm=253&fmt=auto&app=120&f=JPEG?w=1558&h=800' //测试用的默认网络图片
			},
			height: {
				type: String,
				required: false,
				default: '500rpx'
			},
			width: {
				type: String,
				required: false,
				default: '100%'
			}
		},
		data() {
			return {

			}
		},
		mounted() {
			const viewer = new Viewer({
				panorama: this.imgSrc, // 替换为你的全景图片路径
				container: document.getElementById('photosphere-container'),
				// 其他配置项...
			});
		},
		onLoad() {

		},

		methods: {

		}
	}
</script>

<style>

</style>