【VUE】Vue使用v-viewer挂载到指定节点

1.前情提要

最近有个项目有个页面的div需要全屏操作，该div下图片又需要能够预览展示（此处使用了v-viewer实现），于是问题来了：当在正常浏览器窗口模式下，v-viewer预览图片时正常全屏显示，而当该div全屏后再点击图片预览发现v-viewer预览图片的全屏被div的全屏覆盖，导致无法正常使用该功能。

2.解决方法

根据v-viewer和viewerjs的GitHub文档说明
v-viewer是基于viewerjs实现的
而在viewerjs中有个Options里面有个container属性，这个container就是用于控制图片预览时要挂载在哪个节点元素上，默认是body。

3.开始实操

在需要使用到的页面上添加如下代码

<script>
//解决全屏图片问题
import Viewer from 'viewerjs'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
Viewer.setDefaults({
  container:document.getElementById('fullscreen')
})

 mounted() {
    //解决全屏图片问题
    Viewer.setDefaults({
    //fullscreen为需要挂载的节点元素的ID
    	container:document.getElementById('fullscreen')
    	})
  },
</script>

同时在其他有使用到v-viewer但是没有全屏的页面建议添加如下代码块防止报错

//解决全屏图片问题
<script>
import Viewer from 'viewerjs'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
Viewer.setDefaults({
  container:null
})
 mounted() {
    //解决全屏图片问题
    Viewer.setDefaults({
    //设置为null会自动默认挂载到body上
    	container:null
    	})
  },
</script>

拓展阅读

【VUE】Vue使用v-viewer实现图片大图预览效果
【VUE】vue实现div全屏效果