Update: 调整tab组件

common/modules/web-modules/chrome-tabs.js

@@ -68,8 +68,18 @@
       instanceId += 1
 
       this.setupCustomProperties()
-      // this.setupStyleEl()
+      $(this.el).on('click', '.chrome-tab', (event) => {
-      this.setupEvents()
+        this.setCurrentTab(event.currentTarget)
+      })
+
+      $(this.el).on('click', '.chrome-tab-close', (event) => {
+        event.stopPropagation()
+        const $tab = $(event.currentTarget).closest('.chrome-tab')
+        if (!this.checkDestroy({ detail: { tabEl: $tab[0] } })) {
+          return
+        }
+        this.removeTab($tab[0])
+      })
     }
 
     emit(eventName, data) {
@@ -85,18 +95,6 @@
       this.el.appendChild(this.styleEl)
     }
 
-    setupEvents() {
-      /*this.el.addEventListener('dblclick', event => {
-        if ([this.el, this.tabContentEl].includes(event.target)) this.addTab()
-      })*/
-
-      this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl))
-    }
-
-    get tabEls() {
-      return Array.prototype.slice.call(this.el.querySelectorAll('.chrome-tab'))
-    }
-
     get tabContentEl() {
       return this.el.querySelector('.x-scrollbar__content') ?? this.el.querySelector('.chrome-tabs-content')
     }
@@ -117,30 +115,12 @@
 
       tabProperties = Object.assign({}, defaultTapProperties, tabProperties)
       this.tabContentEl.appendChild(tabEl)
-      this.setTabClickEventListener(tabEl)
-      this.setTabCloseEventListener(tabEl)
       this.updateTab(tabEl, tabProperties)
       this.emit('created', { tabEl })
       if (!background) this.setCurrentTab(tabEl)
       return tabEl;
     }
 
-    setTabClickEventListener(tabEl) {
-      tabEl.addEventListener('click', event => {
-        this.setCurrentTab(tabEl)
-      });
-    }
-
-    setTabCloseEventListener(tabEl) {
-      tabEl.querySelector('.chrome-tab-close').addEventListener('click', event => {
-        event.stopPropagation()
-        if (!this.checkDestroy({ detail: { tabEl } })) {
-          return
-        }
-        this.removeTab(tabEl)
-      })
-    }
-
     get activeTabEl() {
       return this.el.querySelector('.chrome-tab[active]')
     }