react常用UI组件的Dialog中显示图片的问题

Fusion Next

由于图片的加载需要时间，所以Dialog的位置并不一定会居中显示，使用shouldUpdatePosition属性会使Dialog抖动，效果并不好。所以在图片的外部加上一个元素设置为图片的宽高，这样可以保证Dialog的居中显示。

import React, { Component } from "react";
import { Button, Dialog } from '@alifd/next';

const imgData = [
  { text: '第一张', url: 'http://img95.699pic.com/photo/50108/3847.jpg_wh300.jpg' },
  { text: '第二张', url: 'http://img95.699pic.com/photo/50129/2449.jpg_wh300.jpg' },
  { text: '第三张', url: 'http://img95.699pic.com/photo/50125/2073.jpg_wh300.jpg' },
]

export default class DialogExer extends Component {
  state = {
    visible: false, // 弹窗的显示控制
    imgUrl: '', // 弹窗中显示的图片地址
    imgContainerStyle: {}, // 图片外层容器的样式
  }

  // 切换图片的显示
  toggleVisible = (bool, imgUrl) => {
    if (bool) {
      let imgContainerStyle = {};
      // 创建img对象
      const img = new Image();
      img.src = imgUrl;
      img.onload = () => {
        imgContainerStyle = { width: img.width, height: img.height };
        this.setState({
          visible: bool,
          imgUrl: imgUrl,
          imgContainerStyle,
        });
      };
    } else {
      this.setState({
        visible: bool,
      });
    }
  };

  render() {
    const { visible, imgUrl, imgContainerStyle } = this.state;
    return (
      <div>
        {imgData.map(item => <Button onClick={() => this.toggleVisible(true, item.url)} key={item.text}>{item.text}</Button>)}
        <Dialog
          title="Basic Modal"
          visible={visible && Boolean(imgUrl)}
          onOk={() => this.toggleVisible(false)}
          onCancel={() => this.toggleVisible(false)}
          onClose={() => this.toggleVisible(false)}
        >
          <div style={imgContainerStyle}>
            <img src={imgUrl} />
          </div>
        </Dialog>
      </div>
    )  
  }
}

Ant Design

Modal对话框显示图片的居中显示问题

Modal对话框中显示的图片可能会有变化，所以我们无法确定一个固定的width，所以将width设置为auto，并且将centered设置为true，即能实现Modal对话框的宽度为图片的宽度，且居中显示.

关闭的时候会有瞬间没有内容的Modal显示

将destroyOnClose属性设置为true即可。

import React, { Component } from "react";
import { Modal, Button } from 'antd';

const imgData = [
  { text: '第一张', url: 'http://img95.699pic.com/photo/50108/3847.jpg_wh300.jpg' },
  { text: '第二张', url: 'http://img95.699pic.com/photo/50129/2449.jpg_wh300.jpg' },
  { text: '第三张', url: 'http://img95.699pic.com/photo/50125/2073.jpg_wh300.jpg' },
]

export default class DialogExer extends Component {
  state = {
    visible: false, // 弹窗的显示控制
    imgUrl: '', // 弹窗中显示的图片地址
  }

  // 切换图片的显示
  toggleVisible = imgUrl => {
    this.setState({
      visible: !this.state.visible,
      imgUrl,
    });
  };

  render() {
    const { visible, imgUrl } = this.state;
    return (
      <div>
        {imgData.map(item => <Button onClick={() => this.toggleVisible(item.url)} key={item.text}>{item.text}</Button>)}
        <Modal
          title="Basic Modal"
          visible={visible && Boolean(imgUrl)}
          onOk={this.toggleVisible}
          onCancel={this.toggleVisible}
          width="auto"
          centered
          destroyOnClose
        >
          <img src={imgUrl} />
        </Modal>
      </div>
    )  
  }
}