smart-flow/yudao-ui-admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【mall】diy-editor 的 vertical-button-group 迁移

Browse Source
This commit is contained in:
YunaiV
2025-11-05 00:31:10 +08:00
parent 6ac33e0208
commit db804c2602
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,37 @@ import { ButtonGroup } from 'ant-design-vue';
/**
* 垂直按钮组
* Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
* Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
*/
defineOptions({ name: 'VerticalButtonGroup' });
</script>
<template>
<ButtonGroup direction="vertical" v-bind="$attrs">
<ButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
<slot></slot>
</ButtonGroup>
</template>
<style scoped lang="scss"></style>
<style scoped lang="scss">
// TODO @AI:圆角的样式不太对！
.ant-btn-group > :deep(.ant-btn:first-child) {
border-bottom-color: transparent;
border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
}
.ant-btn-group > :deep(.ant-btn:last-child) {
border-top-color: transparent;
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-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>