引入组件

局部引入

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

基础用法

左右抽屉，内容超过一屏时建议使用 scroll-view。

<f-button width="200rpx" margin="24rpx auto" @click="showRightDrawer = true">从右边弹出</f-button>
<f-button width="200rpx" margin="24rpx auto" @click="showLeftDrawer = true">从左边弹出</f-button>

<f-drawer v-model="showLeftDrawer" mode="left">
  <view class="drawer-content">
    <f-button height="80rpx" type="success" shape="round" @click="showLeftDrawer = false">关闭抽屉</f-button>
  </view>
</f-drawer>

<f-drawer v-model="showRightDrawer" mode="right">
  <view class="drawer-content">
    <f-button height="80rpx" type="danger" shape="round" @click="showRightDrawer = false">关闭抽屉</f-button>
  </view>
</f-drawer>

import { ref } from 'vue'

const showLeftDrawer = ref(false)
const showRightDrawer = ref(false)

插槽

名称	说明
default	抽屉内容

属性

名称	类型	说明	默认值
v-model	boolean	是否显示抽屉	-
mode	string	弹出方向，可传入[left、right]	right
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭	true
zIndex	number	抽屉 z-index	990
maskZIndex	number	遮罩层 z-index	980
bgColor	string	抽屉背景颜色	#FFFFFF

事件

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

方法

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