PC端vue简单图片预览

    选择打赏方式

本站已不再更新,最新资源请前往zcjun.com获取!

css

.img-show-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .5);
}
 
.img-show-mask .bigImg {
    width: 500px;
    height: 280px;
    position: absolute;
    z-index: 3100;
    top: 0;
    left: 0;
    margin: auto;
}

html

<div class="img-show-mask" id="img-show-mask" v-show="maskBtn" @click="closeBigImg"><img :src="bigImgSrc" class="bigImg" id="bigImg" /></div>

js

export default {
        data() {
            return {               
				maskBtn:false,			                                        
                
            }
        },
        mounted: function () {
 
			
        },
        methods: {
 
            bigImgShow: function(url) { //打开图片预览
				this.bigImgSrc = url;
				this.maskBtn = true;
				this.$nextTick(function() {
					var imgShowMask = document.getElementById('img-show-mask');
					var img = document.getElementById('bigImg');
					var w = document.documentElement.clientWidth || document.body.clientWidth;
					var h = document.documentElement.clientHeight || document.body.clientHeight;
					var offsetY=window.pageYOffset;
					var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
						imgShowMask.style.height=scrollHeight+'px';
						img.style.left=(w/2-250)+'px';
						img.style.top=(h/2-70+offsetY)+'px';
				});
 
			},
			closeBigImg: function() { //关闭图片预览
				this.maskBtn = false;
			},
    
        },
    }

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:PC端vue简单图片预览 https://old.zcjun.com/learn/533.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!