# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码