HuajisheTools/HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/popup/README.md

title, description, spline, isComponent

title	description	spline	isComponent
Popup 弹出层	由其他控件触发，屏幕滑出或弹出一块自定义内容区域。	message	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-popup": "tdesign-miniprogram/popup/popup"
}

代码演示

在开发者工具中预览效果

Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"

组件类型

基础弹出层

{{ base }}

组件示例

应用示例

{{ with-title }}

{{ custom-close }}

API

Popup Props

名称	类型	默认值	描述	必传
style	Object	-	样式	N
custom-style	Object	-	样式，一般用于开启虚拟化组件节点场景	N
close-btn	Boolean / Slot	-	关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮。通用类型定义	N
close-on-overlay-click	Boolean	true	点击遮罩层是否关闭	N
content	String / Slot	-	浮层里面的内容。通用类型定义	N
duration	Number	240	动画过渡时间	N
overlay-props	Object	{}	遮罩层的属性，透传至 overlay。TS 类型：OverlayProps，Overlay API Documents。详细类型定义	N
placement	String	top	浮层出现位置。可选项：top/left/right/bottom/center	N
prevent-scroll-through	Boolean	true	是否阻止背景滚动	N
show-overlay	Boolean	true	是否显示遮罩层	N
using-custom-navbar	Boolean	false	是否使用了自定义导航栏	N
visible	Boolean	-	是否显示浮层。TS 类型：boolean	N
default-visible	Boolean	undefined	是否显示浮层。非受控属性。TS 类型：boolean	N
z-index	Number	11500	组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500	N

Popup Events

名称	参数	描述
visible-change	(visible: boolean, trigger: PopupSource)	当浮层隐藏或显示时触发。详细类型定义。 type PopupSource = 'close-btn' | 'overlay'

Popup External Classes

类名	描述
t-class	根节点样式类
t-class-content	内容样式类

CSS Variables

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值	描述
--td-popup-bg-color	@bg-color-container	-
--td-popup-border-radius	@radius-default	-
--td-popup-close-btn-color	@text-color-primary	-