Popup 弹框

弹弹弹

import { DuPopup } from 'dangoui'

说明

默认情况下，Popup 会脱离当前文档流，因此你不能像下面这样写 CSS 样式，因为 .popup-content 节点并不是 .wrapper 的子节点

错误的例子：

<template>
  <view class="wrapper">
    <DuPopup>
      <view class="popup-content">
        ...
      </view>
    </DuPopup>
  </view>
</template>

.wrapper {
  .popup-content {
    height: 80vh;
  }
}

.wrapper .popup-content {
  height: 80vh;
}

示例

基础例子

<template>
  <PreviewBlock title="基础">
    <DuButton type="secondary" @click="bottomVisible = true">打开底部</DuButton>
    <DuButton type="secondary" @click="visible = true">打开弹窗</DuButton>
    <DuButton type="secondary" @click="topVisible = true">打开顶部</DuButton>
  </PreviewBlock>
  <DuPopup v-model:visible="topVisible" title="请选择" type="bottom">
    内容
  </DuPopup>
  <DuPopup v-model:visible="visible" title="公告">
    从 12 月 1 日起，必须使用该弹窗组件
  </DuPopup>
  <DuPopup v-model:visible="bottomVisible" title="公告" type="top">
    内容
  </DuPopup>
</template>

<script setup lang="ts">
import { DuButton, DuPopup } from 'dangoui'

const topVisible = ref(false)
const visible = ref(false)
const bottomVisible = ref(false)
</script>

API

属性

属性名	类型	默认值	说明
type	`"center" \| "top" \| "bottom"`	`"center"`	弹出框位置
ext-class	`string \| string[] \| Record<string, boolean>`	`""`	extClass
ext-style	`string \| { [x: string]: string \| number; }`	`""`	extStyle
visible	`boolean`	`false`	是否显示
title	`string`	`""`	标题
title-align	`"default" \| "center"`	`"default"`	标题对齐方式，default 为左对齐
header-visible	`boolean`	`true`	是否展示内置的头部栏
mask-click	`boolean`	`true`	点击遮罩层是否关闭
closable	`boolean`	`true`	是否展示关闭按钮（当内置头部栏展示时有效）
mask-class	`string \| string[] \| Record<string, boolean>`	`""`	maskClass
mask-style	`string \| { [x: string]: string \| number; }`	`""`	maskStyle
disable-portal	`boolean`	`false`	禁止将 Popup 渲染到根节点
safe-area	`boolean`	`true`	是否自带 safe area
root	`"page" \| "app"`	`"page"`

插槽

名称
maskContent
default

事件

名称	类型
close	`(event: "close"): void`
update:visible	`(event: "update:visible", visible: boolean): void`

主题变量

变量名	默认值