variable-viewer

a variable image viewer

Usage no npm install needed!

<script type="module">
  import variableViewer from 'https://cdn.skypack.dev/variable-viewer';
</script>

README

介绍

小窗口图片查看,窗口可调整大小 可调整窗口所在位置， 图片可旋转放大查看 可下载

install

npm install variable-viewer

全局引入使用

<!-- 引入 -->
import imgView from 'variable-viewer'
<!-- 定义为全局可调用 -->
Vue.prototype.$imgView = imgView

页面调用-传入url

this.$imgView(url)

关闭

this.$imgView.close()

监测指定dom区域图片

document.getElementById(id).addEventListener('click', function(e) {
  let theTarget = e.target;
  let dom = e.target.tagName.toLowerCase();
  if(dom === 'img') {
    that.$imgView(theTarget.src)
  }
})

监测iframe内部图片

document.getElementById(id).contentWindow.addEventListener('click', function(e) {
  let theTarget = e.target;
  let dom = e.target.tagName.toLowerCase();
  if(dom === 'img') {
    that.$imgView(theTarget.src)
  }
})

单vue页面销毁时 关闭图片弹窗 防止用户未关闭 router跳转时仍存在

beforeDestroy(){
  this.$imgView.close()
},