vue-mu-drawer

一个轻量的 Vue 3 抽屉组件，无第三方 UI 框架依赖。

安装

npm install vue-mu-drawer

全局注册

// main.js
import MuDrawerPlugin from 'vue-mu-drawer'
import 'vue-mu-drawer/dist/style.css'

app.use(MuDrawerPlugin)

按需引入

import { MuDrawer, MuDrawerContent } from 'vue-mu-drawer'
import 'vue-mu-drawer/dist/style.css'

基本用法

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <button @click="show = true">打开</button>

  <MuDrawer v-model:show="show" placement="right" :default-width="400">
    <MuDrawerContent title="标题" closable>
      <p>正文内容</p>
      <template #footer>
        <button @click="show = false">关闭</button>
      </template>
    </MuDrawerContent>
  </MuDrawer>
</template>

MuDrawer Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | show (v-model) | Boolean | false | 控制显隐 | | placement | 'top'\|'right'\|'bottom'\|'left' | 'right' | 展开方向 | | width | String\|Number | — | 固定宽度（受控） | | height | String\|Number | — | 固定高度（受控） | | defaultWidth | String\|Number | 251 | 初始宽度（非受控） | | defaultHeight | String\|Number | 251 | 初始高度（非受控） | | maskClosable | Boolean | true | 点击遮罩关闭 | | showMask | Boolean\|'transparent' | true | 遮罩显示方式 | | to | String\|HTMLElement | body | Teleport 挂载目标 | | displayDirective | 'if'\|'show' | 'if' | 关闭后是否保留 DOM | | zIndex | Number | — | 自定义层级 | | closeOnEsc | Boolean | true | ESC 关闭 | | blockScroll | Boolean | true | 锁定 body 滚动 | | resizable | Boolean | false | 拖拽调整尺寸 | | minWidth / maxWidth | Number | — | 宽度限制 | | minHeight / maxHeight | Number | — | 高度限制 | | onAfterEnter | Function | — | 进入动画结束回调 | | onAfterLeave | Function | — | 离开动画结束回调 |

MuDrawerContent Props & Slots

| 属性 | 类型 | 说明 | |------|------|------| | title | String | 标题文字 | | closable | Boolean | 显示右上角关闭按钮 | | headerClass/Style | String\|Object | 头部样式 | | bodyClass/Style | String\|Object | 正文区样式 | | bodyContentClass/Style | String\|Object | 正文内容区样式 | | footerClass/Style | String\|Object | 页脚样式 |

| 插槽 | 说明 | |------|------| | default | 正文内容 | | #header | 自定义头部 | | #footer | 页脚内容 |

许可证

MIT