antd

2018-12-21 umi dva react框架中,集成an

2018-12-21  本文已影响22人  大唐帝国

在react全家桶 umi框架中,集成antd design 中的upload组件,出现一个问题:
在IOS浏览器中需要双击才能打开图片等。问题和github上的这个问题差不多:

https://github.com/ant-design/ant-design/issues/10854

具体问题的原因可以查看上面链接的最后一个回复。
直接给解决办法:
把upload下的所有组件即:
在uploadButton上全部添加className=needsclick

import cls from "classnames";

    render() {
        const { previewVisible, previewImage, fileList } = this.state;
        const { token } = this.props;
        const data = {
            token: token,
        };
        const uploadButton = (
            <div className="needsclick">
                <i  className={cls(`iconfont needsclick icon-jiahao1`, styles.uploadIcon)}></i>
                <div  className={cls(`needsclick`, styles['ant-upload-text'])}>上传图片</div>
            </div>
        );
        return (
            <div className={cls(`clearfix`, styles.uploadWrapper)}>
                <Upload
                    ref={this.upload}
                    action={config.qiniu}
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    data={data}
                    name="file"
                >
                    {fileList.length >= 6 ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage}/>
                </Modal>
                
            </div>
        );
    }
上一篇 下一篇

猜你喜欢

热点阅读