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,并随同发送实例信息。