标签: quasar-framework

我们有几个使用 Quasar 构建的 SPA。一切都很好，但现在我们看到某些组件可以提取到共享组件中。

计划是提取相关代码并发布到我们的私有 npm 存储库。如何构建并发布使用 Quasar 中的组件构建的组件？

使用 vuetify 之类的东西，我可以只导入所需的组件并开始构建我的组件，但在 Quasar 的情况下，导入是根据配置的主题来解决的。

我正在尝试动态加载可能存在也可能不存在的图像。

在这种情况下，加密货币图标使用其 3 个字母符号。我的静态库中有几百个 .svg 格式，当我从价格服务器中提取数据时，我尝试将我拥有的图标与来自服务器的符号进行匹配，并在没有时提供后备图像资产。

在我的 index.vue 中，我可以摆脱这段代码，一切正常：

<img :src="'statics/icons/svg/' + coin.symbol + '.svg'" v-img-fallback="'statics/icons/svg/fallback.svg'"/>

但是，在用户单击硬币时打开的子组件中，相同的代码将无法加载主图像和后备图像。我已经尝试了很多方法，但从我的子组件加载图像的唯一方法是像这样硬编码：

<img src="statics/icons/svg/btc.svg"/>

这对我来说是不可能的，因为我需要为任何可能的硬币动态生成模态......

或者像这样使用 require()：

<img :src="imageSrc" v-img-fallback="require('../statics/icons/svg/fallback.svg')"/>

// Computed:
imageSrc () {
  if (this.coinData.symbol) {
     return require('../statics/icons/svg/' + this.coinData.symbol + '.svg')
  }
}

但是，如果require()查找不存在的资产，这会使我的应用程序崩溃。我需要一种优雅地失败的方法，以便v-img-fallback可以检测到它并提供回退。

我试过做类似的事情，return require(image1) || require(fallback)但它不起作用。

我正在尝试 Quasar 框架，演示或当前运行的网站（在： https: //github.com/quasarframework/quasar-awesome）中没有任何内容显示如何在框架，我认为这是大多数 Web 框架中的标准。请帮忙。

我在Vue.js项目中使用Quasar UI元素.对于某些弹出元素,特别是在这种情况下的q-select,单击q-select外部会使其关闭.这很好 - 这就是我想要的行为,但是click事件也传播到q-select之外的HTML元素,这可能导致意外/不需要的行为.我希望在q-select弹出窗口外单击只会关闭弹出窗口,而不会传播到任何其他DOM元素.Quasar/q-select是否支持此行为,或者我是否需要自己实现此功能？

我使用 Quasar 框架开发了一个 PWA。我没有更改 service-worker 或清单文件中的任何内容，只是使用默认值。我在面向云前端发行版的 AWS S3 上托管了构建。当我在 S3 上推送更新的版本并使云前端分发缓存无效时。通过浏览器打开网站的用户会获得更新的版本。但安装了 PWA 的用户永远不会获得更新，除非他们在浏览器中再次打开网站。我计划每隔一天更新一次更改。每当我推送更改时，安装的 PWA 都会立即更新的最佳方式是什么？

我正在尝试从 Vue/Quasar 项目中的 package.json 获取“版本”。

网上有一个信息可以使用这个代码：

import { version } from '../package.json'

现在我是一个初学者，我无法运行这个。我当前的代码看起来有点像这样：

<template>
  // ... REMOVED CODE FOR BETTER READABILITY

  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <div>VERSION: {{ version }}</div>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import { version } from '../package.json'
export default {
  name: 'Layout',

  data () {
    return {
      leftDrawerOpen: false
    }
  },
  components: {
    version
  }
}
</script>

ESLint 抛出以下错误：

87:5 错误 “版本”组件已注册但未使用 vue/no-unused-components

如何正确使用我导入的组件变量？

我有一个带有几个对话框的响应式网络应用程序，每当用户通过移动设备访问它时，我想让它们占据整个屏幕（也称为全屏）。

我找到了full-width和full-height道具，但我想不出将它们应用于移动设备的干净方法。有想法吗？

我有一个组件，我将在我的网络应用程序的每个页面中使用它。为了简化我的工作，我如何全局注册这个组件？我用过 nuxt 一次， npm 很容易@nuxtjs/global-components。Quasar 的流程是什么？谢谢！

我正在编写一个 PWA 应用程序。我想要的是标题栏上的back和按钮。refresh但我什么也没得到。

更新：按钮应该由浏览器控制，而不是我的用户界面。

我有一个加载了大量数据的 q 树（> 1000 个节点，嵌套 5 层或更多层）。它加载得很好，但是当我执行 时expandAll()，一切都变得非常非常慢。

尝试了以下方法，它得到了一些改进，但仍然很慢：

• 深度冷冻物体
• 使用q-virtual-scroll（不确定这是否正确完成，因为它只支持itemsand tables）
• duration将prop设置为1
• no-connectors使用道具移除连接器
• 禁用QSlideTransition（我QTree.js内部修改） - 帮助很大

所以在调试过程中，我注意到以下几点：

• 当尝试展开/折叠节点时，会识别单击，但 Quasar Q-Tree 会重新渲染整个树（每次单击节点时都会迭代整个树 - 由于节点数据庞大，这需要一段时间 __getChildren()）__getNode()
  • 因此，为了实现我想要的（跳过/不要重复地重新迭代 和__getChildren()）__getNode()- 我尝试将之前渲染的组件保存在__getNode()下面的代码中。但是这样一来，单击的节点就不再扩展了——知道如何才能实现我想要的吗？如果可能的话？

__getNode (h, node) {
   // Check if we have a pre-saved rendered output, return it if so
   if (this.outputArray?.[node?.nodeId]) {
      return this.outputArray[node.nodeId]
   }

   // ... a chunk of code goes …