ImagePreview 图片预览
使用指南
ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
import { ImagePreview } from 'fs-ui'
1
代码演示
基础用法
直接传入图片数组，即可展示图片预览
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
])
1
2
3
4
2
3
4
指定初始位置
ImagePreview({
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
startPosition: 1,
})
1
2
3
4
5
6
7
2
3
4
5
6
7
3秒后自动关闭
const instance = ImagePreview({
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
asyncClose: true
})
setTimeout(() => {
instance.value = false
}, 3000)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
不显示页码
ImagePreview({
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
],
showIndex: false,
})
1
2
3
4
5
6
7
2
3
4
5
6
7
html用法
<fs-image-preview
:images="images"
:value="show"
@close="show = false"/>
1
2
3
4
2
3
4
export default {
data () {
return {
show: false,
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
}
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| images | 需要预览的图片 URL 数组 | Array | - |
| value | 是否显示 | Boolen | true |
| showIndex | 是否显示页码 | Boolen | true |
| startPosition | 图片预览起始位置索引 | Number | 0 |
| asyncClose | 是否开启异步关闭 | Boolen | false |
| onClose | 关闭事件 | Function | - |
事件
| 事件 | 说明 | 返回值 |
|---|---|---|
| onClose | 关闭事件 | index, url |