Polymer paper-tabs切换前事件咨询：是否有类似beforeunload的触发事件

当然可以实现类似window.beforeunload的效果！虽然paper-tabs组件本身没有直接提供"即将切换标签"的专属事件，但它基于iron-selector组件，我们可以利用iron-select事件来达到目的——这个事件会在标签即将被选中时触发，正好适合我们拦截并做未保存更改的提醒。

下面是具体的实现思路和代码示例：

核心思路 #

1. 监听paper-tabs的iron-select事件，这个事件在目标tab即将被激活前触发。
2. 在事件处理函数中检查是否存在未保存的更改。
3. 如果有未保存内容，调用event.preventDefault()阻止默认的标签切换行为，然后弹出确认对话框。
4. 用户确认离开后，手动触发标签切换；如果用户取消，则保持当前标签不变。

代码示例（Polymer 2.x/3.x通用思路） #

HTML部分 #

<paper-tabs id="myTabs" on-iron-select="handleTabBeforeSelect">
  <paper-tab index="0">首页</paper-tab>
  <paper-tab index="1">编辑页</paper-tab>
  <paper-tab index="2">设置页</paper-tab>
</paper-tabs>

JavaScript部分 #

// 假设你有一个变量跟踪未保存状态
_hasUnsavedChanges: {
  type: Boolean,
  value: false
},

handleTabBeforeSelect(event) {
  // 先判断是否有未保存更改
  if (this._hasUnsavedChanges) {
    // 阻止默认的标签切换
    event.preventDefault();
    
    // 弹出确认提醒
    const shouldLeave = confirm("你有未保存的修改，确定要切换标签吗？");
    if (shouldLeave) {
      // 用户确认后，手动设置选中的标签
      this.$.myTabs.selected = event.detail.item.getAttribute('index');
      // 可选：重置未保存状态
      this._hasUnsavedChanges = false;
    }
    // 用户取消的话，什么都不用做，保持当前标签
  }
}

注意事项 #

• event.detail.item是即将被选中的tab元素，你可以通过它获取索引、ID等信息，方便后续手动切换。
• 如果是Polymer 3.x，语法上会使用ES模块导入，事件监听的写法可能变成@iron-select="${this.handleTabBeforeSelect}"，但核心逻辑完全一致。
• 不要用selected-changed事件来做这件事——这个事件是在标签已经切换完成后才触发的，没办法拦截切换动作。

这样就能完美实现你想要的类似beforeunload的提醒功能啦！

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