Drawer 抽屉

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

基础用法

通过 showDrawer(options) 函数可以方便地在任何地方打开抽屉，无需在模板中预先声明组件。

<template>
  <div class="drawer-demo">

    <div class="demo-content">
      <div class="button-group">
        <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>

      <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 函数
const showDrawer = window.showDrawer;

// 右侧抽屉示例
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 属性控制。

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="() => showDrawer({ title: '左侧抽屉', content: '这是一个左侧抽屉', position: 'left' })">左侧抽屉</Button>
        <Button @click="() => showDrawer({ title: '右侧抽屉', content: '这是一个右侧抽屉', position: 'right' })">右侧抽屉</Button>
        <Button @click="() => showDrawer({ title: '顶部抽屉', content: '这是一个顶部抽屉', position: 'top' })">顶部抽屉</Button>
        <Button @click="() => showDrawer({ title: '底部抽屉', content: '这是一个底部抽屉', position: 'bottom' })">底部抽屉</Button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 从全局 window 对象获取 showDrawer 函数
const showDrawer = window.showDrawer;
</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;
}
</style>

不同尺寸

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

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="() => showDrawer({ title: '小尺寸抽屉', content: '这是一个小尺寸抽屉', size: 'sm' })">小尺寸</Button>
        <Button @click="() => showDrawer({ title: '中尺寸抽屉', content: '这是一个中尺寸抽屉', size: 'md' })">中尺寸</Button>
        <Button @click="() => showDrawer({ title: '大尺寸抽屉', content: '这是一个大尺寸抽屉', size: 'lg' })">大尺寸</Button>
        <Button @click="() => showDrawer({ title: '全屏抽屉', content: '这是一个全屏抽屉', size: 'fullscreen' })">全屏</Button>
        <Button @click="() => showDrawer({ title: '自定义宽度抽屉', content: '这是一个宽度为 600px 的抽屉', width: 600 })" type="primary">自定义宽度</Button>
        <Button @click="() => showDrawer({ title: '自定义高度抽屉', content: '这是一个高度为 400px 的抽屉', height: 400, position: 'bottom' })" type="primary">自定义高度</Button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 从全局 window 对象获取 showDrawer 函数
const showDrawer = window.showDrawer;
</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;
}
</style>

自定义按钮

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

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

<script setup>
// 从全局 window 对象获取 showDrawer 函数
const showDrawer = window.showDrawer;

const showCustomFooterDrawer = () => {
  let drawer;
  drawer = showDrawer({
    title: '自定义按钮',
    content: '这个抽屉使用了自定义的底部按钮',
    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;
    }
  });
};

const showCustomNoFooterDrawer = () => {
  let drawer;
  drawer = showDrawer({
    closable: true,
    footer: false,
    content: '没有默认的头部和底部按钮',
  });
};
</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;
}
</style>

异步关闭

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

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <Button @click="showAsyncDrawer">异步关闭</Button>
    </div>
  </div>
</template>

<script setup>
// 从全局 window 对象获取 showDrawer 函数
const showDrawer = window.showDrawer;

const showAsyncDrawer = () => {
  let drawer;

  drawer = showDrawer({
    title: '异步关闭',
    content: '点击确定后将模拟异步操作，操作完成后自动关闭抽屉',
    onOk: () => {
      // 模拟异步操作
      setTimeout(() => {
        console.log('异步操作完成');
        drawer.close();
      }, 2000);
    }
  });
};
</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;
}
</style>

动画控制

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

<template>
  <div class="drawer-demo">
    <div class="demo-content">
      <div class="button-group">
        <Button @click="showAnimatedDrawer">带动画的抽屉</Button>
        <Button @click="showNonAnimatedDrawer">无动画的抽屉</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>
    </div>
  </div>
</template>

<script setup>
// 从全局 window 对象获取 showDrawer 函数
const showDrawer = window.showDrawer;

// 带动画的抽屉
const showAnimatedDrawer = () => {
  showDrawer({
    title: '带动画的抽屉',
    content: '这个抽屉使用了默认的动画效果',
    animated: true,
    position: 'right'
  });
};

// 无动画的抽屉
const showNonAnimatedDrawer = () => {
  showDrawer({
    title: '无动画的抽屉',
    content: '这个抽屉禁用了动画效果，直接显示和隐藏',
    animated: false,
    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;
}

.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>

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	是否显示关闭按钮
mask	boolean	true	是否显示遮罩层
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	抽屉的默认内容
footer	抽屉的底部内容，优先级高于footer属性

函数式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	是否显示遮罩层
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	用于手动关闭抽屉的方法

示例

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'
});

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