Popup 弹出层 组件

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示

安装

import { createApp } from 'vue';
import { Popup } from '@nutui/nutui';
const app = createApp();
app.use(Popup);

代码演示

基础用法

visible 控制显示/隐藏

<nut-popup :style="{ padding: '30px' }" v-model:visible="show">正文</nut-popup>

弹出位置

<nut-popup
  position="top"
  v-model:visible="show"
  :style="{ height: '20% }"
></nut-popup>
<nut-popup
  position="left"
  v-model:visible="show"
  :style="{ height: '100%', width: '20%' }"
></nut-popup>

图标

<nut-popup
  position="bottom"
  closeable
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>
<nut-popup
  position="bottom"
  closeable
  close-icon-position="top-left"
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>
<nut-popup
  position="bottom"
  closeable
  close-icon-position="top-left"
  close-icon="heart"
  :style="{ height: '20%' }"
  v-model:visible="show"
></nut-popup>

圆角弹框

<nut-popup
  position="bottom"
  closeable
  round
  :style="{ height: '30%' }"
  v-model:visible="show"
></nut-popup>

指定挂载节点

<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:visible="show">app</nut-popup>

API

Props

Events