| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-button-group v-bind="$attrs"> |
| 3 | <slot></slot> | |
| 4 | </el-button-group> | |
| 5 | </template> | |
| 6 | ||
| 7 | <script setup lang="ts"> | |
| 8 | /** | |
| 9 | * 垂直按钮组 | |
| 10 | * Element官方的按钮组只支持水平显示，通过重写样式实现垂直布局 | |
| 11 | */ | |
| 12 | defineOptions({ name: 'VerticalButtonGroup' }) | |
| 13 | </script> | |
| 14 | ||
| 15 | <style scoped lang="scss"> | |
| 16 | .el-button-group { | |
| 17 | display: inline-flex; | |
| 18 | flex-direction: column; | |
| 19 | } | |
| 20 | ||
| 21 | .el-button-group > :deep(.el-button:first-child) { | |
| 22 | border-bottom-color: var(--el-button-divide-border-color); | |
| 23 | border-top-right-radius: var(--el-border-radius-base); | |
| 24 | border-bottom-right-radius: 0; | |
| 25 | border-bottom-left-radius: 0; | |
| 26 | } | |
| 27 | ||
| 28 | .el-button-group > :deep(.el-button:last-child) { | |
| 29 | border-top-color: var(--el-button-divide-border-color); | |
| 30 | border-top-right-radius: 0; | |
| 31 | border-bottom-left-radius: var(--el-border-radius-base); | |
| 32 | border-top-left-radius: 0; | |
| 33 | } | |
| 34 | ||
| 35 | .el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) { | |
| 36 | border-top-color: var(--el-button-divide-border-color); | |
| 37 | border-bottom-color: var(--el-button-divide-border-color); | |
| 38 | } | |
| 39 | ||
| 40 | .el-button-group > :deep(.el-button:not(:last-child)) { | |
| 41 | margin-right: 0; | |
| 42 | margin-bottom: -1px; | |
| 43 | } | |
| 44 | </style> | |
