Quasar CLI with Vite - @quasar/app-vite
DOM脚本
src-bex/dom.js
是一个由Quasar自动注入底层网页的文件,但和其他钩子文件一样,它可以通过桥梁访问:
import { bexDom } from 'quasar/wrappers'
export default bexDom((bridge) => {
//
})
如果你发现自己需要在你的底层网页中注入一个JS文件,你可以使用dom脚本来代替,因为这意味着你可以在BEX中保持这种通信链。
例如,假设你想写一个BEX来检测Quasar应用程序是否在页面上运行,唯一的方法就是在网页的上下文中运行一些javascript。
// We create a new folder + file:
// src-bex/dom/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
let isVue3 = false
setTimeout(() => {
const all = document.querySelectorAll('*')
let el
for (let i = 0; i < all.length; i++) {
if (all[i].__vue__ || all[i].__vue_app__) {
el = all[i]
isVue3 = all[i].__vue_app__ !== void 0
break
}
}
if (el) {
const Vue = isVue3 ? el.__vue_app__ : Object.getPrototypeOf(el.__vue__).constructor
const quasar = isVue3 ? Vue.config.globalProperties.$q : Vue.prototype.$q
if (quasar) {
initQuasar(bridge, quasar)
}
}
}, 100)
}
}
// src-bex/dom.js:
import { bexDom } from 'quasar/wrappers'
import detectQuasar from './dom/detect-quasar'
export default bexDom((bridge) => {
detectQuasar(bridge)
})
上面的桥段将通知BEX中的所有监听器,Quasar已经被找到,并同时发送实例信息。