引入组件

局部引入

// parent.vue
const FPopup = defineAsyncComponent(() => import('@/components/formaui/f-popup/f-popup.vue'))

基础用法

<f-popup v-model="showPopup" position="bottom">
  <template #closeIcon>
    <image src="/static/icons/icon_close.png" class="w-[44rpx] h-[44rpx]"></image>
  </template>
  <view class="px-[32rpx] py-[64rpx] text-center">这里是弹框显示内容</view>
</f-popup>
<f-button width="200rpx" margin="200rpx auto" @click="showPopup = true">click</f-button>

import { ref } from 'vue'
const showPopup = ref<boolean>(false)

插槽

名称	说明
default	弹出层展示的内容
closeIcon	弹出层关闭图标

属性

名称	类型	说明	默认值
v-model	boolean	是否显示弹出层	-
position	string	弹出层位置，可传入[top、bottom]	-
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭键盘	true
isAnimate	boolean	是否显示动画	true
borderRadius	string	自定义圆角大小	16rpx
bgColor	string	自定义弹框背景颜色	#FFFFFF
zIndex	number	自定义弹框 z-index	12000

事件

事件名	说明	回调参数
-	-	-

方法

方法名	说明	传入参数
-	-	-