Appearance
c-popup 底部弹窗
c-popup 是一个基于 uView 的底部弹窗组件,常用于底部弹出选择、展示信息等场景。
基础用法
vue
<template>
<c-popup v-model="show" title="标题">
<view>内容区域</view>
</c-popup>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value / v-model | 是否显示弹窗 | Boolean | false |
| showTitle | 是否显示标题栏 | Boolean | true |
| title | 标题内容 | String | '' |
| minHeight | 最小高度 | String | '50vh' |
| maxHeight | 最大高度 | String | '80vh' |
| closeOnClickOverlay | 点击遮罩是否关闭 | Boolean | true |
| safeArea | 是否开启底部安全区适配 | Boolean | true |
| zIndex | 弹窗层级 | String | '888' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| open | 弹窗打开时触发 | - |
| close | 弹窗关闭时触发 | - |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 弹窗主体内容 |
| footer | 底部区域(可选) |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| open | 打开弹窗 | - |
| close | 关闭弹窗 | - |