26 lines
843 B
Vue
26 lines
843 B
Vue
<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>
|