使用el-dialog放大图片

最新推荐文章于 2024-08-04 23:12:45 发布

未来的农场主

最新推荐文章于 2024-08-04 23:12:45 发布

阅读量751

点赞数

文章标签： vue.js javascript

原文链接：https://blog.csdn.net/qq_36410795/article/details/99608307

版权

使用el-dialog使点击图片放大，参考下面这位前辈的方法，成功实现。vue 模态框 el-dialog 实现点击图片查看大图功能_@必意玲-CSDN博客<img :src="item.content" class="avatar" @click="imgViewDialog_show(item)" /><el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="fa...https://blog.csdn.net/qq_36410795/article/details/99608307

div样式代码：

<div style="margin-top: 20px">
                    <el-card shadow="always">
                        <li>
                                        <span>现场照片：
                                            <el-image style="width: 65px; height: 65px"

                                                      v-for="url in certificatePhoto" :key="url" :src="url"
                                                      @click="imgViewDialog_show(url)"
                                                      >
                                                </el-image>
                                           </span>
                            <!-- 弹出dialog大图 -->
                            <el-dialog title :visible.sync="imgViewDialogVisible" class="imgView-dialog" :modal="false">
                                <div class="main">
                                    <img width="100%" :src="imgViewDialog_imgSrc" />
                                </div>
                            </el-dialog>
                            <span>签约地点:{{this.location.positionAddress}}</span>
                        </li>
                    </el-card>
                </div>

<script>定义

<script>
export default {
data() {
            return {
                imgViewDialogVisible: false, // 控制dialog显示隐藏
                imgViewDialog_imgSrc: "", // 控制图片src
          }
     }
}

methods方法

methods: {
            /**
             * 图片dialog_显示
             */
            imgViewDialog_show: function(url) {
                debugger
                this.imgViewDialogVisible = true;
                this.imgViewDialog_imgSrc = url;
            },
            /**
             * 图片dialog_关闭
             */
            imgViewDialog_close: function() {
                this.imgViewDialogVisible = false;
                var self = this;
                setTimeout(function() {
                    self.imgViewDialog_imgSrc = "";
                }, 100);
            },

//这下面是后端传过来的数据 ，图片数据是 this.certificatePhoto到下面的if这一段
setHonourInfo(param) {
                this.$http.post("post地址根据需要填写" + param.id).then((res) => {
                    let data = res.data.data;
                    this.honourId = param.id;
                    this.customerInfo = data.signMember;
                    if (this.customerInfo == null) {
                        this.customerInfo = data.signId.signUser;
                    }
                   
                    this.certificatePhoto = [];
                    let sign = data.signId.signImageList;
                    if (sign != null && sign.length > 0) {
                        for (let i = 0; i < sign.length; i++) {
                            let img = sign[i];
                                this.certificatePhoto.push(img.url);
                            }

                        }
                    this.location = data.signId;
                    this.doctor = data.signId;
                    this.updateStyle(data.signId);
                    this.updatePackageColor(data);
                });
            }
}