Vaadin23中合法阻止标签页切换的可行方法咨询

针对Vaadin 23中默认SelectedChangeEvent仅在标签切换后触发的问题，以下是几种可行的拦截方案：

1. 路由级标签页：通过BeforeLeaveObserver拦截 #

如果你的标签页是基于路由绑定（比如配合RouterLink使用），可以实现BeforeLeaveObserver接口，在路由跳转前拦截并判断是否允许切换：

public class TabContent extends VerticalLayout implements BeforeLeaveObserver {
    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        // 自定义检查逻辑，比如判断表单是否未保存
        boolean hasUnsavedChanges = checkFormDirty();
        if (hasUnsavedChanges) {
            // 阻止路由切换
            event.prevent();
            Notification.show("请先保存当前内容再切换标签");
        }
    }

    private boolean checkFormDirty() {
        // 实现表单未保存状态的检查逻辑
        return true;
    }
}

2. 自定义Tabs组件：客户端层面拦截点击 #

通过扩展Vaadin的Tabs组件，在客户端JavaScript中拦截标签点击事件，实现切换前的检查：

Java端自定义组件 #

@Tag("custom-tabs")
@JsModule("./custom-tabs.js")
public class CustomTabs extends Tabs {
    // 提供方法控制是否允许切换
    public void setPreventSwitch(boolean prevent) {
        getElement().setProperty("preventSwitch", prevent);
    }

    // 客户端触发的回调，用于显示提示
    @ClientCallable
    public void onSwitchBlocked() {
        Notification.show("无法切换标签，请完成当前操作后重试");
    }
}

前端JavaScript文件（frontend/custom-tabs.js） #

import '@vaadin/tabs/src/vaadin-tabs.js';

class CustomTabs extends customElements.get('vaadin-tabs') {
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('click', this.handleTabClick.bind(this));
    }

    handleTabClick(e) {
        const targetTab = e.target.closest('vaadin-tab');
        if (!targetTab) return;

        // 根据Java端传递的参数判断是否阻止切换
        if (this.preventSwitch) {
            e.preventDefault();
            e.stopPropagation();
            // 通知Java端触发提示
            this.$server.onSwitchBlocked();
        }
    }
}

customElements.define('custom-tabs', CustomTabs);

3. 自定义SelectionModel：重写选择逻辑 #

通过自定义Tabs的SelectionModel，在选择标签前加入检查逻辑：

public class BlockableSelectionModel extends SingleSelectionModelImpl<Tab> {
    private boolean allowSwitch = true;

    @Override
    public void select(Tab item) {
        if (!allowSwitch) {
            Notification.show("当前标签不允许切换");
            return;
        }
        // 允许切换时执行默认逻辑
        super.select(item);
    }

    public void setAllowSwitch(boolean allowSwitch) {
        this.allowSwitch = allowSwitch;
    }
}

使用时替换默认模型：

Tabs tabs = new Tabs();
BlockableSelectionModel selectionModel = new BlockableSelectionModel();
tabs.setSelectionModel(selectionModel);

// 需要阻止切换时调用
selectionModel.setAllowSwitch(false);

内容的提问来源于stack exchange，提问作者gidravlic