Popup 弹窗

用于各种弹窗的场景

基本使用

通过mode属性设置弹出层方向，取值有center | top | bottom | left | right

<com-popup title="系统提示" mode="center" v-model="show">
    <view class="flex-center-center h-all">
        是否继续了解？
    </view>
</com-popup>

显示底部操作按钮

<com-popup title="系统提示" mode="center" v-model="show" footer>
    <view class="flex-center-center h-all">
        是否继续了解？
    </view>
</com-popup>

显示顶部操作按钮

<com-popup title="系统提示" mode="bottom" v-model="show" top-btn>
    <view class="flex-center-center h-all">
        是否继续了解？
    </view>
</com-popup>

显示右上角关闭按钮

<com-popup title="系统提示" mode="bottom" v-model="show" show-close-btn>
    <view class="flex-center-center h-all">
        是否继续了解？
    </view>
</com-popup>

底部内容自定义

<com-popup title="系统提示" v-model="show" mode="bottom" height="60vh">
    <view class="h-all flex-center-center">
        底部区域可以使用插槽自定义内容
    </view>
    <view class="flex pd-40" slot="footer">
        <com-button type="main" width="100%" @click="customPopup = false">
            确认
        </com-button>
    </view>
</com-popup>

长文本可以滚动显示

<com-popup title="系统提示" v-model="show" mode="center" height="500">
    <view class="h-all pd-20 border-box">
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
        这是一大段长文本，组件内部正文区域使用了scroll-view组件，可以支持滚动。
    </view>
</com-popup>

API

Props

属性名	说明	类型	必填	默认值
value	控制弹窗显示隐藏，使用v-model绑定	Boolean	false	-
title	标题	String	false	-
content	内容 当传递slot时此属性将被覆盖	String	false	-
height	弹窗高度，Number类型时单位rpx	Number / String	false	350
width	弹窗宽度，Number类型时单位rpx	Number / String	false	600
mode	弹窗模式，支持top、center、left、bottom、right	String	false	center
offset	位置偏移量 例如mode=top时 10表示往下偏移10rpx， -10表示往上偏移10rpx	Number / String	false	0
zIndex	组件的z-index的值 大于0的整数	Number / String	false	999
borderRadius	圆角值	String / Number	false	20
duration	过渡时间，单位ms	String / Number	false	300
showCancel	是否显示取消按钮 mode=bottom时显示在顶部	Boolean	false	true
showCloseBtn	是否显示关闭按钮	Boolean	false	false
cancelText	取消按钮的文字	String	false	取消
confirmText	确认按钮的文字	String	false	确定
confirmColor	确定按钮的颜色	String	false	#FF7661
cancelColor	取消按钮的颜色	String	false	#666666
header	是否显示顶部标题栏	Boolean	false	true
footer	是否显示底部按钮，包含取消和确定按钮	Boolean	false	false
topBtn	是否显示顶部按钮，包含取消和确定按钮	Boolean	false	false
maskClose	是否点击遮罩关闭	Boolean	false	false
confirmClose	是否点击确认关闭	Boolean	false	true

Events

事件	说明
open	弹窗显示时触发
close	弹窗关闭时触发
confirm	点击内部确定按钮触发
cancel	点击内部取消按钮触发

slot

名称	说明
default	弹窗中部内容
header	弹窗顶部内容
footer	弹窗底部内容