修复线索问题定位错误问题

riku

2025-04-27 f46786f11c5c08ead7501a82e5a71430ad69b782

 miniprogram_npm/tdesign-miniprogram/message/message.js

@@ -6,178 +6,167 @@
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import { MessageType } from './message.interface';
import props from './props';
import { getRect, unitConvert, calcIcon, isObject } from '../common/utils';
import { unitConvert } from '../common/utils';
const SHOW_DURATION = 400;
const { prefix } = config;
const name = `${prefix}-message`;
const SHOW_DURATION = 500;
const THEME_ICON = {
    info: 'info-circle-filled',
    success: 'check-circle-filled',
    warning: 'info-circle-filled',
    error: 'error-circle-filled',
};
let Message = class Message extends SuperComponent {
    constructor() {
        super(...arguments);
        this.externalClasses = [
            `${prefix}-class`,
            `${prefix}-class-content`,
            `${prefix}-class-icon`,
            `${prefix}-class-link`,
            `${prefix}-class-close-btn`,
        ];
        this.options = {
            styleIsolation: 'apply-shared',
            multipleSlots: true,
        };
        this.properties = Object.assign({}, props);
        this.data = {
            prefix,
            classPrefix: name,
            loop: -1,
            animation: [],
            showAnimation: [],
            wrapTop: -999,
            messageList: [],
        };
        this.index = 0;
        this.instances = [];
        this.gap = 12;
        this.observers = {
            marquee(val) {
                if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
            visible(value) {
                if (value) {
                    this.setMessage(this.properties, this.properties.theme);
                }
                else {
                    this.setData({
                        marquee: {
                            speed: 50,
                            loop: -1,
                            delay: 0,
                        },
                        messageList: [],
                    });
                }
            },
            'icon, theme'(icon, theme) {
                this.setData({
                    _icon: calcIcon(icon, THEME_ICON[theme]),
                });
            },
            link(v) {
                const _link = isObject(v) ? Object.assign({}, v) : { content: v };
                this.setData({ _link });
            },
            closeBtn(v) {
                this.setData({
                    _closeBtn: calcIcon(v, 'close'),
                });
        };
        this.pageLifetimes = {
            show() {
                this.hideAll();
            },
        };
        this.closeTimeoutContext = 0;
        this.nextAnimationContext = 0;
        this.resetAnimation = wx.createAnimation({
            duration: 0,
            timingFunction: 'linear',
        });
        this.lifetimes = {
            ready() {
                this.memoInitialData();
            },
        };
    }
    ready() {
        this.memoInitalData();
    memoInitialData() {
        this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
    }
    memoInitalData() {
        this.initalData = Object.assign(Object.assign({}, this.properties), this.data);
    }
    resetData(cb) {
        this.setData(Object.assign({}, this.initalData), cb);
    }
    detached() {
        this.clearMessageAnimation();
    }
    checkAnimation() {
        const { marquee } = this.properties;
        if (!marquee || marquee.loop === 0) {
            return;
    setMessage(msg, theme = MessageType.info) {
        let id = `${name}_${this.index}`;
        if (msg.single) {
            id = name;
        }
        const speeding = marquee.speed;
        if (this.data.loop > 0) {
            this.data.loop -= 1;
        this.gap = unitConvert(msg.gap || this.gap);
        const msgObj = Object.assign(Object.assign({}, msg), { theme,
            id, gap: this.gap });
        const instanceIndex = this.instances.findIndex((x) => x.id === id);
        if (instanceIndex < 0) {
            this.addMessage(msgObj);
        }
        else if (this.data.loop === 0) {
            this.setData({ animation: this.resetAnimation.translateX(0).step().export() });
            return;
        }
        if (this.nextAnimationContext) {
            this.clearMessageAnimation();
        }
        const warpID = `#${name}__text-wrap`;
        const nodeID = `#${name}__text`;
        Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
            this.setData({
                animation: this.resetAnimation.translateX(wrapRect.width).step().export(),
            }, () => {
                const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
                const nextAnimation = wx
                    .createAnimation({
                    duration: durationTime,
                })
                    .translateX(-nodeRect.width)
                    .step()
                    .export();
                setTimeout(() => {
                    this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime);
                    this.setData({ animation: nextAnimation });
                }, 20);
        else {
            const instance = this.instances[instanceIndex];
            const offsetHeight = this.getOffsetHeight(instanceIndex);
            instance.resetData(() => {
                instance.setData(msgObj, instance.show.bind(instance, offsetHeight));
                instance.onHide = () => {
                    this.close(id);
                };
            });
        });
    }
    clearMessageAnimation() {
        clearTimeout(this.nextAnimationContext);
        this.nextAnimationContext = 0;
    }
    show() {
        const { duration, marquee, offset } = this.properties;
        this.setData({ visible: true, loop: marquee.loop || this.data.loop });
        this.reset();
        this.checkAnimation();
        if (duration && duration > 0) {
            this.closeTimeoutContext = setTimeout(() => {
                this.hide();
                this.triggerEvent('duration-end', { self: this });
            }, duration);
        }
        const wrapID = `#${name}`;
        getRect(this, wrapID).then((wrapRect) => {
            this.setData({ wrapTop: -wrapRect.height }, () => {
                this.setData({
                    showAnimation: wx
                        .createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
                        .translateY(wrapRect.height + unitConvert(offset[0]))
                        .step()
                        .export(),
                });
            });
        });
    }
    hide() {
        this.reset();
    addMessage(msgObj) {
        const list = [...this.data.messageList, { id: msgObj.id }];
        this.setData({
            showAnimation: wx
                .createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
                .translateY(this.data.wrapTop)
                .step()
                .export(),
            messageList: list,
        }, () => {
            const offsetHeight = this.getOffsetHeight();
            const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
            if (this.instances) {
                this.instances.push(instance);
                this.index += 1;
            }
        });
        setTimeout(() => {
            this.setData({ visible: false, animation: [] });
        }, SHOW_DURATION);
    }
    reset() {
        if (this.nextAnimationContext) {
            this.clearMessageAnimation();
    getOffsetHeight(index = -1) {
        let offsetHeight = 0;
        let len = index;
        if (len === -1 || len > this.instances.length) {
            len = this.instances.length;
        }
        clearTimeout(this.closeTimeoutContext);
        this.closeTimeoutContext = 0;
        for (let i = 0; i < len; i += 1) {
            const instance = this.instances[i];
            offsetHeight += instance.data.height + instance.data.gap;
        }
        return offsetHeight;
    }
    showMessageItem(options, id, offsetHeight) {
        const instance = this.selectComponent(`#${id}`);
        if (instance) {
            instance.resetData(() => {
                instance.setData(options, instance.show.bind(instance, offsetHeight));
                instance.onHide = () => {
                    this.close(id);
                };
            });
            return instance;
        }
        console.error('未找到组件,请确认 selector && context 是否正确');
    }
    close(id) {
        setTimeout(() => {
            this.removeMsg(id);
        }, SHOW_DURATION);
        this.removeInstance(id);
    }
    hide(id) {
        if (!id) {
            this.hideAll();
        }
        const instance = this.instances.find((x) => x.id === id);
        if (instance) {
            instance.hide();
        }
    }
    hideAll() {
        for (let i = 0; i < this.instances.length;) {
            const instance = this.instances[i];
            instance.hide();
        }
    }
    removeInstance(id) {
        const index = this.instances.findIndex((x) => x.id === id);
        if (index < 0)
            return;
        const instance = this.instances[index];
        const removedHeight = instance.data.height;
        this.instances.splice(index, 1);
        for (let i = index; i < this.instances.length; i += 1) {
            const instance = this.instances[i];
            instance.setData({
                wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap,
            });
        }
    }
    removeMsg(id) {
        const msgIndex = this.data.messageList.findIndex((x) => x.id === id);
        if (msgIndex > -1) {
            this.data.messageList.splice(msgIndex, 1);
            this.setData({
                messageList: this.data.messageList,
            });
        }
    }
    handleClose() {
        this.hide();
        this.triggerEvent('close-btn-click');
    }
    handleLinkClick() {
        this.triggerEvent('link-click');
    }
    handleDurationEnd() {
        this.triggerEvent('duration-end');
    }
};
Message = __decorate([
    wxComponent()