1、ctrl+鼠标中键。放大缩小文件
<vue-office-pdf
v-if="isPdf"
:src="pdf"
:style="{ transform: 'rotate(' + rotationAngle + 'deg)', zoom: rollActive }"
class="doc-wrap view-wrap"
@rendered="renderedHandler"
@error="errorHandler"
/>
<el-image
v-if="isImage"
:src="image"
:preview-src-list="[image]"
:style="{ transform: 'rotate(' + rotationAngle + 'deg)', zoom: rollActive }"
fit="contain"
class="doc-wrap"
/>
rotationAngle: 0, // 旋转度数
rollActive: 1 // 滚轮值
mounted() {
window.addEventListener('wheel', this.handleMouseWheel, {
passive: false
})
},
beforeDestroy() {
window.removeEventListener('wheel', this.handleMouseWheel, {
passive: false
})
},
rotateImage() {
this.rotationAngle += 90 // 每次点击旋转90度
},
handleMouseWheel(e) {
if (!window.scrollY && e.ctrlKey) {
// 禁止页面滚动
e.preventDefault()
if (e.wheelDelta) {
// 判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) {
this.rollActive = Math.round((this.rollActive + 0.1) * 10) / 10
if (this.rollActive > 2) { this.rollActive = 2 }
}
if (e.wheelDelta < 0) {
// 当滑轮向下滚动时
this.rollActive = Math.round((this.rollActive - 0.1) * 10) / 10
if (this.rollActive < 0.5) { this.rollActive = 0.5 }
}
this.$emit('updateRoll', this.rollActive)
}
}
}