引入组件

局部引入

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

基础用法

<f-modal v-model="showModal" is-close-icon title="提示" content="确定退出登录吗？">
  <template #closeIcon>
    <image src="/static/icons/icon_close.png" class="w-[44rpx] h-[44rpx]"></image>
  </template>
  <view class="flex justify-between items-center">
    <f-button width="240rpx" bgColor="#f3f3f3" font-bold shape="round" text-color="var(--f-text-color)" @click="showModal = false">取消</f-button>
    <f-button width="240rpx" bgColor="linear-gradient(90deg, #39a6fe, #1dc7ff)" font-bold shape="round" @click="showModal = false">确定</f-button>
  </view>
</f-modal>
<f-button width="200rpx" margin="200rpx auto" @click="showModal = true">click</f-button>

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

插槽

名称	说明
default	键盘上方展示的内容

属性

名称	类型	说明	默认值
v-model	boolean	是否显示弹出框	-
title	string	弹出框标题文字	-
content	string	弹出框内容文字	-
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭键盘	true
isAnimate	boolean	是否显示动画	true
width	string	自定义宽度	630rpx
padding	string	自定义内边距	40rpx 64rpx
borderRadius	string	自定义圆角大小	16rpx
titleSize	string	自定义标题文字大小	32rpx
titleColor	string	自定义标题文字颜色	#0B1D4A
contentSize	string	自定义内容文字大小	28rpx
contentColor	string	自定义内容文字颜色	#364761
bgColor	string	自定义弹框背景颜色	#FFFFFF
zIndex	number	自定义弹框 z-index	12000

事件

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

方法

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