DOM钩子

src-bex/js/dom-hooks.js是一个JavaScript文件,Quasar会自动将其注入到基础网页中,但与所有其他钩子文件一样,它可以通过以下方式访问桥:

export default function attachDomHooks (bridge) {
}

如果您发现自己需要将JS文件注入到基础网页中,则可以使用dom钩子代替,因为这意味着您可以在BEX中维护该通信链。

例如,假设您想编写一个BEX来检测Quasar应用程序是否正在页面上运行,唯一的方法是在网页上下文中运行一些javascript。

// detect-quasar.js:

function initQuasar (bridge, quasarInstance) {
  bridge.send('quasar.detect', {
    version: quasarInstance.version,
    dark: {
      isActive: quasarInstance.dark ? quasarInstance.dark.isActive : void 0
    },
    umd: quasarInstance.umd,
    iconSet: {
      name: quasarInstance.iconSet.name,
      __installed: quasarInstance.iconSet.__installed
    },
    lang: {
      rtl: quasarInstance.lang.rtl
    }
  })
  window.__QUASAR_DEVTOOLS__ = {
    Quasar: quasarInstance
  }
}

export default function detectQuasar (bridge) {
  if (window.Quasar) { // UMD
    initQuasar(bridge, {
      version: window.Quasar.version,
      dark: window.Quasar.Dark,
      ...window.Quasar,
      umd: true
    })
  }
  else { // CLI
    setTimeout(() => {
      const all = document.querySelectorAll('*')
      let el
      for (let i = 0; i < all.length; i++) {
        if (all[i].__vue__) {
          el = all[i]
          break
        }
      }

      if (el) {
        let Vue = Object.getPrototypeOf(el.__vue__).constructor
        while (Vue.super) {
          Vue = Vue.super
        }
        if (Vue.prototype.$q) {
          initQuasar(bridge, Vue.prototype.$q)
        }
      }
    }, 100)
  }
}
// dom-hooks.js:

import detectQuasar from './dom/detect-quasar'
export default function attachDomHooks (bridge) {
  detectQuasar(bridge)
}

上面的桥将通知BEX中的所有侦听器已找到Quasar,并随同发送实例信息。