TMSUI

# Popup 弹出层

# 介绍

弹出层容器组件，用于弹出框形式展示内容等场景。

# 使用指南

# 一般用法

<button bindtap="_showNormal">点击打开popup</button>
<tms-popup show="{{showNormal}}">
    <view class="content"/>
</tms-popup>

Component({
  data: {
    showNormal: false,
  },
  methods: {
    _showNormal() {
      this.setData({
        showNormal: true,
      });
    },
  }
})

# 打开位置

从顶部弹出

<button bindtap="_showFromTop">打开</button>
<tms-popup show="{{showFromTop}}" position="top">
    <view class="content"/>
</tms-popup>

# 受控模式

点击遮罩及关闭图标不会自动收缩

<button bindtap="_showControlMode">打开</button>
<tms-popup show="{{showControlMode}}" bind:on-click-overlay="asyncHide" control>
    <view class="content"/>
</tms-popup>

Component({
  data: {
    showControlMode: false,
  },
  methods: {
    _showControlMode() {
      this.setData({
        showControlMode: true,
      });
    },
    asyncHide() {
      // 模拟异步操作
      setTimeout(() => {
        this.setData({
          showControlMode: false,
        });
      }, 1800);
    },
  }
})

# API

属性 说明 类型 默认值 版本
show 控制弹出/收缩组件 boolean false
round 显示圆角模式 boolean true
position 弹出位置，上右下左中(top,right,bottom,left,center) string bottom
custom-style 自定义弹框容器元素样式 string
close-icon 自定义关闭按钮,为空则使用默认 string
close-icon-style 自定义关闭按钮样式 string
mask-style 自定义灰色遮罩层元素样式 string
duration 弹出动画执行时间，单位毫秒 string 500
z-index 自定义弹框z-index数值 number 9999
bottom-safe-area 为iphoneX等部分机型留出底部空间 boolean false
top-safe-area 为iphoneX等部分机型留出头部刘海空间 boolean false
lock-scroll 阻止下方元素响应touchmove,防止滚动穿透。 boolean true
hide-cover 是否隐藏灰色遮罩层 boolean false
show-close-icon 是否显示关闭图标 boolean true
tap-mask-close 点击蒙层自动收缩,受控模式无效。 boolean true
control 使用受控模式，点击遮罩及关闭按钮不会自动收缩 boolean false

# EVENTS

属性 说明 类型
bind:on-click-close-icon 点击关闭图标事件 (event) => {}
bind:on-click-overlay 点击灰色遮罩层事件 (event) => {}
bind:closed 弹窗完全收缩后的事件，受控模式下无效 (event) => {}

# CSS变量

// 遮罩层颜色
--popup-cover-background: rgba(0, 0, 0, .5);
// 面板背景色
--popup-background: #fff;
// z-index
--popup-cover-z-index: 9999;
// 关闭图标大小
--popup-close-icon-size: 35rpx;

# 外部类 externalClasses

属性 说明
container-class 作用于面板容器元素

# FAQ

← 使用 →