Popup 弹窗

基础用法

查看代码

<template>
    <div style="display: flex; gap: 12px">
        <Button @click="openCenter = true">居中弹窗</Button>
        <Button @click="openBottom = true">底部弹窗</Button>
        <Popup v-model="openCenter" position="center">
            <div style="padding: 24px; background: #fff; border-radius: 8px; min-width: 200px">
                居中弹窗内容
                <div style="margin-top: 12px; text-align: right">
                    <Button @click="openCenter = false">关闭</Button>
                </div>
            </div>
        </Popup>
        <Popup v-model="openBottom" position="bottom">
            <div style="padding: 24px; background: #fff; border-radius: 12px 12px 0 0">
                底部弹窗内容
                <div style="margin-top: 12px; text-align: right">
                    <Button @click="openBottom = false">关闭</Button>
                </div>
            </div>
        </Popup>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Popup } from "@a-drowned-fish/rox-v";

const openCenter = ref(false);
const openBottom = ref(false);
</script>

Props

参数	说明	类型	默认值
modelValue (v-model)	是否显示	boolean	false
to	Teleport 目标节点	string	"body"
bg	遮罩背景色	string	"rgba(0,0,0,.5)"
duration	过渡动画时长（ms）	number	150
position	弹层位置	"top" | "bottom" | "left" | "right" | "center"	"bottom"
maskClosable	点击遮罩是否关闭	boolean	true
top / left / right / bottom	弹层偏移	string	"0px"
zIndex	层级	number | string	999
containerClass	遮罩容器类名	string	""
contentClass	内容容器类名	string	""

事件

事件名	说明	回调参数
update:modelValue	显隐状态变化	(value: boolean) => void

插槽

插槽名	说明
default	弹层内容（点击内容不会关闭，需自行处理）