HalfScreen 半屏弹窗 V1.2.1+

概述

HalfScreen 半屏弹窗，从底部弹出的浮层，引导用户进行相关操作，支持滑动关闭。

温馨提示

使用该组件 需要 同时引入 fui-icon 组件，非easycom模式使用时需要在组件内部手动引入。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiHalfScreen from "@/components/firstui/fui-half-screen/fui-half-screen.uvue"
export default {
	components:{
		fuiHalfScreen
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 title 属性设置标题， 通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。

<fui-button type="gray" btn-size="medium" text="基础使用" :bold="true" margin="24rpx"
	@onclick="showPopup"></fui-button>
<fui-half-screen ref="halfRef" title="标题一">
	<fui-list-cell @onclick="onTap" v-for="(item,index) in list" :key="index">item{{item}}</fui-list-cell>
</fui-half-screen>

import { ComponentPublicInstance } from 'vue'
export default {
	data() {
		return {
			list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
		}
	},
	methods: {
		toast(text : string) {
			uni.showToast({
				title: text,
				icon: 'none',
				duration: 2000
			})
		},
		showPopup() {
			(this.$refs['halfRef'] as ComponentPublicInstance).$callMethod('show');
		},
		onTap() {
			this.toast('点击了～');
			//关闭弹层
			(this.$refs['halfRef'] as ComponentPublicInstance).$callMethod('hidden');
		}
	}
}

Slots

插槽名称	说明
default	自定义显示内容

Props

属性名	类型	说明	默认值	平台差异说明
height	Number	弹窗高度，设置为0则为auto	640	-
unit	String	高度单位，rpx｜px	rpx	-
background	String	弹窗背景颜色	#fff	-
title	String	标题内容	-	-
size	Number	标题字体大小，单位rpx	32	-
isBold	Boolean	标题字体是否加粗	false	-
color	String	标题字体颜色	#181818	-
radius	Number	弹窗顶部左右圆角值，单位rpx	24	-
zIndex	Number	弹窗z-index值	996	-
closeIcon	Boolean	是否显示关闭图标	true	-
iconColor	String	关闭图标颜色	#ccc	-
maskClosable	Boolean	点击遮罩是否关闭弹窗	false	-
maskBackground	String	遮罩背景颜色	rgba(0,0,0,.6)	-
threshold	Number	滑动多少距离以上弹窗关闭，单位px	60	-
disabled	Boolean	是否禁止滑动关闭弹窗	false	-
safeArea	Boolean	是否适配iphonex等机型底部安全区	true	-

Events

事件名	类型	说明	回调参数
@close	(event: number) => void	弹窗关闭时触发	number：1-点击遮罩关闭 2-滑动关闭 3-点击关闭按钮

Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。

方法名	类型	说明	传入参数
show	()=>void	显示弹窗	-
hidden	()=>void	关闭弹窗	-

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP unix版VIP用户可免费使用 。

开通会员 (opens new window)