u

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>