项目中有个新需求展示全景图，也找过了多个插件，还是这个插件简单易懂。

一、下载依赖

npm install photo-sphere-viewer --save

yarn add photo-sphere-viewer

下载好依赖就可以开始使用了

二、使用

<!-- 全景看图 -->
<template><div><div class="PSViewer" ref="psvdbg"></div></div>
</template><script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";export default {data() {return {PSV: "",};},mounted() {this.init();},methods: {init() {let this_ = this;this.PSV = new Viewer({panorama: 'https://bbs.djicdn.com/data/attachment/forum/201711/12/121252sl9vnanggrvknz22.jpg', // 图片路径container: this_.$refs.psvdbg, // 容器autorotateDelay: 500,navbar: false,//是否展示工具栏size: {width: "100vw",height: "90vh",},});},},
};
</script>
<style lang='scss' scoped></style>

复制代码即可开箱使用。