Drawer 抽屉

抽屉组件用于从屏幕边缘滑出的面板，用于展示额外的内容或操作。

基础用法

通过模板中直接使用 Drawer 组件，并通过 v-model:open 控制其显示状态，是推荐的默认使用方式。

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="drawerVisible = true">打开非函数式抽屉</Button>
        <Button @click="showBasicDrawer">右侧抽屉</Button>
        <Button @click="showLeftDrawer">左侧抽屉</Button>
        <Button @click="showTopDrawer">顶部抽屉</Button>
        <Button @click="showBottomDrawer">底部抽屉</Button>
        <Button @click="showCustomizedDrawer">自定义按钮</Button>
        <Button @click="showAsyncDrawer">异步关闭</Button>
        <Button @click="showNoMaskDrawer">无边框遮罩</Button>
      </div>

      <!-- 非函数式抽屉示例 -->
      <Drawer v-model:open="drawerVisible" title="非函数式抽屉示例">
        <template #header>
          <div class="custom-header">
            <h3>自定义头部</h3>
            <p>这是使用非函数式调用的抽屉</p>
          </div>
        </template>

        <div class="drawer-content">
          <p>这是抽屉的主要内容区域</p>
          <p>您可以在这里放置任何您需要的内容，包括表单、列表、图片等</p>
          <p>使用非函数式调用方式可以更好地与Vue的组件体系集成</p>
        </div>

        <template #footer>
          <div class="custom-footer">
            <Button @click="drawerVisible = false">取消</Button>
            <Button type="primary" @click="handleNonFuncOk">确定</Button>
          </div>
        </template>
      </Drawer>

      <div class="demo-section">
        <h3>动画类型演示</h3>
        <p>
          Drawer组件支持三种不同的动画类型：slide（默认）、scale（缩放）和zoom（缩放+透明度）
        </p>
        <div class="button-group">
          <Button @click="showSlideAnimationDrawer">滑动动画 (slide)</Button>
          <Button @click="showScaleAnimationDrawer">缩放动画 (scale)</Button>
          <Button @click="showZoomAnimationDrawer"
            >缩放+透明度动画 (zoom)</Button
          >
        </div>
      </div>

      <div class="info-box">
        <h3>函数式 API 说明</h3>
        <p>
          通过
          <code>showDrawer(options)</code>
          函数可以方便地在任何地方打开抽屉，无需在模板中预先声明组件。
        </p>
        <p>
          该函数返回一个包含 <code>close()</code> 方法的对象，用于手动关闭抽屉。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
// 从全局 window 对象获取 showDrawer 函数
import { ref } from 'vue';
const showDrawer = window.showDrawer;

// 非函数式抽屉示例
const drawerVisible = ref(false);

// 非函数式抽屉确定按钮处理函数
const handleNonFuncOk = () => {
  console.log('非函数式抽屉点击了确定按钮');
  drawerVisible.value = false;
};

// 右侧抽屉示例
const showBasicDrawer = () => {
  showDrawer({
    title: '右侧抽屉',
    content: '这是一个通过函数式 API 打开的右侧抽屉示例。',
    size: 'md',
    position: 'right',
    width: 900,
    height: 500,
    animated: true,
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 左侧抽屉示例
const showLeftDrawer = () => {
  showDrawer({
    title: '左侧抽屉',
    content: '这是一个通过函数式 API 打开的左侧抽屉示例。',
    size: 'sm',
    position: 'left',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 顶部抽屉示例
const showTopDrawer = () => {
  showDrawer({
    title: '顶部抽屉',
    content: '这是一个通过函数式 API 打开的顶部抽屉示例。',
    size: 'md',
    position: 'top',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 底部抽屉示例
const showBottomDrawer = () => {
  showDrawer({
    title: '底部抽屉',
    content: '这是一个通过函数式 API 打开的底部抽屉示例。',
    size: 'md',
    position: 'bottom',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 自定义按钮示例
const showCustomizedDrawer = () => {
  const drawer = showDrawer({
    title: '自定义按钮',
    content: '这个抽屉使用了自定义的底部按钮。',
    size: 'md',
    position: 'right',
    footer: () => {
      // 创建自定义底部
      const footer = document.createElement('div');
      footer.className = 'custom-footer';
      footer.style.display = 'flex';
      footer.style.justifyContent = 'flex-end';
      footer.style.gap = '8px';

      // 创建删除按钮
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.className = 'btn btn--danger';
      deleteBtn.style.padding = '4px 8px';
      deleteBtn.style.borderRadius = '4px';
      deleteBtn.onclick = () => {
        alert('删除操作执行');
        drawer.close();
      };

      // 创建取消按钮
      const cancelBtn = document.createElement('button');
      cancelBtn.textContent = '取消';
      cancelBtn.className = 'btn btn--default';
      cancelBtn.onclick = () => {
        drawer.close();
      };

      footer.appendChild(cancelBtn);
      footer.appendChild(deleteBtn);
      return footer;
    },
    onClose: () => {
      console.log('抽屉已关闭');
    },
  });
};

// 异步关闭示例
const showAsyncDrawer = () => {
  let drawer;

  drawer = showDrawer({
    title: '异步关闭',
    content: '点击确定后将模拟异步操作，操作完成后自动关闭抽屉。',
    size: 'lg',
    position: 'right',
    onOk: () => {
      // 模拟异步操作
      setTimeout(() => {
        console.log('异步操作完成');
        drawer.close();
      }, 2000);
    },
    onCancel: () => {
      // 如果有正在进行的异步操作，可以在这里处理
      console.log('取消操作');
    },
  });
};

// 无边框遮罩示例
const showNoMaskDrawer = () => {
  showDrawer({
    title: '无边框遮罩',
    content: '这个抽屉没有显示遮罩层',
    position: 'right',
    mask: false,
  });
};

// 滑动动画示例 (默认动画)
const showSlideAnimationDrawer = () => {
  showDrawer({
    title: '滑动动画 (slide)',
    content: '这是使用默认滑动动画效果的抽屉示例。抽屉会从指定方向平滑滑入。',
    size: 'md',
    position: 'right',
    animated: true,
    animationType: 'slide',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 缩放动画示例
const showScaleAnimationDrawer = () => {
  showDrawer({
    title: '缩放动画 (scale)',
    content: '这是使用缩放动画效果的抽屉示例。抽屉会从指定方向缩放进入。',
    size: 'md',
    position: 'right',
    animated: true,
    animationType: 'scale',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};

// 缩放+透明度动画示例
const showZoomAnimationDrawer = () => {
  showDrawer({
    title: '缩放+透明度动画 (zoom)',
    content:
      '这是使用缩放+透明度动画效果的抽屉示例。抽屉会从指定方向缩放并淡入。',
    size: 'md',
    position: 'right',
    animated: true,
    animationType: 'zoom',
    onOk: () => {
      console.log('点击了确定按钮');
    },
    onCancel: () => {
      console.log('点击了取消按钮');
    },
  });
};
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-header {
  margin-bottom: 24px;
}

.demo-header h2 {
  margin: 0 0 8px 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.demo-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.info-box {
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.info-box h3 {
  margin: 0 0 12px 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.info-box p {
  margin: 8px 0;
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.info-box code {
  background-color: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
</style>

不同位置

抽屉支持从四个方向打开：左、右、上、下。通过 position 属性控制。

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="leftDrawerVisible = true">左侧抽屉</Button>
        <Button @click="rightDrawerVisible = true">右侧抽屉</Button>
        <Button @click="topDrawerVisible = true">顶部抽屉</Button>
        <Button @click="bottomDrawerVisible = true">底部抽屉</Button>
      </div>
      
      <!-- 左侧抽屉 -->
      <Drawer v-model:open="leftDrawerVisible" title="左侧抽屉" position="left">
        <div class="drawer-content">
          <p>这是一个从左侧打开的抽屉</p>
          <p>使用 position="left" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 右侧抽屉 -->
      <Drawer v-model:open="rightDrawerVisible" title="右侧抽屉" position="right">
        <div class="drawer-content">
          <p>这是一个从右侧打开的抽屉</p>
          <p>使用 position="right" 属性控制（默认）</p>
        </div>
      </Drawer>
      
      <!-- 顶部抽屉 -->
      <Drawer v-model:open="topDrawerVisible" title="顶部抽屉" position="top">
        <div class="drawer-content">
          <p>这是一个从顶部打开的抽屉</p>
          <p>使用 position="top" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 底部抽屉 -->
      <Drawer v-model:open="bottomDrawerVisible" title="底部抽屉" position="bottom">
        <div class="drawer-content">
          <p>这是一个从底部打开的抽屉</p>
          <p>使用 position="bottom" 属性控制</p>
        </div>
      </Drawer>
    </div>
  </div>
</template>

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

// 控制不同位置抽屉的显示状态
const leftDrawerVisible = ref(false);
const rightDrawerVisible = ref(false);
const topDrawerVisible = ref(false);
const bottomDrawerVisible = ref(false);
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.drawer-content {
  padding: 20px 0;
}
</style>

不同尺寸

抽屉支持多种尺寸：sm、md、lg、fullscreen。通过 size 属性控制。

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="smDrawerVisible = true">小尺寸</Button>
        <Button @click="mdDrawerVisible = true">中尺寸</Button>
        <Button @click="lgDrawerVisible = true">大尺寸</Button>
        <Button @click="fullscreenDrawerVisible = true">全屏</Button>
        <Button @click="customWidthDrawerVisible = true" type="primary">自定义宽度</Button>
        <Button @click="customHeightDrawerVisible = true" type="primary">自定义高度</Button>
      </div>
      
      <!-- 小尺寸抽屉 -->
      <Drawer v-model:open="smDrawerVisible" title="小尺寸抽屉" size="sm">
        <div class="drawer-content">
          <p>这是一个小尺寸抽屉</p>
          <p>使用 size="sm" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 中尺寸抽屉 -->
      <Drawer v-model:open="mdDrawerVisible" title="中尺寸抽屉" size="md">
        <div class="drawer-content">
          <p>这是一个中尺寸抽屉</p>
          <p>使用 size="md" 属性控制（默认）</p>
        </div>
      </Drawer>
      
      <!-- 大尺寸抽屉 -->
      <Drawer v-model:open="lgDrawerVisible" title="大尺寸抽屉" size="lg">
        <div class="drawer-content">
          <p>这是一个大尺寸抽屉</p>
          <p>使用 size="lg" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 全屏抽屉 -->
      <Drawer v-model:open="fullscreenDrawerVisible" title="全屏抽屉" size="fullscreen">
        <div class="drawer-content">
          <p>这是一个全屏抽屉</p>
          <p>使用 size="fullscreen" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 自定义宽度抽屉 -->
      <Drawer v-model:open="customWidthDrawerVisible" title="自定义宽度抽屉" :width="600">
        <div class="drawer-content">
          <p>这是一个宽度为 600px 的抽屉</p>
          <p>使用 :width="600" 属性控制</p>
        </div>
      </Drawer>
      
      <!-- 自定义高度抽屉 -->
      <Drawer v-model:open="customHeightDrawerVisible" title="自定义高度抽屉" :height="400" position="bottom">
        <div class="drawer-content">
          <p>这是一个高度为 400px 的抽屉</p>
          <p>使用 :height="400" 和 position="bottom" 属性控制</p>
        </div>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 控制不同尺寸抽屉的显示状态
const smDrawerVisible = ref(false);
const mdDrawerVisible = ref(false);
const lgDrawerVisible = ref(false);
const fullscreenDrawerVisible = ref(false);
const customWidthDrawerVisible = ref(false);
const customHeightDrawerVisible = ref(false);
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.drawer-content {
  padding: 20px 0;
}
</style>

自定义按钮

通过 footer 属性可以自定义抽屉的底部按钮。

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <Row>
        <Col :span="4">
          <Button @click="customFooterDrawerVisible = true">自定义按钮</Button>
        </Col>
        <Col :span="4">
          <Button @click="noFooterDrawerVisible = true">无默认按钮</Button>
        </Col>
      </Row>

      <!-- 自定义底部按钮抽屉 -->
      <Drawer v-model:open="customFooterDrawerVisible" title="自定义按钮">
        <div class="drawer-content">
          <p>这个抽屉使用了自定义的底部按钮</p>
          <p>通过 slot="footer" 来自定义底部内容</p>
        </div>

        <!-- 自定义底部 -->
        <template #footer>
          <div class="custom-footer">
            <Button type="default" @click="customFooterDrawerVisible = false"
              >取消</Button
            >
            <Button type="danger" @click="handleDelete">删除</Button>
          </div>
        </template>
      </Drawer>

      <!-- 无底部按钮抽屉 -->
      <Drawer
        v-model:open="noFooterDrawerVisible"
        :footer="false"
        closable="false"
      >
        <div class="drawer-content">
          <p>没有默认的头部和底部按钮</p>
          <p>使用 footer="false" 和 closable="false" 属性控制</p>
          <p>点击遮罩层可以关闭抽屉</p>
        </div>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 控制抽屉显示状态
const customFooterDrawerVisible = ref(false);
const noFooterDrawerVisible = ref(false);

// 处理删除操作
const handleDelete = () => {
  alert('删除操作执行');
  customFooterDrawerVisible.value = false;
};
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.drawer-content {
  padding: 20px 0;
}
</style>

异步关闭

通过 onOk 事件可以实现异步关闭抽屉。

动画控制

通过 animated 属性可以控制抽屉是否启用弹出动画。

动画控制说明

通过 animated 属性可以控制抽屉是否启用弹出动画。

默认情况下，animated 属性为 true，启用动画效果。设置为 false 时，抽屉将直接显示和隐藏，没有过渡动画。

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="animatedDrawerVisible = true">带动画的抽屉</Button>
        <Button @click="nonAnimatedDrawerVisible = true">无动画的抽屉</Button>
      </div>

      <div class="info-box">
        <h3>动画控制说明</h3>
        <p>
          通过 <code>animated</code> 属性可以控制抽屉是否启用弹出动画。
        </p>
        <p>
          默认情况下，<code>animated</code> 属性为 <code>true</code>，启用动画效果。
          设置为 <code>false</code> 时，抽屉将直接显示和隐藏，没有过渡动画。
        </p>
      </div>
      
      <!-- 带动画的抽屉 -->
      <Drawer v-model:open="animatedDrawerVisible" title="带动画的抽屉" animated="true">
        <div class="drawer-content">
          <p>这个抽屉使用了默认的动画效果</p>
          <p>使用 animated="true" 属性控制（默认）</p>
        </div>
      </Drawer>
      
      <!-- 无动画的抽屉 -->
      <Drawer v-model:open="nonAnimatedDrawerVisible" title="无动画的抽屉" animated="false">
        <div class="drawer-content">
          <p>这个抽屉禁用了动画效果，直接显示和隐藏</p>
          <p>使用 animated="false" 属性控制</p>
        </div>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 控制抽屉显示状态
const animatedDrawerVisible = ref(false);
const nonAnimatedDrawerVisible = ref(false);
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.drawer-content {
  padding: 20px 0;
}

.info-box {
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.info-box h3 {
  margin: 0 0 12px 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.info-box p {
  margin: 8px 0;
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.info-box code {
  background-color: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--text-primary);
}
</style>

遮罩控制

通过 mask 属性可以控制是否显示遮罩层，通过 maskStyle 属性可以自定义遮罩层的样式。

Drawer 遮罩测试

测试1: mask=false

测试2: mask=true (默认)

测试3: 自定义遮罩样式

函数式API测试 (仅用于说明函数调用方法)

vue

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <h3>Drawer 遮罩测试</h3>

      <!-- 测试1: mask=false 隐藏遮罩 -->
      <div class="test-section">
        <h4>测试1: mask=false</h4>
        <Button type="primary" @click="drawer1Open = true"
          >打开无遮罩抽屉</Button
        >
        <Drawer
          v-model:open="drawer1Open"
          title="无遮罩抽屉"
          :mask="false"
          position="left"
        >
          <div class="drawer-content">
            <p>这个抽屉没有遮罩层，点击页面其他区域不会关闭。</p>
          </div>
        </Drawer>
      </div>

      <!-- 测试2: mask=true (默认) -->
      <div class="test-section">
        <h4>测试2: mask=true (默认)</h4>
        <Button type="primary" @click="drawer2Open = true"
          >打开有遮罩抽屉</Button
        >
        <Drawer
          v-model:open="drawer2Open"
          title="有遮罩抽屉"
          :mask="true"
          position="right"
        >
          <div class="drawer-content">
            <p>这个抽屉有默认遮罩层，点击遮罩区域可以关闭。</p>
          </div>
        </Drawer>
      </div>

      <!-- 测试3: 自定义遮罩样式 -->
      <div class="test-section">
        <h4>测试3: 自定义遮罩样式</h4>
        <Button type="primary" @click="drawer3Open = true"
          >打开自定义遮罩抽屉</Button
        >
        <Drawer
          v-model:open="drawer3Open"
          title="自定义遮罩抽屉"
          :mask="true"
          :mask-style="customMaskStyle"
          position="bottom"
        >
          <div class="drawer-content">
            <p>这个抽屉有自定义样式的遮罩层，模糊背景效果。</p>
          </div>
        </Drawer>
      </div>

      <!-- 函数式API测试 -->
      <div class="test-section">
        <h4>函数式API测试 (仅用于说明函数调用方法)</h4>
        <Button type="primary" @click="showNoMaskDrawer"
          >函数式调用 - 无遮罩</Button
        >
        <Button
          type="primary"
          style="margin-left: 10px"
          @click="showCustomMaskDrawer"
          >函数式调用 - 自定义遮罩</Button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 控制抽屉显示状态
const drawer1Open = ref(false);
const drawer2Open = ref(false);
const drawer3Open = ref(false);

// 自定义遮罩样式
const customMaskStyle = {
  backgroundColor: 'rgba(255, 250, 255, 0.1)',
  backdropFilter: 'blur(15px)',
};

// 函数式调用 - 无遮罩（仅用于说明函数调用方法）
const showNoMaskDrawer = () => {
  showDrawer({
    title: '无遮罩抽屉',
    content: '这个抽屉没有遮罩层，点击页面其他区域不会关闭。',
    mask: false,
    position: 'right',
  });
};

// 函数式调用 - 自定义遮罩（仅用于说明函数调用方法）
const showCustomMaskDrawer = () => {
  showDrawer({
    title: '自定义遮罩抽屉',
    content: '这个抽屉有自定义样式的遮罩层，模糊背景效果。',
    mask: true,
    maskStyle: customMaskStyle,
    position: 'right',
  });
};
</script>

<style scoped>
.drawer-demo {
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.test-section {
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.test-section h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.drawer-content {
  padding: 20px 0;
}
</style>

无头部/底部

通过 header 和 footer 属性可以完全隐藏抽屉的头部和底部区域。

无头部抽屉

无头部无底部抽屉

仅关闭按钮的抽屉

vue

<template>
  <div class="drawer-demo">
    <div class="demo-section">
      <h3>无头部抽屉</h3>
      <button class="btn btn--primary" @click="noHeaderDrawerVisible = true">
        打开无头部抽屉
      </button>
      <Drawer
        v-model:open="noHeaderDrawerVisible"
        :header="false"
        title="无头部抽屉"
        :closable="false"
      >
        <div class="demo-content">
          <p>这是一个没有头部区域的抽屉。</p>
          <p>
            通过设置
            <code>header="false"</code> 可以完全隐藏头部，包括标题和关闭按钮。
          </p>
          <button
            class="btn btn--primary"
            @click="noHeaderDrawerVisible = false"
          >
            关闭抽屉
          </button>
        </div>
      </Drawer>
    </div>

    <div class="demo-section">
      <h3>无头部无底部抽屉</h3>
      <button
        class="btn btn--primary"
        @click="noHeaderFooterDrawerVisible = true"
      >
        打开无头部无底部抽屉
      </button>
      <Drawer
        v-model:open="noHeaderFooterDrawerVisible"
        :header="false"
        :footer="false"
        :closable="false"
      >
        <div class="demo-content">
          <p>这是一个既没有头部也没有底部的抽屉。</p>
          <p>
            通过设置 <code>header="false"</code> 和
            <code>footer="false"</code> 可以完全隐藏这两个区域。
          </p>
          <button
            class="btn btn--primary"
            @click="noHeaderFooterDrawerVisible = false"
          >
            关闭抽屉
          </button>
        </div>
      </Drawer>
    </div>

    <div class="demo-section">
      <h3>仅关闭按钮的抽屉</h3>
      <button
        class="btn btn--primary"
        @click="onlyCloseBtnDrawerVisible = true"
      >
        打开仅关闭按钮的抽屉
      </button>
      <Drawer v-model:open="onlyCloseBtnDrawerVisible" title="">
        <div class="demo-content">
          <p>这是一个只有关闭按钮的抽屉。</p>
          <p>通过设置 <code>title=""</code> 可以只显示关闭按钮而不显示标题。</p>
        </div>
      </Drawer>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const noHeaderDrawerVisible = ref(false);
const noHeaderFooterDrawerVisible = ref(false);
const onlyCloseBtnDrawerVisible = ref(false);
</script>

<style scoped>
.drawer-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-content {
  padding: 16px;
  line-height: 1.6;
}

code {
  background-color: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
</style>

Props

属性名	类型	默认值	说明
open	boolean	undefined	是否打开抽屉
defaultOpen	boolean	false	默认是否打开抽屉
title	string	''	抽屉标题
content	string \| HTMLElement \| (() => HTMLElement)	undefined	抽屉内容
size	string	'md'	抽屉尺寸，可选值：'sm', 'md', 'lg', 'fullscreen'
position	string	'right'	抽屉位置，可选值：'left', 'right', 'top', 'bottom'
closable	boolean	true	是否显示关闭按钮
header	boolean	true	是否显示头部区域，设置为false时将完全隐藏头部
mask	boolean	true	是否显示遮罩层
maskStyle	Record<string, string \| number>	{}	自定义遮罩样式
maskClosable	boolean	true	点击遮罩层是否可以关闭抽屉
escClosable	boolean	true	按ESC键是否可以关闭抽屉
footer	boolean \| HTMLElement \| (() => HTMLElement)	true	抽屉底部，false表示不显示底部，true表示显示默认底部，HTMLElement或函数表示自定义底部
width	string \| number	undefined	抽屉宽度，支持数字(px)和字符串形式的CSS值
height	string \| number	undefined	抽屉高度，支持数字(px)和字符串形式的CSS值
animated	boolean	true	是否启用动画
transitionDuration	number	300	抽屉动画时长(ms)
maskTransitionDuration	number	200	遮罩层动画时长(ms)
zIndex	number	undefined	抽屉的z-index值

Events

事件名	说明	回调参数
open	抽屉打开时触发	(value: boolean)
close	抽屉关闭时触发	(value: boolean)
ok	点击确定按钮时触发	-
cancel	点击取消按钮或关闭抽屉时触发	-

Slots

插槽名	说明
default	抽屉的默认内容
header	抽屉的头部内容，优先级高于title属性
footer	抽屉的底部内容，优先级高于footer属性

非函数式调用

除了函数式API，也可以在模板中直接使用Drawer组件，通过v-model控制其显示状态，并使用插槽自定义内容。

vue

<template>
  <div>
    <button @click="drawerVisible = true">打开抽屉</button>

    <Drawer v-model:open="drawerVisible" title="非函数式抽屉">
      <template #header>
        <div class="custom-header">自定义头部内容</div>
      </template>

      <div class="drawer-content">这是使用非函数式调用的抽屉内容</div>

      <template #footer>
        <div class="custom-footer">
          <button @click="drawerVisible = false">取消</button>
          <button @click="handleOk">确定</button>
        </div>
      </template>
    </Drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Drawer from '@/components/Drawer';

const drawerVisible = ref(false);

const handleOk = () => {
  console.log('点击了确定按钮');
  drawerVisible.value = false;
};
</script>

<style scoped>
.custom-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.drawer-content {
  padding: 20px 0;
}

.custom-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style>

函数式API

showDrawer(options)

通过函数式API可以方便地在任何地方打开抽屉。

参数

参数名	类型	默认值	说明
title	string	-	抽屉标题
content	string \| HTMLElement \| (() => HTMLElement)	-	抽屉内容
size	string	'md'	抽屉尺寸，可选值：'sm', 'md', 'lg', 'fullscreen'
position	string	'right'	抽屉位置，可选值：'left', 'right', 'top', 'bottom'
closable	boolean	true	是否显示关闭按钮
mask	boolean	true	是否显示遮罩层
maskStyle	Record<string, string \| number>	{}	自定义遮罩样式
maskClosable	boolean	true	点击遮罩层是否可以关闭抽屉
escClosable	boolean	true	按ESC键是否可以关闭抽屉
footer	boolean \| HTMLElement \| (() => HTMLElement)	true	抽屉底部，false表示不显示底部，true表示显示默认底部，HTMLElement或函数表示自定义底部
width	string \| number	undefined	抽屉宽度，支持数字(px)和字符串形式的CSS值
height	string \| number	undefined	抽屉高度，支持数字(px)和字符串形式的CSS值
animated	boolean	true	是否启用动画
onOk	() => void	-	点击确定按钮时的回调函数
onCancel	() => void	-	点击取消按钮时的回调函数
onClose	() => void	-	抽屉关闭时的回调函数

返回值

属性名	类型	说明
close	() => void	用于手动关闭抽屉的方法

示例

javascript

import { showDrawer } from '@/components/Drawer';

// 打开抽屉
const drawer = showDrawer({
  title: '示例抽屉',
  content: '这是一个抽屉示例',
  onOk: () => {
    console.log('点击了确定按钮');
  },
  onCancel: () => {
    console.log('点击了取消按钮');
  },
});

// 打开无遮罩层抽屉
const noMaskDrawer = showDrawer({
  title: '无遮罩层抽屉',
  content: '这个抽屉没有显示遮罩层',
  mask: false,
  position: 'right',
});

// 打开自定义遮罩层抽屉
const customMaskDrawer = showDrawer({
  title: '自定义遮罩层抽屉',
  content: '这个抽屉有自定义样式的遮罩层，模糊背景效果',
  mask: true,
  maskStyle: {
    backgroundColor: 'rgba(255, 250, 255, 0.1)',
    backdropFilter: 'blur(15px)',
  },
  position: 'right',
});

// 手动关闭抽屉
// drawer.close();

Drawer 抽屉 ​

基础用法 ​

不同位置 ​

不同尺寸 ​

自定义按钮 ​

异步关闭 ​

动画控制 ​

动画控制说明

遮罩控制 ​

Drawer 遮罩测试

测试1: mask=false

测试2: mask=true (默认)

测试3: 自定义遮罩样式

函数式API测试 (仅用于说明函数调用方法)

无头部/底部 ​

无头部抽屉

无头部无底部抽屉

仅关闭按钮的抽屉

Props ​

Events ​

Slots ​

非函数式调用 ​

函数式API ​

showDrawer(options) ​

参数 ​

返回值 ​

示例 ​