更新记录

0.0.5（2023-06-07）

优化演示代码

0.0.4（2023-06-06）

优化文档

0.0.3（2023-06-06）

修复控制台出现vue警告的问题

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Popup 弹出层

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

代码演示

基础用法

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

<script lang="ts" setup>
import { ref } from 'vue'
import { usePopup } from '../../uni_modules/hd-popup/components/hd-popup';

const popup = usePopup()

function openPop() {
  popup.showPopup()
}

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

弹出框位置

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

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

<script lang="ts" setup>
import { ref } from 'vue'
import { usePopup } from '../../uni_modules/hd-popup/components/hd-popup';

const popup = usePopup()

function openPop() {
  popup.showPopup()
}

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

关闭弹出框

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

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

<script lang="ts" setup>

import { ref } from 'vue'
import { usePopup } from '../../uni_modules/hd-popup/components/hd-popup';

const popup = usePopup() 

const maskClick = ref<boolean>(false)

function openPop() {
  popup.showPopup()
}

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

Props

Events

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们