DragDrawer 可拖拽抽屉

DragDrawer 可拖拽抽屉 的基础用法、公开 API 与示例。

基础示例

打开抽屉并拖动触发条调整宽度。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DragDrawer } from "@/components/page/drag-drawer";

const visible = ref(false);
const width = ref(360);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="visible = true">打开</el-button>
      <DragDrawer v-model="visible" v-model:width="width" title="可拖拽抽屉" draggable :min-width="260" :max-width="720">
        <div style="padding: 16px">拖动抽屉边缘的触发条可以调整宽度，当前宽度：{{ Math.round(width) }}px</div>
      </DragDrawer>
    </div>
  </ClientOnly>
</template>

隐藏源代码

左侧拖拽抽屉

展示左侧方向、默认宽度和拖拽范围控制。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { DragDrawer } from "@/components/page/drag-drawer";

const visible = ref(false);
const width = ref(320);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <el-button type="primary" @click="visible = true">打开左侧抽屉</el-button>
      <DragDrawer
        v-model="visible"
        v-model:width="width"
        title="左侧拖拽抽屉"
        placement="left"
        draggable
        :min-width="240"
        :max-width="560"
      >
        <div style="padding: 16px">
          <p>适合放置筛选器、详情目录或辅助配置。</p>
          <p>当前宽度：{{ Math.round(width) }}px</p>
        </div>
      </DragDrawer>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { DragDrawer } from "@/components/page/drag-drawer";

Props

参数	说明	类型	默认值	必填
placement	抽屉打开位置	string	"right"	否
draggable	是否开启拖拽功能	boolean	false	否
minWidth	抽屉最小宽度	number	200	否
maxWidth	抽屉最大宽度	number | "auto"	"auto"	否
inner	是否在容器内使用抽屉	boolean	false	否
modelValue	组件双向绑定值。	boolean	-	是
width	组件宽度。	number	200	否

Events

事件名	说明	回调参数
onResizeStart	拖拽启动事件	-
onResize	拖拽过程事件	event: DragDrawerResizeEvent
onResizeEnd	拖拽结束事件	-
update:modelValue	双向绑定值更新时触发。	value: boolean
update:width	width 更新时触发。	value: number

Slots

插槽名	说明	参数
动态插槽(slot)	动态转发当前组件收到的同名插槽。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
DragDrawer	导出 DragDrawer 供业务侧复用。	useInstall(index)

Types

DragDrawerProps

导出 DragDrawerProps 供业务侧复用。

字段	说明	类型	默认值	必填
placement	抽屉打开位置	string	-	否
draggable	是否开启拖拽功能	boolean	-	否
minWidth	抽屉最小宽度	number	-	否
maxWidth	抽屉最大宽度	number | "auto"	-	否
inner	是否在容器内使用抽屉	boolean	-	否

DragDrawerEmits

导出 DragDrawerEmits 供业务侧复用。

字段	说明	类型	默认值	必填
onResizeStart	拖拽启动事件	[]	-	是
onResize	拖拽过程事件	[event: DragDrawerResizeEvent]	-	是
onResizeEnd	拖拽结束事件	[]	-	是

DragDrawerResizeEvent

导出 DragDrawerResizeEvent 供业务侧复用。

字段	说明	类型	默认值	必填
atMin	拖拽约束后的像素宽度	number	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。