element用el-dialog实现查看图片的大小和原图尺寸一样

最新推荐文章于 2024-06-04 09:39:48 发布

指标满载

最新推荐文章于 2024-06-04 09:39:48 发布

阅读量2.8k

点赞数 1

文章标签：图片自适应原图尺寸弹窗显示

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/105369012

版权

本文介绍了如何利用Element UI的el-dialog组件，创建一个弹窗展示图片，确保图片在dialog中以原图尺寸完整显示。通过动态调整dialog的宽度以适应图片宽度，实现了图片的自适应展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我会弹出一个dialog 里面是轮播图片,让这个dialog的宽度长度根据图片的变化而变化,让图片百分百的展示出来。由于dialog的高度是自适应的，只要获取图片宽度赋值给dialog就能实现

<el-dialog
    append-to-body
    :visible.sync="visible"
    :width="width">
  <img :src="src" @load="onLoad">
</el-dialog>

data() {
  return {
    src: '',
    width: '',
    visible: false,
  };
},
methods: {
  onLoad(e){
    const img = e.target;
    let width = 0;
    if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
      width = img.width + 40;
    }
    this.width = width + 'px';
  },
}