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>
