使用saltui实现图片预览查看

项目是基于dingyou-dingtalk-mobile脚手架的一个微应用，这个脚手架使用的UI是antd-mobile，它提供了一个图片上传的组件，但是未提供图片预览的组件，在网上找了不少如何在react项目中实现图片预览查看的功能，大多数都是基于react-native的，比如https://segmentfault.com/a/1190000010090233里面所说的react-wx-images-viewer组件，以及https://www.jianshu.com/p/6374a1ec3f01里介绍的react-native-photo-browser组件，但是这个脚手架未引用到react-native，试着在该脚手架上安装react-native，进而使用这些组件，但是都报错了，无法实现。

看了下钉钉官方推荐的saltui，里面提供了图片预览的的功能，可参看https://salt-ui.github.io/components/image-viewer，立即按照其说明进行了安装。

打开nowaGui对于项目下的终端，输入以下命令行即可安装。

npm install saltui --save

接下来是在页面上的引用。加入以下两句即可。（当时在引用的时候少加了dd.css，导致一直没有使用成功，以为在这个脚手架中只能使用一种ui呢。）

import { ImageViewer,Boxs } from 'saltui';

import 'saltui/build/dd.css';

接下来即是获取图片数据、填充进组件里即可了

show =(index)=>{

        ImageViewer.show({

            photos: this.listForImageLook(this.state.imagesList),

            current: index,

          });

    }

const listForImage = (imagesList) => {

            let images = [];

            for(let i = 0; i < imagesList.length; i++) {

                let m  = {url : AUTH_URL + 'appImages/' + imagesList[i].imageName,id : imagesList[i].id};

                images.push(

                    <Box>

                    <img src={AUTH_URL + 'appImages/' + imagesList[i].imageName}  className="demo3-t-list-img"

                    onClick={this.show.bind(this,i)}/>

                    </Box>  );

            }

            return images;

        }

<div style={{display: this.state.imagesList.length == 0 ? 'none' : ''}}>

                <WhiteSpace size="lg" />

                <Card>

                <Card.Header

                    title={<span><font color="gray"> * </font>图片</span>}

                />

                <Card.Body  style={{width : '90%'}}>

                    <HBox vAlign="center">

                    <HBox flex={1}>

                        {listForImage(this.state.imagesList)}

                    </HBox>

                    </HBox>

                </Card.Body>

                </Card>

                </div>

秒客网

使用saltui实现图片预览查看

相关文章