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()
},