引入组件

局部引入

// parent.vue
const FLandscape = defineAsyncComponent(() => import('@/components/formaui/f-landscape/f-landscape.vue'))

基础用法

通过 v-model 控制显示隐藏，position 控制关闭图标位置，closeOnClickMask 控制点击遮罩是否关闭。

<f-landscape
  v-model="show"
  :position="position"
  :close-on-click-mask="closeOnClickMask"
  :is-close-icon="isCloseIcon"
  icon-left="50rpx"
  icon-right="50rpx"
  params="invite"
  @close="onClose">
  <image src="/static/images/img_invite_3x.png" mode="widthFix" style="width: 600rpx" />
</f-landscape>
<f-button width="100%" @click="show = true">打开压屏窗</f-button>

import { ref } from 'vue'
import type { FLandscapeCloseDetail, FLandscapeIconPosition } from '@/components/formaui/f-landscape/types'

const show = ref(false)
const position = ref<FLandscapeIconPosition>('bottom')
const closeOnClickMask = ref(true)
const isCloseIcon = ref(true)

const onClose = (detail: FLandscapeCloseDetail) => {
  uni.showToast({ title: `close: ${detail.params}`, icon: 'none' })
}

position属性：关闭图标位置（默认bottom）

可传入：bottom、top-right、top-left

<f-landscape v-model="show" position="top-right">
  <image src="/static/images/img_invite_3x.png" mode="widthFix" style="width: 600rpx" />
</f-landscape>

closeOnClickMask属性：是否点击遮罩关闭（默认true）

<f-landscape v-model="show" :close-on-click-mask="false">
  <image src="/static/images/img_invite_3x.png" mode="widthFix" style="width: 600rpx" />
</f-landscape>

插槽

名称	说明
default	压屏窗展示内容

属性

名称	类型	说明	默认值
v-model	boolean	是否显示压屏窗	-
zIndex	number	内容区 z-index	1001
isCloseIcon	boolean	是否显示关闭图标	true
iconColor	string	关闭图标颜色	#ffffff
iconSize	number / string	关闭图标大小	25
iconUnit	string	关闭图标单位，可传入[px、rpx]	px
position	string	关闭图标位置，可传入[bottom、top-right、top-left]	bottom
iconTop	string	关闭图标 top，position 为顶部时生效	-120rpx
iconBottom	string	关闭图标 bottom，position 为 bottom 时生效	-120rpx
iconLeft	string	关闭图标 left，position 为 top-left 时生效	0
iconRight	string	关闭图标 right，position 为 top-right 时生效	0
closeOnClickMask	boolean	是否点击遮罩关闭	true
isMask	boolean	是否显示遮罩	true
maskBgColor	string	遮罩背景色	rgba(0, 0, 0, 0.6)
maskZIndex	number	遮罩 z-index	1000
params	number / string	关闭回调自定义参数，随 close 带回	0

事件

事件名	说明	回调参数
close	关闭时触发（图标或遮罩）	{ params }

方法

方法名	说明	传入参数
-	-	-