tui-gallery 图片预览

介绍

gallery，类似uni.previewImage（wx.previewImage）的展示效果。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiGallery from "@/components/thorui/tui-gallery/tui-gallery.vue"
export default {
	components:{
		tuiGallery
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-gallery": "/components/thorui/tui-gallery/tui-gallery"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 urls 属性传入图片信息，show 属性控制显示隐藏。

<!--uni-app-->
<tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery>

<!--微信小程序-->
<tui-gallery urls="{{urls}}" show="{{show}}" bindhide="hide"></tui-gallery>

Slots

none

Props

参数	类型	说明	默认值
urls	Array	图片数据	[ ]
showDelete	Boolean	是否显示删除按钮	false
show	Boolean	是否显示预览弹层	false
current	Number	当前显示的图片索引	0
hideOnClick	Boolean	点击时是否触发hide事件	true

urls 属性参数说明

//数据格式如下，其中src为图片地址，desc为图片描述文字（如果没有描述，可不传）
[{
	src:'https://thorui.cn/reward.jpg',
	desc:'欢迎使用ThorUI，文字描述文字描述文字描述'
},{
	src:'https://thorui.cn/img_banner_2.png',
	desc:'欢迎使用ThorUI~'
}]

Events

事件名	说明	回调参数
change	图片左右切换时触发	{ current : 当前图片索引 }
delete	删除图片时触发	{ url : 图片url , index : 被删除图片索引 }
hide	点击图片时触发，通知隐藏	{ }

预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码