From e92b960972ab50929bb27b155db11e5862cf33af Mon Sep 17 00:00:00 2001
From: lijianxiong <1518062161@qq.com>
Date: Sat, 1 Nov 2025 09:48:19 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E8=B0=83=E6=95=B4=E6=B5=AE?=
=?UTF-8?q?=E5=8A=A8=E6=8C=89=E9=92=AE=E5=91=88=E7=8E=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/common/float-button/float-button.scss | 93 +++++++++++++----------
src/common/float-button/float-button.tsx | 14 +++-
2 files changed, 63 insertions(+), 44 deletions(-)
diff --git a/src/common/float-button/float-button.scss b/src/common/float-button/float-button.scss
index 7f383b6ed..735cf1a3e 100644
--- a/src/common/float-button/float-button.scss
+++ b/src/common/float-button/float-button.scss
@@ -1,40 +1,43 @@
$float-button: (
// Color
'color-bg': getCssVar('color', 'bg', 1), // 按钮背景色
- 'color-text': getCssVar('color', 'text', 1), // 按钮文字颜色
+ 'color-text': getCssVar('color', 'primary'), // 按钮文字颜色
'color-box-shadow': getCssVar(shadow, elevated), // 按钮阴影
// Width/Height
- 'width': rem(50px), // 按钮宽度
- 'height': rem(50px), // 按钮高度
+ 'width': getCssVar('height-control', 'large'), // 按钮宽度
+ 'height': getCssVar('height-control', 'large'), // 按钮高度
+ // Spacing
+ 'spacing-padding': unset, // 按钮内边距
+ 'spacing-left-padding': 0 getCssVar('spacing', 'super-tight') 0 0,
+ 'spacing-right-padding': 0 0 0 getCssVar('spacing', 'super-tight'),
// Radius
- 'radius-circle': 50%, // 按钮圆角
+ 'radius-circle': unset, // 按钮圆角
+ 'radius-left-circle': 0 calc(#{getCssVar('height-control', 'large')} / 2) calc(#{getCssVar('height-control', 'large')} / 2) 0, // 按钮左侧位置时显示的圆角
+ 'radius-right-circle': calc(#{getCssVar('height-control', 'large')} / 2) 0 0 calc(#{getCssVar('height-control', 'large')} / 2), // 按钮右侧位置时显示的圆角
// Font
- 'font-text-font-size': getCssVar('font-size', 'header-6'), // 按钮文字大小
+ 'font-text-font-size': getCssVar('font-size', 'header-3'), // 按钮文字大小
// Other
'position': fixed, // 按钮定位模式
- 'left': unset, // 按钮基于左边移动位置
- 'right': unset, // 按钮基于右边移动位置
- 'top': unset, // 按钮基于上边移动位置
- 'bottom': unset, // 按钮下边移动位置
+ 'position-left': unset, // 按钮基于左边移动位置
+ 'position-right': unset, // 按钮基于右边移动位置
+ 'position-top': unset, // 按钮基于上边移动位置
+ 'position-bottom': unset, // 按钮下边移动位置
+ 'position-base-offset': 0px, // 按钮基础偏移
+ 'position-start-top': calc(#{getCssVar(float-button, position-base-offset)} + #{getCssVar(height, control, large)}), // 按钮基于顶部偏移：顶部偏移量 + 视图头高度
+ 'position-end-bottom': calc(#{getCssVar(float-button, position-base-offset)} + var(--van-back-top-bottom)), // 按钮基于底部偏移：底部偏移量 + 移动端安全距离
'transform': unset, // 按钮变换样式
- 'base-offset': rem(30px), // 按钮基础偏移
- 'start-top': calc(
- #{getCssVar(float-button, base-offset)} +
- #{getCssVar(height, control, large)}
- ), // 按钮基于顶部偏移：顶部偏移量 + 视图头高度
- 'end-bottom': calc(
- #{getCssVar(float-button, base-offset)} + var(--van-back-top-bottom)
- ), // 按钮基于底部偏移：底部偏移量 + 移动端安全距离
+ 'border': none,
);
@include b(float-button) {
@include set-component-css-var('float-button', $float-button);
- position: getCssVar(float-button, position);
- left: getCssVar(float-button, left);
- right: getCssVar(float-button, right);
- top: getCssVar(float-button, top);
- bottom: getCssVar(float-button, bottom);
+ position: getCssVar(float-button, position);
+ left: getCssVar(float-button, position-left);
+ right: getCssVar(float-button, position-right);
+ top: getCssVar(float-button, position-top);
+ bottom: getCssVar(float-button, position-bottom);
+ border: none;
display: flex;
align-items: center;
justify-content: center;
@@ -42,45 +45,53 @@ $float-button: (
height: getCssVar(float-button, height);
background-color: getCssVar(float-button, color-bg);
border-radius: getCssVar(float-button, radius-circle);
+ padding: getCssVar(float-button, spacing-padding);
box-shadow: getCssVar(float-button, color-box-shadow);
transform: getCssVar(float-button, transform);
-
- &.van-button {
- background-color: getCssVar(float-button, color-bg);
- border: none;
color: getCssVar(float-button, color-text);
font-size: getCssVar(float-button, font-text-font-size);
- .van-button__text {
+
+ @include e(icon) {
display: flex;
align-items: center;
- justify-content: center;
}
- }
@include when(leftstart) {
- #{getCssVar(float-button, left)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, top)}: getCssVar(float-button, start-top);
+ #{getCssVar(float-button, position-left)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-top)}: getCssVar(float-button, position-start-top);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-left-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-left-padding);
}
@include when(left) {
- #{getCssVarName(float-button, left)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, top)}: 50%;
+ #{getCssVarName(float-button, position-left)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-top)}: 50%;
#{getCssVarName(float-button, transform)}: translateY(-50%);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-left-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-left-padding);
}
@include when(leftend) {
- #{getCssVarName(float-button, left)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, bottom)}: getCssVar(float-button, end-bottom);
+ #{getCssVarName(float-button, position-left)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-bottom)}: getCssVar(float-button, position-end-bottom);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-left-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-left-padding);
}
@include when(rightstart) {
- #{getCssVarName(float-button, right)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, top)}: getCssVar(float-button, start-top);
+ #{getCssVarName(float-button, position-right)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-top)}: getCssVar(float-button, position-start-top);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-right-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-right-padding);
}
@include when(right) {
- #{getCssVarName(float-button, right)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, top)}: 50%;
+ #{getCssVarName(float-button, position-right)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-top)}: 50%;
#{getCssVarName(float-button, transform)}: translateY(-50%);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-right-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-right-padding);
}
@include when(rightend) {
- #{getCssVarName(float-button, right)}: getCssVar(float-button, base-offset);
- #{getCssVarName(float-button, bottom)}: getCssVar(float-button, end-bottom);
+ #{getCssVarName(float-button, position-right)}: getCssVar(float-button, position-base-offset);
+ #{getCssVarName(float-button, position-bottom)}: getCssVar(float-button, position-end-bottom);
+ #{getCssVarName(float-button, radius-circle)}: getCssVar(float-button, radius-right-circle);
+ #{getCssVarName(float-button, spacing-padding)}: getCssVar(float-button, spacing-right-padding);
}
}
diff --git a/src/common/float-button/float-button.tsx b/src/common/float-button/float-button.tsx
index ede1da866..df1d40214 100644
--- a/src/common/float-button/float-button.tsx
+++ b/src/common/float-button/float-button.tsx
@@ -29,8 +29,11 @@ export const FloatButton = defineComponent({
},
render() {
const align = this.align.toLocaleLowerCase();
+ const defaultSlot = this.$slots.default?.();
+ const iconSlot = this.$slots.icon?.();
+ const textSlot = this.$slots.text?.();
return (
-
-
-
+ {defaultSlot || [
+
+ {iconSlot || }
+
,
+ {textSlot}
,
+ ]}
+
);
},
});
--
Gitee
From 1027f2d5e4707f238a7e3743593fefc015a966d5 Mon Sep 17 00:00:00 2001
From: lijianxiong <1518062161@qq.com>
Date: Sat, 1 Nov 2025 10:20:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E8=8F=9C?=
=?UTF-8?q?=E5=8D=95=E8=87=AA=E5=AE=9A=E4=B9=89=E8=AE=BE=E8=AE=A1=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=E5=A4=8D=E9=80=89=E6=A1=86=E7=82=B9=E5=87=BB=E5=90=8E?=
=?UTF-8?q?=E6=9C=AA=E8=A7=A6=E5=8F=91=E9=A1=B9=E7=82=B9=E5=87=BB=E4=BA=8B?=
=?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../custom-menu-design/custom-menu-design.scss | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/src/control/app-menu/custom-menu-design/custom-menu-design.scss b/src/control/app-menu/custom-menu-design/custom-menu-design.scss
index 28f324bdc..05b4cfb95 100644
--- a/src/control/app-menu/custom-menu-design/custom-menu-design.scss
+++ b/src/control/app-menu/custom-menu-design/custom-menu-design.scss
@@ -83,4 +83,19 @@ $menu-design: (
margin-left: auto;
}
}
+
+ // 解决复选框点击后未触发点击事件的问题，通过添加蒙层来触发对应项的点击事件
+ .#{bem(menu-design, item)} {
+ position: relative;
+
+ &::after {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ content: '';
+ }
+ }
}
--
Gitee