PreviewImages 预览图片组件文档 BeerUi-官方文档

主页组件更新日志其它

PreviewImages 预览图片

基础用法

预览多图

		
import { previewImages } from '@brewer/beerui'
const list = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg', '/images/5.jpg', '/images/6.jpg']
const clickImage = (src: string) => {
	const p1 = previewImages(src, list)
	// 调用方法 监听图片的改变
	p1.watchHandle(res => console.log(res))
}
		
{#each list as item}
	<img class='demo-list-image' on:click={() => {clickImage(item)}} src={item} alt=''>
{/each}

显示代码

预览一张图

		
import { previewImages } from '@brewer/beerui'

		
<img class='demo-list-image' on:click={() => {previewImages('/images/7.jpg')}} src='/images/7.jpg' alt=''>

显示代码

Attributes

参数	说明	类型	可选值	默认值
src	当前需要展示图片的src	string	-	''
list	需要展示图片的src数组	Array	-	[]

Events

事件名称	说明	回调参数
cb	图片切换后监听的回调	''

Contributors

Resource

Github