layui点击图片放大

Posted 2020-12-26 wangbiubiu

显示的图片
<div class="form-group  col-md-6">
    <div class="col-sm-3 control-label"><span class="require">*</span>&nbsp;图片</div>
    <div class="col-sm-9">
        <!--<input type="text" class="form-control" v-model="busMoments.photos" placeholder="图片"-->
        <!--data-rule="图片:required;length(0~5000)" maxlength="5000"/>-->
        <div class="col-sm-label" >
            <!--<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 100%;height: 232px;">-->
                <div class="layui-upload-list" >
            <span v-for="option,index in imgList" :id=index>
                <img :src=option class="layui-upload-img" border="1px" style="width: 90px;height: 90px;padding: 5px" @click="amplificationImg(option)"/>
            </span>
                </div>
            <!--</blockquote>-->
    </div>
    </div>
</div>
放大的显示图片

<img  style="display:none" id="displayImg" src="" />

js代码

<script>
    function amplificationImg( url) {
        $("#displayImg").attr("src", url);
        var height = $("#displayImg").height();//拿的图片原来宽高，建议自定义宽高
        var width = $("#displayImg").width();
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: [width + ‘px‘, height + ‘px‘], //宽高
            content: "<img src=" + url + " />"
        });
    }
</script>