BI-129824 fix: 控件优化

packages/fineui/src/case/button/switch.js

@@ -1,15 +1,13 @@
 import { AbsoluteLayout, shortcut, i18nText } from "@/core";
 import { TextButton, Label, BasicButton } from "@/base";
 
+const CIRCLE_SIZE = 12;
+
 @shortcut()
 export class Switch extends BasicButton {
     static xtype = "bi.switch";
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-    constants = {
-        CIRCLE_SIZE: 12,
-    };
-
     props = {
         extraCls: "bi-switch",
         attributes: {
@@ -17,13 +15,13 @@ export class Switch extends BasicButton {
         },
         height: 20,
         width: 44,
-        showTip: false,
+        showTip: true,
+        textGap: 8,
     };
 
     render() {
-        const o = this.options,
-            c = this.constants;
-        const tgap = (o.height - c.CIRCLE_SIZE) / 2;
+        const { selected, width, height, textGap, showTip } = this.options;
+        const tgap = (height - CIRCLE_SIZE) / 2;
 
         return {
             type: AbsoluteLayout.xtype,
@@ -39,15 +37,15 @@ export class Switch extends BasicButton {
                     width: 12,
                     height: 12,
                     top: tgap,
-                    left: o.selected ? o.width - 16 : 4,
+                    left: selected ? width - height + tgap : tgap,
                 },
                 {
                     type: Label.xtype,
                     text: i18nText("BI-Basic_Simple_Open"),
                     cls: "content-tip",
-                    left: 8,
+                    left: textGap,
                     top: tgap - 2,
-                    invisible: !(o.showTip && o.selected),
+                    invisible: !(showTip && selected),
                     ref: _ref => {
                         this.openTip = _ref;
                     },
@@ -56,9 +54,9 @@ export class Switch extends BasicButton {
                     type: Label.xtype,
                     text: i18nText("BI-Basic_Simple_Close"),
                     cls: "content-tip",
-                    right: 8,
+                    right: textGap,
                     top: tgap - 2,
-                    invisible: !(o.showTip && !o.selected),
+                    invisible: !(showTip && !selected),
                     ref: _ref => {
                         this.closeTip = _ref;
                     },
@@ -78,7 +76,9 @@ export class Switch extends BasicButton {
 
     setSelected(v) {
         super.setSelected(...arguments);
-        this.layout.attr("items")[0].left = v ? this.options.width - 16 : 4;
+        const { width, height } = this.options;
+        const tgap = (height - CIRCLE_SIZE) / 2;
+        this.layout.attr("items")[0].left = v ? width - height + tgap : tgap;
         this.layout.resize();
         this.options.showTip && this.openTip.setVisible(v);
         this.options.showTip && this.closeTip.setVisible(!v);

packages/fineui/typescript/case/button/switch.ts

@@ -1,6 +1,11 @@
 import { BasicButton } from "../../base/single/button/button.basic";
 
 export declare class Switch extends BasicButton {
+
+  props: {
+    textGap: number;
+  } & BasicButton['props']
+
   static xtype: string;
   static EVENT_CHANGE: string;
 }