全景插件 Photo sphere viewer

Photo sphere viewer全景插件的使用

• 官网地址：https://photo-sphere-viewer.js.org/guide/
• npm安装：npm install photo-sphere-viewer

在组件中的使用

首先import

• import { Viewer } from 'photo-sphere-viewer'
• import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
  示例代码

<template>
<div id="photosphere" class="photosphere"></div>
</template>
<script>
import { Viewer } from 'photo-sphere-viewer'
export default {
 components: {},
 data () {
  return {
   panoramadata: null,
   img: require('../../assets/南_看图王.jpg')
   // photosphere: 'photosphere'
  }
 },
 computed: {},
 created () {
 },
 mounted () {
  this.init()
 },
 methods: {
  init () {
   this.panoramadata = new Viewer({
    container: document.getElementById('photosphere'),
    panorama: this.img,
    size: {
     width: '100%',
     height: '100%'
    }
   })
  }
 }
}
</script>
<style scoped>
.photosphere{
 width: 100%;
 height: 100%;
}
</style>