HIPS-UNI-UI

# Overlay 遮罩层

# 使用指南

import Overlay from '@hips/uni-ui/lib/overlay';

export default {
  components: {
    'hips-overlay': Overlay,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-overlay v-model="show"> </hips-overlay>
1
export default {
  data() {
    return {
      show: false,
    };
  },
};
1
2
3
4
5
6
7

# 添加内容

<hips-overlay v-model="show">
  <view class="content" @click="show=false">
    click here to close
  </view>
</hips-overlay>
1
2
3
4
5

# 点击遮罩层关闭

<hips-overlay v-model="show" click-close>
  <view class="content" />
</hips-overlay>
1
2
3

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Boolean - false
duration 动画时长 [Number, String, Object] - 300
name 动画名称 String - -
click-close 点击遮罩层是否关闭 Boolean - false
bg-color 背景颜色 String - rgba(0, 0, 0, 0.7)

注意

  1. 暂不支持自定义弹出动画。

  2. name 可选值 [fade, fade-up, fade-down, fade-left, fade-right, slide-up, slide-down, slide-left, slide-right]

# Events

名称 说明 参数
click 遮罩层点击事件 -

Popup 弹出层