33 lines
998 B
Vue
33 lines
998 B
Vue
<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>
|