u

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>