u

code/g3soft-libs/docs/examples/drawer/basic.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// 最常用：右侧滑出，v-model:open 控制，cancel 事件表示「被关闭」
+import { ref } from 'vue'
+import { G3Button, G3Drawer, G3Message } from '@g3soft/ui'
+
+const open = ref(false)
+</script>
+
+<template>
+  <div>
+    <G3Button @click="open = true">打开抽屉</G3Button>
+
+    <G3Drawer v-model:open="open" title="筛选条件" @cancel="G3Message.info('已关闭')">
+      <p style="margin: 0">抽屉内容区域可滚动，适合承载较长的表单或列表。</p>
+      <p style="margin: 8px 0 0; color: #6b7280">拖动左边缘可以调整宽度。</p>
+    </G3Drawer>
+  </div>
+</template>

code/g3soft-libs/docs/examples/drawer/footer.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// #footer 底部动作区；#extra 放标题下方的补充信息
+import { ref } from 'vue'
+import { G3Button, G3Drawer, G3Input, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+const keyword = ref('')
+</script>
+
+<template>
+  <div>
+    <G3Button @click="open = true">带底部动作</G3Button>
+
+    <G3Drawer v-model:open="open" title="高级筛选" :width="400">
+      <template #extra>
+        <span style="font-size: 12px; color: #6b7280">已选 2 个条件</span>
+      </template>
+
+      <G3Space direction="vertical" :size="12" style="display: flex">
+        <G3Input v-model="keyword" placeholder="关键词" />
+        <G3Input v-model="keyword" placeholder="负责人" />
+      </G3Space>
+
+      <template #footer>
+        <G3Space :size="8">
+          <G3Button type="outline" @click="open = false">重置</G3Button>
+          <G3Button @click="open = false">应用筛选</G3Button>
+        </G3Space>
+      </template>
+    </G3Drawer>
+  </div>
+</template>

code/g3soft-libs/docs/examples/drawer/placement.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// placement：right（默认）/ left / top / bottom，滑出的方向与缩放手柄同步
+import { ref } from 'vue'
+import { G3Button, G3Drawer, G3Space } from '@g3soft/ui'
+
+const placement = ref<'right' | 'left' | 'top' | 'bottom'>('right')
+const open = ref(false)
+
+function show(value: 'right' | 'left' | 'top' | 'bottom') {
+  placement.value = value
+  open.value = true
+}
+</script>
+
+<template>
+  <G3Space :size="[8, 8]" wrap>
+    <G3Button v-for="item in ['right', 'left', 'top', 'bottom'] as const" :key="item" type="outline" @click="show(item)">
+      {{ item }}
+    </G3Button>
+
+    <G3Drawer v-model:open="open" :title="`从 ${placement} 滑出`" :placement="placement" :width="360" :height="280">
+      左右方向用 width，上下方向用 height 控制尺寸。
+    </G3Drawer>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/drawer/size.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// 尺寸与可缩放：width / height 支持数字（px）或任意 CSS 长度；resizable 可关掉拖拽
+import { ref } from 'vue'
+import { G3Button, G3Drawer, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+const width = ref<number | string>(480)
+const resizable = ref(true)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3Space :size="8">
+      <G3Button size="small" type="outline" @click="width = 360">窄（360px）</G3Button>
+      <G3Button size="small" type="outline" @click="width = 640">宽（640px）</G3Button>
+      <G3Button size="small" type="outline" @click="width = '60%'">百分比（60%）</G3Button>
+      <G3Button size="small" type="ghost" @click="resizable = !resizable">
+        拖拽：{{ resizable ? '开' : '关' }}
+      </G3Button>
+    </G3Space>
+
+    <div>
+      <G3Button @click="open = true">打开（宽 {{ width }}）</G3Button>
+    </div>
+
+    <G3Drawer v-model:open="open" title="尺寸可配置" :width="width" :resizable="resizable">
+      当前宽度：{{ width }}。拖拽左边缘时只会改变宽度，不会影响高度。
+    </G3Drawer>
+  </G3Space>
+</template>