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 属性控制显示隐藏。

<template>
 <view class="container">
 	<view class="tui-page__bd">
 		<tui-gallery :urls="urls" :show="show" @hide="hide"></tui-gallery>
 		<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="previewImage">预览大图</tui-button>
 	</view>
 </view>
</template>

<script>
 export default {
 	data() {
 		return {
 			urls: [{
 				src:'https://thorui.cn/img/reward.jpg',
 				desc:'欢迎使用ThorUI，文字描述文字描述文字描述'
 			},{
 				src:'https://thorui.cn/extend/cafe/img_banner_2.png',
 				desc:'欢迎使用ThorUI~'
 			}],
 			show: false
 		};
 	},
 	methods: {
 		previewImage() {
 			this.show = true
 		},
 		hide(){
 			this.show = false
 		}
 	}
 };
</script>

<style>

</style>

<!-- 示例中使用到的组件请自行引入 -->
<view class="container">
 <view class="tui-page__bd">
 	<tui-gallery urls="{{urls}}" show="{{show}}" bindhide="hide"></tui-gallery>
 	<tui-button type="gray-primary" size="{{34}}" bold width="372rpx" height="84rpx" margin="40rpx auto" bindclick="previewImage">预览大图</tui-button>
 </view>
</view>

// data 数据 及 方法
Page({
  data: {
    urls: [{
      src:'https://thorui.cn/img/reward.jpg',
      desc:'欢迎使用ThorUI，文字描述文字描述文字描述'
    },{
      src:'https://thorui.cn/extend/cafe/img_banner_2.png',
      desc:'欢迎使用ThorUI~'
    }],
    show: false
  },
  previewImage() {
    this.setData({
      show:true
    })
  },
  hide(){
    this.setData({
      show:false
    })
  }
})

// Make sure to add code blocks to your code group

TIP

点击图片时会触发 hide 事件，需自行在事件中设置 show 属性为 false 以关闭预览。

Slots

插槽名称	插槽说明
-	-

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

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

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

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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