Skip to main content

Image

预览图片

图片展示​

function App() {
  const ImgSrc = 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  const ImgSrc2 = 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
  const ImgSrc3 = 'https://kf-ui.cdn-go.cn/weapp-image/latest/pc-kfcloud/img/view-test.jpg'
  const args = {
    src: ImgSrc,
    zIndex: 999,
    initIndex: 1,
    previewSrcList: [ImgSrc, ImgSrc2, ImgSrc3],
    closeOnMark: true,
    visible: true,
    type: 'mini',
    maxScale: 10,
  }
  return (
    <div className="ykui-demo-row">
      <div style={{ width: '300px', height: '300px', textAlign: 'center' }}>
        <Image {...args} />
      </div>
    </div>
  );
}

按钮文字形式​

传参参考 MoveModel

function App() {
  const [visiable, setVisiable] = useState(false)
  const previewSrcList = ['https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg', 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://kf-ui.cdn-go.cn/weapp-image/latest/pc-kfcloud/img/view-test.jpg']
  return (
    <div className="ykui-demo-row">
      <Button type="primary" onClick={() => setVisiable(true)}>点击查看</Button>
      {visiable && <div style={{ width: '300px', height: '300px', textAlign: 'center' }}>
        <ImageModel
            list={previewSrcList}
            isMini={true}
            miniWidth={1000}
            miniHeight={800}
            zIndex={999}
            initIndex={1}
            onClose={() => setVisiable(false)}
            movable={true}
            maxScale={10}
            scaleStep={0.5}
          />
      </div>
      }
    </div>
  );
}

弹窗不可移动​

movable : false 为不可移动

function App() {
  const ImgSrc = 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  const ImgSrc2 = 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
  const ImgSrc3 = 'https://kf-ui.cdn-go.cn/weapp-image/latest/pc-kfcloud/img/view-test.jpg'
  const args = {
    src: ImgSrc,
    zIndex: 999,
    initIndex: 1,
    previewSrcList: [ImgSrc, ImgSrc2, ImgSrc3],
    closeOnMark: true,
    visible: true,
    type: 'mini',
    movable: false,
    maxScale: 10,
  }
  return (
    <div className="ykui-demo-row">
      <div style={{ width: '300px', height: '300px', textAlign: 'center' }}>
        <Image {...args} />
      </div>
    </div>
  );
}

Image API​

属性说明类型默认值
src图片地址string--
alt图片altstring--
type预览类型mini〡normal--
miniWidth最小宽度number--
miniHeight最小高度number--
movable是否可移动booleantrue
previewSrcList预览图片集合string[]--
style样式object--
zIndex显示层级number--
initIndex初始化时图片在队列中位置number--
onClose关闭弹窗时调用Function--
onOpen打开弹窗时调用Function--
onClick点击弹窗时调用Function--
className类名string--
maxScale最大比例number--
scaleStep每次放大或缩小的比例number--