html5双击图层放大,vue.js实现双击放大预览功能

本文实例为大家分享了vue.js实现双击放大预览的具体代码，供大家参考，具体内容如下

imgPreview组件

e.stopPropagation()" v-bind:style="{ zoom: zoom }">

e.stopPropagation()" class="btns">

export default {

props: {

initImgIndex: {

required: true

},

imgList: {

required: true,

},

visible: {

required: true

},

},

data() {

return {

src: '',

pasteText: '',

zoom: '100%',

imgIndex: 0,

deg: 0,

firstTag: true

}

},

created () {

this.imgIndex = this.initImgIndex

},

watch: {

visible(val) {

this.imgIndex = this.initImgIndex

this.zoom = '100%'

this.firstTag = true

this.$emit('update:visible', val);

if (val) {

this.$emit('open');

} else {

this.$el.removeEventListener('scroll', this.updatePopper);

this.$emit('close');

}

}

},

methods: {

imgToSize(oBool) {

if (this.firstTag && !oBool && document.getElementById('oImg') && document.getElementById('oImg').naturalWidth > window.innerWidth) {

this.zoom = parseInt(window.innerWidth * 0.9 / document.getElementById('oImg').naturalWidth * 100) + '%'

this.firstTag = false

}

if ((document.getElementById('oImg').width * parseInt(this.zoom) / 100 <= 200 || this.zoom == '2%') && !oBool) {

this.$message.info('已经最小了！')

return

}

if (document.getElementById('oImg') && document.getElementById('oImg').x <= window.innerWidth * 0.05 && oBool) {

this.$message.info('已经最大了！')

return

}

this.zoom = parseInt(this.zoom) + (oBool ? 2 : -2) + '%';

},

rotate () {

this.deg += 90

},

nextImg (e) {

e.stopPropagation()

if (this.imgIndex == this.imgList.length-1) {

this.imgIndex = 0

} else {

this.imgIndex ++

}

},

preImg(e) {

e.stopPropagation()

if (this.imgIndex == 0) {

this.imgIndex = this.imgList.length - 1

} else {

this.imgIndex --

}

},

hide (cancel) {

if (cancel !== false) {

this.$emit('update:visible', false);

this.$emit('visible-change', false);

}

},

}

}

.img_model{

position: fixed;

width: 100%;

min-height: 100%;

background: rgba(0,0,0,.5);

top: 0;

left: 0;

z-index: 9999;

/* text-align: center; */

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.center-box {

position: relative;

max-width: 90%;

}

.img_model .img_box {

max-width: 100%;

max-height: 800px;

overflow-y: scroll;

}

.img_model .img_box::-webkit-scrollbar {

display: none;

}

.img_model .img_box img{

max-width: 100%;

}

.img_model .img-btn {

position: absolute;

top: 50%;

transform: translateY(-50%);

z-index: 100;

width: 50px;

height: 70px;

font-size: 30px;

line-height: 70px;

text-align: center;

background: rgba(255, 255, 255, .3);

color: #FFF;

}

.img_model .btn-pre {

left: 5%;

}

.img_model .btn-next {

right: 5%;

}

.img_model .img_box .btn-next {

right: 20rpx;

}

.img_model .btns{

position: fixed;

bottom: 25px;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

}

引入这个组件

import imgPreview from './imgPreview'

data:{

return{

bigImgShow: false,

bigImgIndex:'',

imgList:[],

}

}

components: {

imgPreview

},

method:{

previewImage (imgList, index) {

if (imgList) {

this.imgList = imgList

this.bigImgIndex = index

this.bigImgShow = true

}

},

}

template里面渲染

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。