Drawer 抽屉

侧滑或底部上拉式高阶浮层抽屉组件，常用于 App / 小程序系统侧边栏导航、商品高级维度筛选面板、分类选择器以及服务协议浮层。

---

代码示例

1. 左侧侧滑抽屉 (Left Placement)

适用于系统主导航菜单、用户中心侧边栏。

<template>
  <view>
    <mu-button type="primary" @click="showLeft = true">打开侧边导航</mu-button>

    <mu-drawer v-model:show="showLeft" placement="left" title="系统导航菜单">
      <view class="drawer-content">
        <mu-cell title="个人中心" icon="user" is-link />
        <mu-cell title="消息通知" icon="bell" value="3条未读" is-link />
        <mu-cell title="系统设置" icon="settings" is-link />
      </view>
    </mu-drawer>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showLeft = ref(false)
</script>

---

2. 右侧高级筛选抽屉 (Right Placement)

适用于电商商品搜索、多维条件筛选过滤面板。

<template>
  <view>
    <mu-button type="info" @click="showRight = true">高级筛选 (600rpx)</mu-button>

    <mu-drawer v-model:show="showRight" placement="right" title="商品筛选" width="600rpx">
      <view class="filter-box">
        <text class="filter-title">品牌归属</text>
        <view class="tags">
          <mu-tag type="primary">极奢 MU</mu-tag>
          <mu-tag>ThorUI</mu-tag>
        </view>
      </view>
    </mu-drawer>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showRight = ref(false)
</script>

---

3. 底部上拉抽屉 (Bottom Placement)

适用于底部弹出富文本服务协议、选项确认。

<template>
  <view>
    <mu-button type="warning" @click="showBottom = true">查看服务协议</mu-button>

    <mu-drawer v-model:show="showBottom" placement="bottom" title="用户服务协议" height="50vh">
      <view class="padding">
        <text class="desc">欢迎使用 Muzhiyu UI 组件库！我们将严格保护您的个人隐私与数据安全。</text>
      </view>
    </mu-drawer>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showBottom = ref(false)
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制抽屉显示与隐藏	Boolean	true | false	false
placement / mode	抽屉滑出方向位置	String	left | right | bottom	'left'
title	顶部标题文案（设置后自动开启带关闭按键的 Header）	String	-	''
width	左右抽屉宽度	String	-	'560rpx'
height	底部抽屉高度（当 placement='bottom' 时生效）	String	-	'60vh'
maskClosable	点击遮罩层是否自动关闭抽屉	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
close	抽屉完全收起退场动画播放完毕时触发	-
open	抽屉展开就位时触发	-

---

插槽说明 (Slots)

插槽名	说明
default	抽屉面板主体内容区域

---

实例方法 (Expose Methods)

获取组件 ref 实例后可直接调用以下公开方法：

方法名	说明
open()	唤醒并展开抽屉
close()	关闭/收起抽屉