Popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容。

代码演示

基础用法

<button type="primary" @click="openPop">开启弹出框</button>
<hd-popup ref="popup">
  <view>
    这是一个简单的弹出框
  </view>
</hd-popup>

<script lang="ts" setup>
import { Popup } from '@/uni_modules/fant-mini-plus/components/hd-popup/types'
import { ref } from 'vue'

const popup = ref<Popup>()

function openPop() {
  popup.value?.showPopup()
}

function closePop() {
  popup.value?.closePopup()
}
</script>

弹出框位置

通过type属性设置弹出位置，默认全屏弹出层(center)，可以设置top（顶部弹出层） 、bottom（底部弹出层） 、left（左侧弹出层）、bottom（右侧弹出层）或 center（全屏弹出层）。

<button type="primary" @click="openPop" :type="type">开启弹出框</button>
<hd-popup ref="popup">
  <view>
    这是一个简单的弹出框
  </view>
</hd-popup>

<script lang="ts" setup>
import { Popup } from '@/uni_modules/fant-mini-plus/components/hd-popup/types'
import { ref } from 'vue'

const popup = ref<Popup>()

function openPop() {
  popup.value?.showPopup()
}

function closePop() {
  popup.value?.closePopup()
}
</script>

关闭弹出框

通过maskClick属性控制点击蒙层是否关闭弹出框，默认允许点击蒙层关闭(maskClick为true)，当不允许点击蒙层关闭时，可以手动关闭弹出框。

<hd-popup ref="popup" :maskClick="maskClick">
  <view>
    这是一个简单的弹出框
    <view v-if="!maskClick" @click="onClose">
      <!-- 关闭按钮 -->
      <hd-icon name="ic_circleclose_line" size="48rpx"></hd-icon>
    </view>
  </view>
</hd-popup>

<script lang="ts" setup>
import { Popup } from '@/uni_modules/fant-mini-plus/components/hd-popup/types'
import { ref } from 'vue'

const popup = ref<Popup>() 

const maskClick = ref<boolean>(false)

function openPop() {
  popup.value?.showPopup()
}

function closePop() {
  popup.value?.closePopup()
}
</script>

Props

Name	Description	Type	Required	Default
animation	开启动画	`Boolean`	`false`	true
type	弹出层类型	`'top（顶部弹出层）'` / `'bottom（底部弹出层）'` / `'left（左侧弹出层）'`/ `'right（右侧弹出层）'`/ `'center（全屏弹出层）'`	`false`	默认值：'center'
overlay	是否显示遮罩	`Boolean`	`false`	true
maskClick	是否允许点击蒙层关闭	`Boolean`	`false`	默认值：true
backgroundColor	背景颜色	`String`	`false`	none
duration	动画时长，单位ms	`Number`	`false`	300
overlayOpacity	遮罩的透明度，0-1之间	`Number`	`false`	0.4
zIndex	自定义层级	`Number`	`false`	999

Events

Event Name	Description	Parameters
change	-	-
close	弹层关闭时触发	-
maskClick	遮罩被点击时触发	-
click	-	-

Slots

Name	Description	Default Slot Content
default	-	-

# Popup 弹出层

# 代码演示

# 基础用法

# 弹出框位置

# 关闭弹出框

# Props

# Events