94 lines
2.5 KiB
HTML
94 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="./Vue/index.css">
|
|
<link rel="stylesheet" href="./Vue/w-e-text.css">
|
|
<script src="./Vue/vue.js"></script>
|
|
<script src="./Vue/index.js"></script>
|
|
<link href="./viewerJs/dist/viewer.css" rel="stylesheet">
|
|
<script src="./viewerJs/dist/viewer.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="pictureHtml" style="width: 100%;height: 100%;">
|
|
<img :src="url" id="imgShow" :alt="url" title="图片预览">
|
|
</div>
|
|
</body>
|
|
<script>
|
|
let viewer = null
|
|
function close() {
|
|
console.log('图片关闭被调用了', viewer);
|
|
viewer.destroy()
|
|
}
|
|
new Vue({
|
|
el: '#pictureHtml',
|
|
data() {
|
|
return {
|
|
url: '',
|
|
}
|
|
},
|
|
methods: {
|
|
setImgTools() {
|
|
console.log('重新渲染', 123);
|
|
let img = document.getElementById('imgShow')
|
|
if (!img) {
|
|
return
|
|
}
|
|
img.onload = () => {
|
|
viewer = new Viewer(img, {
|
|
toolbar: {
|
|
zoomIn: 4,
|
|
zoomOut: 4,
|
|
oneToOne: false,
|
|
reset: false,
|
|
prev: false,
|
|
play: {
|
|
show: 4,
|
|
size: 'large',
|
|
},
|
|
next: false,
|
|
rotateLeft: false,
|
|
rotateRight: false,
|
|
flipHorizontal: 4,
|
|
flipVertical: 4,
|
|
},
|
|
zoomRatio: 0.5
|
|
})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('message', (data) => {
|
|
this.url = data.data
|
|
console.error('图片地址', this.url);
|
|
})
|
|
this.$nextTick(() => {
|
|
this.setImgTools()
|
|
})
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
</html> |