```<template>
<div class="PSViewer" :id="div"></div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PhotoSphereViewer from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import utils from "../../utils/utils";
import API from "../../api/Api";
import config from "../../config/config";
const api = new API();
export default {
name: "PSViewer",
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
img:require('../../assets/public/vr1.jpg'),
div:'div'
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//方法集合
methods: {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
PhotoSphereViewer({
panorama:this.img,//图片路径
container:this.div,//容器
// time_anim:true,//自动播放
// navbar:["fullscreen","autorotate"],//下方导航栏
// zoom_level:100,//默认值为0，缩放的级别
// default_fov:100,
// navbar_stylr:{
// backgroundColor:"rgba(58,67,77,0.7)"
// },
anim_apeed:"0.6rpm",//旋转速度
size:{
//画布大小
width:"100%",
height:"100%"
}
})
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" type="text/css" scoped>
@import "~style/common.scss";
.PSViewer{
width: 100%;
height: 100%;
}
</style>
报错
vue.esm.js?efeb:1741 TypeError: (0 , _photoSphereViewer2.default) is not a function
at VueComponent.mounted (panorama.vue?46a5:41)
at callHook (vue.esm.js?efeb:2921)
at Object.insert (vue.esm.js?efeb:4158)
at invokeInsertHook (vue.esm.js?efeb:5960)
at VueComponent.patch [as __patch__] (vue.esm.js?efeb:6179)
at VueComponent.Vue._update (vue.esm.js?efeb:2670)
at VueComponent.updateComponent (vue.esm.js?efeb:2788)
at Watcher.get (vue.esm.js?efeb:3142)
at Watcher.run (vue.esm.js?efeb:3219)
at flushSchedulerQueue (vue.esm.js?efeb:2981)
把import PhotoSphereViewer from 'photo-sphere-viewer'
改成import { Viewer } from 'photo-sphere-viewer'
把PhotoSphereViewer 改成Viewer 就好了
const viewer = new Viewer({
container: document.getElementById('viewer'),
panorama: this.imgurl
})
我的是这样的
https://jingyan.baidu.com/article/5553fa821b491d25a339346e.html