NaEasy UI

Appearance

Popup 弹出层 ​

介绍 ​

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

导入 ​

js
import Popup from '@/components/dialog/Popup.vue'

用法 ​

基础用法 ​

vue
<template>
  <Popup
    :show="showProp1"
    @close="showProp1 = false"
    position="center"
  >
    <FlexCol center :padding="30">
      <Icon icon="success-filling" color="success" :size="100" />
      <Text>这个是弹出层自定义内容</Text>
      <Button text="关闭" @click="showProp1 = false" />
    </FlexCol>
  </Popup>
  
  <Popup
    :show="showProp2"
    @close="showProp2 = false"
    position="center"
    closeable
  >
    <FlexCol center :padding="30">
      <Icon icon="success-filling" color="success" :size="100" />
      <Text>这个是弹出层是可以点击遮罩和按扭关闭的</Text>
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showProp1 = ref(false);
const showProp2 = ref(false);
</script>

弹出位置 ​

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

vue
<template>
  <Popup
    :show="showProp3"
    @close="showProp3 = false"
    position="bottom"
    closeable
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-up" color="success" :size="100" />
      <Text>底部弹出</Text>
    </FlexCol>
  </Popup>
  
  <Popup
    :show="showProp4"
    @close="showProp4 = false"
    position="top"
    closeable
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-down" color="success" :size="100" />
      <Text>顶部弹出</Text>
    </FlexCol>
  </Popup>
  
  <Popup
    :show="showProp5"
    @close="showProp5 = false"
    position="left"
    closeable
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-left" color="success" :size="100" />
      <Text>左侧弹出</Text>
    </FlexCol>
  </Popup>
  
  <Popup
    :show="showProp6"
    @close="showProp6 = false"
    position="right"
    closeable
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-right" color="success" :size="100" />
      <Text>右侧弹出</Text>
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showProp3 = ref(false);
const showProp4 = ref(false);
const showProp5 = ref(false);
const showProp6 = ref(false);
</script>

圆角弹出层 ​

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。

vue
<template>
  <Popup
    :show="showProp7"
    @close="showProp7 = false"
    position="bottom"
    closeable
    round
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-up" color="success" :size="100" />
      <Text>圆角弹出层</Text>
    </FlexCol>
  </Popup>
  
  <Popup
    :show="showProp8"
    @close="showProp8 = false"
    position="top"
    closeable
    round
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-down" color="success" :size="100" />
      <Text>圆角弹出层</Text>
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showProp7 = ref(false);
const showProp8 = ref(false);
</script>

无遮罩的弹出层 ​

无遮罩，可以操控下方组件。

vue
<template>
  <Popup
    :show="showProp9"
    @close="showProp9 = false"
    position="bottom"
    closeable
    round
    :mask="false"
  >
    <FlexCol center :padding="30">
      <Icon icon="direction-up" color="success" :size="100" />
      <Text>圆角弹出层</Text>
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showProp9 = ref(false);
</script>

API 参考 ​

弹出层组件。

Props ​

名称说明类型必填默认值
show是否显示当前弹窗boolean是-
round弹出层圆角boolean-false
closeable是否可以点击遮罩关闭当前弹出层，同时会显示一个关闭按扭，默认否boolean-false
closeIcon关闭按扭，如果设置false则不显示string|false-'close'
closeIconSize关闭按扭大小number-40
closeIconPosition关闭按扭位置'left'|'right'-'right'
position指定当前弹出层弹出位置'center'|'top'|'bottom'|'left'|'right'-'center'
maskColor遮罩的颜色string-'background.mask'
mask是否显示遮罩，默认是boolean-true
margin对话框偏移边距，默认为0，0，0，0number[]-[0,0,0,0]
inset强制设置整体边距（包括遮罩层），默认为[undefined,undefined,undefined,undefined](number|string|undefined)[]-[undefined,undefined,undefined,undefined]
backgroundColor弹出层背景颜色，默认是 白色string-'white'
safeArea从侧边弹出时，是否自动设置安全区，默认是boolean-true
innerStyle指定当前弹出层的特殊样式ViewStyle--
duration指定弹出层动画时长，毫秒number-230
size指定弹出层从侧边弹出的高度，如果是横向弹出，则设置宽度，默认是30%, 设置 auto 让大小自动根据内容调整string|number-'30%'

Slots ​

名称说明
default默认插槽，用于显示弹出层内容

Events ​

名称说明参数
update:show显示状态改变时触发show: boolean
close关闭时触发-
closeAnimFinished关闭动画结束时触发-

主题变量 ​

名称类型默认值说明
PopupRadiusnumber30弹出层圆角大小