跳到主要内容

弹出层 Popup

弹出层容器，用于展示弹窗等信息。提供 popup 与 popoup-titlebar 2个组件，可以单独配置。

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-popup": "@titian-design/weapp/popup/index",
    "ti-popup-titlebar": "@titian-design/weapp/popup-titlebar/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-popup": "platform://titian-mp/ti-popup",
    "ti-popup-titlebar": "platform://titian-mp/ti-popup-titlebar"
  }
}

用法示例​

基本使用
弹出弹出框
内容演示
copy
code
使用 TiPopupTitlebar
弹出弹出框
内容演示
copy
code
### 阻止滚动穿透 #### 方式 1
备注

通过配置 preventScroll 属性，在打开弹窗时，设置 document.body.style.overflow = 'hidden'，从而实现阻止滚动穿透；

对于需要滚动的区域，使用 CSS 属性 overflow-y: auto 实现。

阻止滚动穿透
展示
阻止滚动区域
可滚动区域，不会穿透
copy
code

方式 2​

备注

通过配置 disableGlobalTouchMove 属性为 true，在打开弹窗时，禁用全局 touch 事件，从而实现阻止滚动穿透；

对于需要滚动的区域，使用 <TiScrollView/> 组件实现。

阻止滚动穿透
展示
阻止滚动区域
可滚动区域，不会穿透
copy
code

ti-popup API​

属性 Properties​

名称类型必填默认值说明备注
mask-z-indexnumber否10000遮罩 z-index 层级-
content-z-indexnumber否10001内容 z-index 层级-
has-maskboolean否true是否显示遮罩-
visibleboolean否false是否显示弹出层-
prevent-scrollstring否true是否锁定背景滚动-
close-on-maskboolean否true是否在点击遮罩层后关闭-
timeoutnumber否300动画时间，默认单位为 ms-
timing-functionstring否linear动画效果，即 CSS 的属性-
positionstring否center弹出位置，可选值为 top bottom right left center-
ext-mask-stylestring否-自定义遮罩层样式-
ext-content-stylestring否-自定义弹出层样式-
transitionstring否-过渡动画类型-
destroy-on-closeboolean否false关闭后是否销毁--
safe-areaboolean否true使用底部安全栏-

事件 Events​

事件名返回值描述
bind:show-弹窗展示时触发
bind:close-点击遮罩关闭时触发
bind:enter-入场动画开始时触发
bind:entered-入场动画结束时触发
bind:exit-出场动画开始时触发
bind:exited-出场动画结束时触发

插槽 Slots​

名称说明备注
default默认插槽-

外部样式类 External Classes​

名称说明备注
ext-class内容区容器样式类-
ext-content-class内容区样式类-
ext-mask-class蒙层样式类-

CSS 变量 CSS Variables​

变量默认值说明备注
--popup-mask-bg-colortheme.color.gray.mask.800蒙层背景色-
--popup-mask-opacity0.8蒙层背景色透明度-
--popup-radiustheme.borderRadius.r4内容区圆角-
--popup-box-bg-colortheme.color.gray.background.default内容区背景色-
--popup-vertical-width100%内容区宽度；position 为 up|bottom 时生效-
--popup-vertical-min-height200px内容区最小高度；position 为 up|bottom 时生效-
--popup-vertical-max-heightcalc(100% - 200px)内容区最大高度；position 为 up|bottom 时生效-
--popup-horizontal-height100vh内容区高度；position 为 left|right 时生效-
--popup-horizontal-min-width50px内容区最小宽度；position 为 left|right 时生效-
--popup-horizontal-max-width100%内容区最大宽度；position 为 left|right 时生效-

ti-popup-titlebar API​

属性 Properties​

名称类型必填默认值说明备注
titlestring否-标题-
sub-titlestring否-副标题-
variantstring否with-confirm标题栏类型，可选值with-confirmcancel-only
confirm-textstring否'确定'确认按钮的文案-
cancel-textstring否'取消'取消按钮的文案-
ext-stylestring否-根节点样式-

variant 枚举含义：​

值含义
back-title-cancel返回 + 标题 + 取消
with-confirm标题+确定+取消
cancel-only标题+关闭
mini-close仅关闭

事件 Events​

事件名返回值描述
bind:cancel-对应 with-confirm 的左侧按钮点击事件
bind:confirm-对应 with-confirm 的右侧按钮点击事件
bind:close-对应 mini-close | cancel-only | back-title-cancel 的右侧按钮点击事件
bind:back-对应 back-title-cancel 的左侧按钮点击事件

CSS 变量 CSS Variables​

变量默认值说明备注
--popup-title-bar-confirm-colortheme.color.brand.1000确认按钮颜色-
--popup-title-bar-title-colortheme.color.gray.texticon.900title颜色-
--popup-title-bar-subtitle-colortheme.color.gray.texticon.400subtitle颜色-
--popup-title-bar-cancel-colortheme.color.gray.texticon.550取消按钮颜色-
--popup-title-bar-back-colortheme.color.gray.texticon.550返回按钮颜色-
--popup-title-bar-mini-close-padding36px 36px 36px 0关闭按钮的padding-