HIPS-UNI-UI

# Popup 弹出层

# 使用指南

import Popup from '@hips/uni-ui/lib/popup';

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

# 跨平台支持

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

# 弹出组件 z-index 说明

组件名 z-index 值
overlay 99
popup 100
actionsheet 101
dialog 101
notify 102
indicator 102
toast 103

# 代码演示

# 基础用法

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

# 添加内容

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

# 位置

<hips-popup v-model="show1" position="top">
  <view class="content1" @click="show1 = false">
    click here to close
  </view>
</hips-popup>
<hips-popup v-model="show2" position="bottom">
  <view class="content2" @click="show2 = false">
    click here to close
  </view>
</hips-popup>
<hips-popup v-model="show3" position="left">
  <view class="content3" @click="show3 = false">
    click here to close
  </view>
</hips-popup>
<hips-popup v-model="show4" position="right">
  <view class="content4" @click="show4 = false">
    click here to close
  </view>
</hips-popup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 不显示遮罩层

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

# 点击遮罩层关闭

<hips-popup v-model="show" position="bottom" click-overlay-close>
  <view class="content2" />
</hips-popup>
1
2
3

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Boolean - false
duration 动画时长 [Number, String, Object] - 300
overlay 是否显示遮罩层 Boolean - true
click-overlay-close 点击遮罩层是否关闭 Boolean - false
position 弹出位置 String [top, left, right, bottom, center] center
mask-color 蒙层背景颜色 String - rgba(0, 0, 0, 0.7)

注意

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

Actionsheet 选项弹出