vue+layui预览图片显示原始大小
vue methods方法
showImg: function (index) {
var img = new Image();
img.src = this.domain.picUrls[index];
var height = img.height + 50; //获取图片高度
var width = img.width; //获取图片宽度
var imgHtml = "<img src='" + this.domain.picUrls[index] + "' />";
//弹出层
top.layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [width + 'px', height + 'px'],
shadeClose: true,//点击外围关闭弹窗
scrollbar: false,//不现实滚动条
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
top.layer.open 直接弹出到最顶层，不会被遮挡。
<div class="layui-col-xs10">
<div class="u-preview" v-for="(item,index) in domain.picUrls">
<i class="iconfont iconsmalldel" @click="delectImg(index)"></i>
<img :src="item" alt="" @click="showImg(index)">
</div>
</div>
我这里是多图，单图可以直接传url
@click="showImg(item)"
效果图：
