oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: VerticalButtonGroup style

Browse Source
This commit is contained in:
xingyu4j
2025-11-05 20:08:46 +08:00
parent beec71dbbd
commit e4040520e0
2 changed files with 15 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ButtonGroup } from 'ant-design-vue';
import { Space } from 'ant-design-vue';
/**
* 垂直按钮组
* Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
@@ -9,31 +8,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
</script>
<template>
<ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
<slot></slot>
</ButtonGroup>
<Space v-bind="$attrs">
<Space.Compact direction="vertical">
<slot></slot>
</Space.Compact>
</Space>
</template>
<style scoped lang="scss">
// TODO @AI:圆角的样式不太对！
.ant-btn-group > :deep(.ant-btn:first-child) {
border-bottom-color: transparent;
border-radius: hsl(var(--radius)) hsl(var(--radius)) 0 0;
}
.ant-btn-group > :deep(.ant-btn:last-child) {
border-top-color: transparent;
border-radius: 0 0 hsl(var(--radius)) hsl(var(--radius));
}
.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 0;
}
.ant-btn-group > :deep(.ant-btn:not(:last-child)) {
margin-right: 0;
margin-bottom: -1px;
}
</style>