跳到主要内容

弹出层 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"
  }
}

用法示例​

基本用法​

<ti-popup
  visible="{{ true }}"
  close-on-mask="{{ true }}"
  bind:close="onClose"
  position="bottom"
>
  <view>内容演示</view>
</ti-popup>

使用 TiPopupTitlebar​

<ti-popup visible="{{true}}" close-on-mask="{{true}}" bind:close="onClose" position="bottom">
  <ti-popup-titlebar
    title="标题"
    sub-title=副标题
    confirm-text="确认"
    cancel-text="取消"
    variant="with-confirm"
    bind:cancel={onClose}
    bind:confirm={onClose}
  />
  <view>内容演示</view>
</ti-popup>

滚动穿透​

<ti-popup 
  visible="{{true}}" 
  close-on-mask="{{true}}"
  bind:close="onClose"
  position="bottom"
>
  <view>阻止滚动区域</view>
  <scroll-view scroll-y style="height: 100rpx;">
    <view id="demo1" style="height: 200rpx;">
      可滚动区域，不会穿透
    </view>
  </scroll-view>
</ti-popup>

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-colorvar(--neutral-color-1, #212121)蒙层背景色-
--popup-mask-opacity0.8蒙层背景色透明度-
--popup-radius@radius-16内容区圆角-
--popup-box-bg-colorvar(--neutral-color-9, #ffffff)内容区背景色-
--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-colorrgb(var(--theme-r, 250), var(--theme-g, 44), var(--theme-b, 25))确认按钮颜色-
--popup-title-bar-cancel-colorvar(--neutral-color-2, #757575)取消按钮颜色-
--popup-title-bar-back-colorvar(--neutral-color-2, #757575)返回按钮颜色-
--popup-title-bar-mini-close-padding36px 36px 36px 0关闭按钮的padding-