javascript - 如何使用 span 元素（图标）进行模糊处理？

Question

我希望在单击按钮时模糊活动元素。这有时有效，但并非始终如一。注意到我们在 :focus/:hover 使用 CSS 时应用了填充图标。这有助于将图标更改为填充图标，但是当我在按钮单击时应用模糊时，无法恢复灰色图标。我确实看到活动元素已移动，但仍使用“填充”图标样式。这可能是由于跨度，我了解到跨度有焦点/模糊问题。有没有办法不继续使用“填充”图标并在模糊时切换到常规图标？

添加 -

// Change to blur() the active focus so that icon shifts to regular and feels like unselected.
            const currentTarget = e.currentTarget as HTMLElement;
            (currentTarget.closest('.ms-Button') as HTMLElement)?.blur();

反应：

export const FilePickerButton: React.FunctionComponent<FilePickerButtonFCProps> = ({
    position,
    ariaLabel,
    ariaDescription,
    disabled,
    iconName,
    toolbarButtonId,
    acceptParams,
    onClickEvent,
    ...props
}) => {
    const uploadRef = React.useRef<HTMLInputElement>(null);
    const fileUploadRefLink: (e: FluentButtonEventType) => void = React.useCallback(
        (e) => {
            uploadRef.current?.click();

            // Change to blur() the active focus so that icon shifts to regular and feels like unselected.
            const currentTarget = e.currentTarget as HTMLElement;
            (currentTarget.closest('.ms-Button') as HTMLElement)?.blur();
        },
        [uploadRef]
    );

    const onClick = React.useCallback((e) => {
        // uploading same file again works with clearing up cache
        e.target.value = '';
    }, []);

    return (
        <>
            <input
                type="file"
                ref={uploadRef}
                id={`${toolbarButtonId}`}
                accept={acceptParams}
                onChange={onClickEvent}
                onClick={onClick}
                className="fileUploadPicker"
            />
            <ToolbarButton
                ariaLabel={ariaLabel}
                ariaDescription={ariaDescription}
                disabled={disabled}
                iconName={iconName}
                id={toolbarButtonId}
                position={position}
                onClick={fileUploadRefLink}
                {...props}
            />
        </>
    );
};

CSS

.toolbarV2ButtonTooltipHost {
    max-width: var(--iconButtonSize);
    max-height: var(--iconButtonSize);
}

.toolbarV2ButtonLeft {
    transform: rotate(90deg);
}

.toolbarV2Button .toolbarV2Icon {
    align-items: center;
    background-color: var(--buttonDefaultBackground);
    border-radius: var(--borderRadiusSmall);
    display: flex;
    height: calc(var(--iconButtonSize) - var(--paddingThin));
    justify-content: center;
    position: relative;
    transition: var(--backgroundTransition);
    width: calc(var(--iconButtonSize) - var(--paddingThin));
}

/* Position both filled and unfilled icons in the center of the button */
.toolbarV2Icon > .icon {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/* Hide the filled version of the icon by default */
.toolbarV2Icon > .icon.filled {
    opacity: 0;
}

/* On hovering over the parent button, hide the unfilled icon */
.toolbarV2Button:focus .toolbarV2Icon > .icon:not(.filled),
.toolbarV2Button:hover .toolbarV2Icon > .icon:not(.filled),
.selectedToolbarButton .toolbarV2Icon > .icon:not(.filled) {
    opacity: 0;
}

/* On hovering over the parent button, show the filled icon */
.toolbarV2Button:focus .toolbarV2Icon > .icon.filled,
.toolbarV2Button:hover .toolbarV2Icon > .icon.filled,
.selectedToolbarButton .toolbarV2Icon > .icon.filled {
    opacity: 1;
}

/* The ToolbarIcon's background changes depending on the state of the parent button */
.toolbarV2Button.ms-Button:hover .toolbarV2Icon,
.toolbarV2Button.ms-Button:focus .toolbarV2Icon,
.toolbarV2Button.ms-Button.selectedToolbarButton .toolbarV2Icon,
.selectOptionButton.ms-Button:hover .background {
    background-color: var(--buttonDefaultBackgroundHover);
}

.toolbarV2Button.ms-Button:active .toolbarV2Icon,
.toolbarV2Button.ms-Button.selectedToolbarButton:active .toolbarV2Icon,
.selectOptionButton.ms-Button:active .background {
    background-color: var(--buttonDefaultBackgroundPress);
}

标签： javascriptcssreactjsfluent