# tui-landscape 压屏窗

介绍

压屏窗,常用于一些活动弹窗。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiLandscape from "@/components/thorui/tui-landscape/tui-landscape"
export default {
	components:{
		tuiLandscape
	}
}

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

# uni-app版本平台差异说明

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

# 微信小程序引入(可在app.json中全局引入)

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

# 代码演示

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

基础使用

通过 show 属性控制组件的显示隐藏,position 属性控制关闭图标的位置,maskClosable 属性控制点击遮罩是否可以关闭。

<!--uni-app-->
<tui-landscape :show="show" :position="position" :maskClosable="maskClosable" iconLeft="50rpx" iconRight="50rpx" @close="close">
	<image src="https://www.thorui.cn/extend/common/img_invite_3x.png" mode="widthFix" style="width: 600rpx;"/>
</tui-landscape>

<!--微信小程序-->
<tui-landscape show="{{show}}" position="{{position}}" maskClosable="{{maskClosable}}" iconLeft="50rpx"
iconRight="50rpx" bindclose="close">
<image src="https://www.thorui.cn/extend/common/img_invite_3x.png" mode="widthFix" style="width: 600rpx;" />
</tui-landscape>

# Slots

名称 说明
default 弹窗显示内容

# Props

参数 类型 说明 默认值
show Boolean 是否显示 false
zIndex Number 显示内容区z-index 1001
closeIcon Boolean 是否需要关闭图标 true
iconColor String 关闭图标颜色 #fff
iconSize Number 关闭图标大小,单位px 25
position [Number, String] 关闭图标位置:1-底部 2-右上角 3-左上角 1
iconTop String 关闭图标top值,position为2或3的时候生效 -120rpx
iconBottom String 关闭图标bottom值,position为1的时候生效 -120rpx
iconLeft String 关闭图标left值,position为3的时候生效 0
iconRight String 关闭图标right值,position为2的时候生效 0
maskClosable Boolean 点击遮罩是否可以关闭 true
mask Boolean 是否需要遮罩 true
maskBgColor String 遮罩背景色 rgba(0,0,0,.6)
maskZIndex Number 遮罩z-index值 1000
params [Number, String] 自定义参数 0

# Events

事件名 说明 回调参数
close 点击遮罩时触发,通知关闭弹窗 {params}

# 预览

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

# 线上程序扫码预览

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