主题
Gallery 画廊
全屏预览图片，支持滑动切换和描述文字。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 图片预览 -->
<fui-gallery :show="showGallery" :urls="images" @hide="showGallery = false" />在页面中声明 showGallery 和 images。图片数据可使用地址字符串或包含 src、descr 的对象。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| urls | Array | 图片数据 | [] |
| srcKey | String | 图片地址字段名 | src |
| descrKey | String | 图片描述字段名 | descr |
| show | Boolean | 是否显示 | false |
| current | Number / String | 当前图片索引，从 0 开始 | 0 |
| ellipsis | Boolean | 描述超过一行时是否省略 | false |
| zIndex | Number / String | 层级，nvue 不支持 | 1001 |
| safeArea | Boolean | 是否适配底部安全区 | true |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 切换图片时触发 | { index } |
| hide | 点击图片时触发 | {} |
收到 hide 后需由页面更新 show。nvue 中元素顺序影响显示层级。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |