feat:重构按钮和icon组件

2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
@@ -0,0 +1,260 @@
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+        addGlobalClass: true,
+    },
+    properties: {
+        type: {
+            type: String,
+            value: 'default',
+        },
+        openType: {
+            type: String,
+            value: '',
+        },
+        plain: {
+            type: Boolean,
+            value: false,
+        },
+        size: {
+            type: String,
+            value: 'normal',
+        },
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+        flat: {
+            type: Boolean,
+            value: false,
+        },
+        loading: {
+            type: Boolean,
+            value: false,
+        },
+        style: {
+            type: String,
+            value: '',
+        },
+        width: {
+            type: String,
+            value: '',
+        },
+        height: {
+            type: String,
+            value: '',
+        },
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        loadingSize: {
+            type: String,
+            value: '20px',
+        },
+        loadingColor: {
+            type: String,
+            value: '#ffffff',
+        },
+        icon: {
+            type: String,
+            value: '',
+        },
+        iconClassPrefix: {
+            type: String,
+            value: 'toy-icon',
+        },
+        iconSize: {
+            type: String,
+            value: '44rpx',
+        },
+        iconColor: {
+            type: String,
+            value: '#ffffff',
+        },
+        sessionFrom: {
+            type: String,
+            value: '',
+        },
+        sendMessageTitle: {
+            type: String,
+            value: '',
+        },
+        sendMessagePath: {
+            type: String,
+            value: '',
+        },
+        sendMessageImg: {
+            type: String,
+            value: '',
+        },
+        showMessageCard: {
+            type: Boolean,
+            value: false,
+        },
+        appParameter: {
+            type: String,
+            value: '',
+        },
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        pressed: false,
+        rootClassName: '',
+        rootStyle: '',
+        resolvedIconColor: '#ffffff',
+        resolvedLoadingColor: '#ffffff',
+        resolvedIconSize: '44rpx',
+        resolvedLoadingSize: '20px',
+    },
+    observers: {
+        'type,plain,size,disabled,flat,loading,style,width,height,iconColor,iconSize,loadingColor,loadingSize,pressed':
+            function () {
+                this.syncViewState();
+            },
+    },
+    lifetimes: {
+        attached() {
+            this.syncViewState();
+        },
+    },
+    methods: {
+        syncViewState() {
+            const {
+                type,
+                plain,
+                size,
+                disabled,
+                flat,
+                loading,
+                style,
+                width,
+                height,
+                iconColor,
+                iconSize,
+                loadingColor,
+                loadingSize,
+                pressed,
+            } = this.data;
+
+            const classNames = ['toy-button', `toy-button--${type}`, `toy-button--${size}`];
+            if (flat) {
+                classNames.push('toy-button--flat');
+            }
+            if (plain) {
+                classNames.push('plain');
+            }
+            if (disabled) {
+                classNames.push('disabled');
+            }
+            if (loading) {
+                classNames.push('loading');
+            }
+            if (pressed && !disabled && !loading) {
+                classNames.push('active');
+            }
+
+            const styleSegments = [style];
+            const normalizedWidth = this.normalizeUnit(width);
+            const normalizedHeight = this.normalizeUnit(height);
+            if (normalizedWidth) {
+                styleSegments.push(`width:${normalizedWidth}`);
+            }
+            if (normalizedHeight) {
+                styleSegments.push(`height:${normalizedHeight}`);
+            }
+
+            const resolvedIconColor = this.getResolvedIconColor(
+                iconColor,
+                type,
+                plain,
+                disabled,
+            );
+            const resolvedLoadingColor = loadingColor || resolvedIconColor;
+
+            this.setData({
+                rootClassName: classNames.join(' '),
+                rootStyle: styleSegments.filter(Boolean).join(';'),
+                resolvedIconColor,
+                resolvedLoadingColor,
+                resolvedIconSize: this.normalizeUnit(iconSize) || '44rpx',
+                resolvedLoadingSize: this.normalizeUnit(loadingSize) || '20px',
+            });
+        },
+        normalizeUnit(value: string) {
+            if (!value) {
+                return '';
+            }
+            return /^\d+(\.\d+)?$/.test(value) ? `${value}rpx` : value;
+        },
+        getResolvedIconColor(
+            iconColor: string,
+            type: string,
+            plain: boolean,
+            disabled: boolean,
+        ) {
+            if (disabled) {
+                return '#b8b2a6';
+            }
+            if (type === 'primary') {
+                return '#6c5a00';
+            }
+            if (type === 'white' && !plain) {
+                return '#322e25';
+            }
+            return iconColor || '#ffffff';
+        },
+        onTouchStart() {
+            if (this.data.disabled || this.data.loading) {
+                return;
+            }
+            this.setData({ pressed: true });
+        },
+        onTouchEnd() {
+            if (!this.data.pressed) {
+                return;
+            }
+            this.setData({ pressed: false });
+        },
+        onTouchCancel() {
+            if (!this.data.pressed) {
+                return;
+            }
+            this.setData({ pressed: false });
+        },
+        onClick(e: WechatMiniprogram.TouchEvent): void {
+            this.triggerEvent('click', e);
+        },
+        onGetUserInfo(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('getuserinfo', e.detail);
+        },
+        onContact(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('contact', e.detail);
+        },
+        onGetPhoneNumber(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('getphonenumber', e.detail);
+        },
+        onGetRealTimePhoneNumber(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('getrealtimephonenumber', e.detail);
+        },
+        onAgreePrivacyAuthorization(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('agreeprivacyauthorization', e.detail);
+        },
+        onError(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('error', e.detail);
+        },
+        onLaunchApp(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('launchapp', e.detail);
+        },
+        onOpenSetting(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('opensetting', e.detail);
+        },
+        onChooseAvatar(e: WechatMiniprogram.CustomEvent) {
+            this.triggerEvent('chooseavatar', e.detail);
+        },
+    },
+    externalClasses: ['custom-class'],
+});