图片预览组件用于在全屏模式下预览图片,支持手势缩放、滑动切换等功能。
默认显示左右导航图标,支持点击切换图片。可通过 showNavigation 属性隐藏,通过 navigationPosition 属性设置位置:
center(默认):垂直居中bottom:底部位置images 属性支持两种格式:
字符串数组(图片地址)
const images = ['/image1.jpg', '/image2.jpg'];
对象数组(包含更多信息)
const images = [
{ url: '/image1.jpg', alt: '图片描述 1' },
{ url: '/image2.jpg', alt: '图片描述 2', thumbnail: '/thumb1.jpg' }
];
number:数字指示器,显示当前索引和总数dot:圆点指示器null:不显示指示器通过 children Snippet 可以自定义图片下方的内容区域,常用于显示图片描述、操作按钮等。
closable={true} 时显示maskClosable={true} 时有效(默认禁用)ImageList 组件使用