popup

更新时间：2023-02-01 11:07:54

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

属性

属性	类型	必填	说明
show	boolean	否	弹出层是否可见
show-mask	boolean	否	是否展示蒙层
mask-closeable	boolean	否	是否展示蒙层
mask-class	string	否	自定义蒙层类名
mask-style	string	否	自定义蒙层样式
position	'center' | 'top' | 'bottom' | 'left' | 'right'	否	弹出层位置
disable-scroll	boolean	否	是否禁止滚动穿透
transition	'' | 'left' | 'right' | 'fade' | 'fade-grow' | 'up' | 'down'	否	弹出层动画效果
custom-style	string	否	自定义样式

使用方式

{
    "usingComponents": {
      "k-popup" : "kma-ui/popup/index"
    }
}

用法

基础用法

点击显示弹层1

  <button class="btn" bindtap="basicPopup">点击显示弹层1</button>
  <k-popup show="{{ basic.show }}" bind:click-mask="tapBasicMask">
    <view class="basic__content"> 弹层1的内容 </view>
  </k-popup>

弹出位置

 <button class="btn" data-index="{{ index }}" bindtap="positionPopup">从 {{ item.position }} 弹出</button>
 <k-popup show="{{ item.show }}" data-index="{{ index }}" bind:click-mask="tapPositionMask" position="{{ item.position }}" custom-style="{{ item.customStyle }}" >
   <view class="position__content"> 从 {{ item.position }} 弹出 </view>
 </k-popup>