From abaa615d639449a20a2ca03592b5901257480a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=94=BF=E6=9D=83?= <1978141412@qq.com>
Date: Fri, 3 Jan 2025 19:44:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8C=89=E9=92=AE=E5=88=97=E8=A1=A8?=
=?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E6=9B=B4?=
=?UTF-8?q?=E5=A4=9A=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
CHANGELOG.md | 1 +
src/common/button-list/button-list.scss | 41 +++++--
src/common/button-list/button-list.tsx | 148 ++++++++++++++++++------
3 files changed, 145 insertions(+), 45 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c07f2254..0886d067 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
- 表单分组和表单项支持配置图标资源
- 地图支持用户自定义样式
- 还原应用初始化时403提示信息
+- 按钮列表默认支持显示更多模式
### Fixed
diff --git a/src/common/button-list/button-list.scss b/src/common/button-list/button-list.scss
index 97a66af1..41a6ca34 100644
--- a/src/common/button-list/button-list.scss
+++ b/src/common/button-list/button-list.scss
@@ -8,11 +8,28 @@ $button-list: (
popover-button-margin: getCssVar(spacing, none),
popover-button-size: getCssVar(height-control, large),
popover-button-font-size: getCssVar(font-size, regular),
+ gap: getCssVar(spacing, base, tight),
);
@include b(button-list) {
@include set-component-css-var(button-list, $button-list);
+ .el-button + .el-button {
+ margin-left: getCssVar(button-list, gap);
+ }
+
+ @include e(content) {
+ display: flex;
+
+ .#{bem('button-list','dropdown')} {
+ width: auto;
+ }
+
+ .el-button + .el-dropdown {
+ margin-left: getCssVar(button-list, gap);
+ }
+ }
+
@include e(button-content) {
display: flex;
align-items: center;
@@ -23,8 +40,8 @@ $button-list: (
justify-content: center;
width: getCssVar(button-list, icon-size);
height: getCssVar(button-list, icon-size);
- font-size: getCssVar(button-list, icon-size);
margin-right: getCssVar(button-list, icon-margin);
+ font-size: getCssVar(button-list, icon-size);
}
}
@@ -44,15 +61,18 @@ $button-list: (
margin-left: getCssVar(button-list, icon-margin);
}
}
+
.el-button-group {
- width: 100%;
display: flex;
+ width: 100%;
height: 100%;
border-radius: getCssVar(border, radius-small);
+
.el-button {
&:first-child {
flex-grow: 1;
}
+
&:last-child {
flex-shrink: 0;
}
@@ -65,13 +85,16 @@ $button-list: (
--el-mask-color-extra-light: transparent;
--el-button-hover-bg-color: transparent;
}
+
.el-button-group {
.#{bem('button-list','item')} {
padding-right: 0;
}
+
.el-button {
color: getCssVar(color, text-2);
}
+
&:hover {
.el-button {
color: getCssVar(color, primary);
@@ -83,9 +106,9 @@ $button-list: (
@include m(itemx) {
.#{bem('button-list','more-button')} {
- padding-left: 0;
- padding-right: 0;
width: 32px;
+ padding-right: 0;
+ padding-left: 0;
}
}
@@ -106,28 +129,32 @@ $button-list: (
--el-button-bg-color: transparent;
--el-mask-color-extra-light: transparent;
- width: 100%;
display: block;
- text-align: left;
- border-radius: 0;
+ width: 100%;
padding: getCssVar(button-list, popover-button-padding);
margin: getCssVar(button-list, popover-button-margin);
font-size: getCssVar(button-list, popover-button-font-size);
+ text-align: left;
+ border-radius: 0;
}
@include m(style2) {
&.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list {
background-color: transparent;
+
.el-dropdown-menu {
background-color: transparent;
}
+
.el-dropdown-menu__item {
background-color: transparent;
+
&:hover {
background-color: getCssVar(color, bg, 0);
}
}
}
+
.el-button {
color: getCssVar(color, text-2);
}
diff --git a/src/common/button-list/button-list.tsx b/src/common/button-list/button-list.tsx
index dee5ca37..37753964 100644
--- a/src/common/button-list/button-list.tsx
+++ b/src/common/button-list/button-list.tsx
@@ -1,4 +1,12 @@
-import { computed, defineComponent, PropType, ref } from 'vue';
+/* eslint-disable no-unused-expressions */
+import {
+ computed,
+ defineComponent,
+ nextTick,
+ onMounted,
+ PropType,
+ ref,
+} from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import {
IAppDEUIActionGroupDetail,
@@ -6,6 +14,7 @@ import {
IPanelButtonList,
} from '@ibiz/model-core';
import { IButtonContainerState } from '@ibiz-template/runtime';
+import { debounce } from 'lodash-es';
import './button-list.scss';
/**
@@ -33,8 +42,11 @@ export const IBizButtonList = defineComponent({
setup(props, { emit }) {
const ns = useNamespace('button-list');
const dropdown = ref();
+ const componentRef = ref();
const { uiactionGroup, actionGroupExtractMode } = props.model;
+ const sliceIndex = ref(-1);
+
/**
* 可见行为首项下标
*/
@@ -63,6 +75,57 @@ export const IBizButtonList = defineComponent({
: 'click';
});
+ const calcItemWidth = (menuItem: HTMLElement) => {
+ const computedStyle = getComputedStyle(menuItem);
+ const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+ const marginRight = Number.parseInt(computedStyle.marginRight, 10);
+ return menuItem.offsetWidth + marginLeft + marginRight || 0;
+ };
+
+ const calcSliceIndex = () => {
+ if (!componentRef.value) return -1;
+ const items = Array.from(
+ componentRef.value.children ?? [],
+ ) as HTMLElement[];
+ const moreItemWidth = 44;
+ const computedMenuStyle = getComputedStyle(componentRef.value!);
+ const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
+ const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
+ const totalWidth =
+ componentRef.value!.clientWidth - paddingLeft - paddingRight;
+ let calcWidth = 0;
+ let index = 0;
+ items.forEach((item: HTMLElement, _index: number) => {
+ calcWidth += calcItemWidth(item);
+ if (calcWidth <= totalWidth - moreItemWidth) {
+ index = _index + 1;
+ }
+ });
+ return index === items.length ? -1 : index;
+ };
+
+ let handleResize = () => {
+ if (sliceIndex.value === calcSliceIndex()) return;
+ sliceIndex.value = -1;
+ nextTick(() => {
+ sliceIndex.value = calcSliceIndex();
+ });
+ };
+
+ // 容器大小变化监听器
+ let resizeObserver: ResizeObserver;
+
+ onMounted(() => {
+ // 33.34为60帧刷新频率
+ handleResize = debounce(handleResize, 33.34);
+ if (componentRef.value && ResizeObserver) {
+ resizeObserver = new ResizeObserver(() => {
+ handleResize();
+ });
+ resizeObserver.observe(componentRef.value);
+ }
+ });
+
/**
* 处理点击
*
@@ -135,27 +198,15 @@ export const IBizButtonList = defineComponent({
return null;
};
- /**
- * 绘制默认行为项
- *
- * @return {*} {JSX.Element}
- */
- const renderActions = (): JSX.Element => {
- return (
-
- {uiactionGroup?.uiactionGroupDetails?.map(
- (item: IAppDEUIActionGroupDetail) => renderButton(item),
- )}
-
- );
- };
-
/**
* 绘制下拉行为项
*
* @return {*} {JSX.Element}
*/
- const renderDropdown = (): JSX.Element => {
+ const renderDropdown = (
+ items: IAppDEUIActionGroupDetail[],
+ iconName: string = 'chevron-down-outline',
+ ): JSX.Element => {
const { id, caption, sysImage } = props.model;
return (
{{
default: () => {
- const item: IAppDEUIActionGroupDetail =
- uiactionGroup!.uiactionGroupDetails![firstIndex.value];
+ const item: IAppDEUIActionGroupDetail = items![firstIndex.value];
return (
{actionGroupExtractMode === 'ITEMX' &&
@@ -218,7 +268,7 @@ export const IBizButtonList = defineComponent({
]
) : (
)}
@@ -230,31 +280,53 @@ export const IBizButtonList = defineComponent({
},
dropdown: () => (
- {uiactionGroup!.uiactionGroupDetails?.map(
- (item: IAppDEUIActionGroupDetail, index: number) => {
- if (
- props.buttonsState[item.id!].visible &&
- (actionGroupExtractMode !== 'ITEMX' ||
- index !== firstIndex.value)
- ) {
- return (
-
- {renderButton(item)}
-
- );
- }
- return null;
- },
- )}
+ {items.map((item: IAppDEUIActionGroupDetail, index: number) => {
+ if (
+ props.buttonsState[item.id!].visible &&
+ (actionGroupExtractMode !== 'ITEMX' ||
+ index !== firstIndex.value)
+ ) {
+ return (
+ {renderButton(item)}
+ );
+ }
+ return null;
+ })}
),
}}
);
};
- return { ns, buttonStyle, renderDropdown, renderActions };
+
+ /**
+ * 绘制默认行为项
+ *
+ * @return {*} {JSX.Element}
+ */
+ const renderActions = (): JSX.Element => {
+ const groupDetails = uiactionGroup?.uiactionGroupDetails || [];
+ const items =
+ sliceIndex.value === -1
+ ? groupDetails
+ : groupDetails.slice(0, sliceIndex.value);
+
+ const moreItems =
+ sliceIndex.value === -1 ? [] : groupDetails.slice(sliceIndex.value);
+ return (
+
+ {items.map((item: IAppDEUIActionGroupDetail) => renderButton(item))}
+ {moreItems.length
+ ? renderDropdown(moreItems, 'ellipsis-horizontal')
+ : null}
+
+ );
+ };
+
+ return { ns, buttonStyle, uiactionGroup, renderDropdown, renderActions };
},
render() {
+ const items = this.uiactionGroup?.uiactionGroupDetails || [];
return (
{this.model.actionGroupExtractMode === 'ITEM'
? this.renderActions()
- : this.renderDropdown()}
+ : this.renderDropdown(items)}
);
},
--
Gitee