本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下
imgPreview组件
e.stopPropagation()" v-bind:style="{ zoom: zoom }">
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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。