DOM 脚本 | Quasar 框架

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 中的通信链。

例如，假设您想编写一个检测 Quasar 应用程序是否在页面上运行的 BEX，唯一的方法是在网页的上下文中运行一些 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)
  }
}

import { bexDom } from 'quasar/wrappers'
import detectQuasar from './dom/detect-quasar'

export default bexDom((bridge) => {
  detectQuasar(bridge)
})

上面的桥接器将通知 BEX 中的所有监听器 Quasar 已找到，并发送实例信息。

发现错误了吗？在浏览器中编辑此页面