# fu-popup 弹出层
弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
# 平台差异
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
# 基本使用
弹出层的内容通过
slot传入，由用户自定义通过
v-model绑定一个布尔值的变量控制弹出层的打开和收起
<template>
<view>
<fu-popup v-model="showPopup">
<view class="fu-flex-center fu-flex-vcenter">顶部弹出</view>
</fu-popup>
<fu-button @click="showPopup = true">打开</fu-button>
</view>
</template>
<script>
export default {
data() {
return {
showPopup: false
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 设置弹出层的方向
- 可以通过
mode参数设置，可以设置为left、top、right、bottom、center
<template>
<view>
<fu-popup v-model="showPopup" mode="top">
<view class="fu-flex-center fu-flex-vcenter">Fast-UI棒极了</view>
</fu-popup>
</view>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 设置弹出层的圆角
- 可以给
border-radius设置一个值来给弹窗增加圆角，单位rpx。
<template>
<view>
<fu-popup v-model="showPopup" mode="top" border-radius="14">
<view class="fu-flex-center fu-flex-vcenter">Fast-UI棒极了</view>
</fu-popup>
</view>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 控制弹窗的宽度 | 高度
可以设置
width和height参数，这3个参数都可以设置百分比、auto、数值(单位rpx)、或者是带px和rpx单位的字符串：width— 只对mode = left|center|right模式有效height— 只对mode = top|center|bottom模式有效
fu-popup组件内置了scroll-view元素，内容超出容器的高度将会自动获得垂直滚动的特性
<template>
<view>
<fu-popup v-model="showPopup" mode="center" width="500rpx" height="600px">
<view class="fu-flex-center fu-flex-vcenter">Fast-UI棒极了</view>
</fu-popup>
</view>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| mode | 弹出方向 | String | left | top / right / bottom / center |
| mask | 是否显示遮罩 | Boolean | true | false |
| zoom | 是否开启缩放动画，只在mode为center时有效 | Boolean | true | false |
| transition | 运动轨迹 | String | all 0.2s ease | css3 transition 值 |
| safe-area-inset-bottom | 是否开启底部安全区适配 | Boolean | false | true |
| mask-close-able | 点击遮罩是否可以关闭弹出层 | Boolean | true | false |
| custom-style | 用户自定义样式 | Object | - | - |
| negative-top | 中部弹出时，以避免可能弹出的键盘重合，往上偏移的值，单位任意，数值则默认为rpx单位 | Stringr / Number | 0 | - |
| border-radius | 弹窗圆角值 | Stringr / Number | - | - |
| z-index | 弹出内容的z-index值 | Stringr / Number | 10000 | - |
| mask-custom-style | 遮罩自定义样式，一般用于修改遮罩透明度对象形式，如：{background: 'rgba(0, 0, 0, 0.5)'} | Object | - | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| open | 弹出层打开 | - |
| close | 弹出层收起 | - |