标签: quasar-framework

如何在使用 q-select 多项选择时自动关闭弹出窗口。默认行为是弹出窗口仍然打开并等待用户选择另一个项目。

https://quasar.dev/vue-components/select#Example--Multiple-selection%2C-counter-and-max-values

<q-select
  filled
  v-model="model"
  multiple
  :options="options"
  counter
  hint="With counter"
  style="width: 250px"
 ></q-select>

在 Quasar 框架中，当我单击某个按钮时如何切换文件选择器q-file。

到目前为止我的努力：

当单击此按钮时，它应该切换q-file

<button @click="toggleFileSelector">toggle file selector</button>

所以我有这个文件选择器，我希望在单击按钮时切换它

<q-file outlined class="field" ref="myFileSelector" :label="label" v-model="myFile">
  <template v-slot:append>
    <div class="attachment notosanskr-medium">File</div>
  </template>
</q-file>

切换方法：

  methods: {
    toggleFileSelector() {
      this.$refs.myFileSelector.toggle();
    },
  },

但我收到错误：

“类型错误：this.$refs.myFileSelector.toggle 不是函数”

我目前很难尝试为 Quasar v2（使用 Vue 3）配置 Storybook。

这是我的依赖项package.json：

"dependencies": {\n    "@quasar/extras": "^1.0.0",\n    "core-js": "^3.6.5",\n    "quasar": "^2.0.0-beta.1",\n    "vue-i18n": "^9.0.0-beta.0"\n},\n"devDependencies": {\n    "@babel/core": "^7.13.14",\n    "@quasar/app": "^3.0.0-beta.1",\n    "@storybook/addon-actions": "^6.2.1",\n    "@storybook/addon-essentials": "^6.2.1",\n    "@storybook/addon-links": "^6.2.1",\n    "@storybook/vue3": "^6.2.1", # \xe2\x9c\x85 storybook for vue3\n    "@types/node": "^10.17.15",\n    "@typescript-eslint/eslint-plugin": "^4.16.1",\n    "@typescript-eslint/parser": "^4.16.1",\n    "babel-loader": "^8.2.2",\n    "prettier": "^2.2.1",\n    "vue-loader": "^16.2.0" # \xe2\x9c\x85 the specific vue loader needed\n    "babel-eslint": "^10.0.1",\n    "eslint": "^7.14.0",\n    "eslint-config-prettier": "^8.1.0",\n    "eslint-plugin-vue": "^7.0.0"\n}\n

这.storybook/main.js：

module.exports = {\n  // the path may be precised …

我使用 q-select 来显示月份，并且字体非常小，所以我想让选项更大。我尝试更改 css 中的字体大小，但它不起作用。

我选择的自动取款机

          <q-select
            ref="month"
            input-style="zoom: 1.2; text-align: right;"
            rounded outlined
            clearable
            class="text-h4" 
            v-model="oMonth" 
            :options="oMonths"
          /> 

输出看起来像 月份选择

如何在Quasar中实现类似的功能，而不需要重新定义每个组件中的变量：

<template>
    <div>Welcome to {{ APP_NAME }}.</div>
</template>

我的应用程序是使用 Quasar CLI 设置的，它在设置过程中要求输入应用程序名称，因此我想它会作为全局变量或我可以访问的内容存储在某个位置。

如果做不到这一点，也许 Vue 3 有办法做到这一点。

我正在尝试使用 prop 来控制子组件对父组件的可见性。

我的子组件有一个visible道具。为了避免改变visible道具，我将其分配给本地isVisible引用，并使用它来有条件地显示和隐藏表单。

但是，当我尝试使用按钮隐藏表单时，没有@click="isVisible = false"任何反应，并且出现控制台错误，提示Set operation on key "visible" failed: target is readonly.

为什么错误消息引用visibleprop 也令人困惑，因为我使用的是局部isVisible变量。

这是ChildForm.vue（子组件）：

<template>
  <q-form v-if="isVisible">
    <q-input v-model="modelValue" />
    <q-btn label="Hide The Form" @click="isVisible = false" />
  </q-form>
</template>

<script setup lang="ts">
import { ref, toRef } from 'vue';
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
});
const isVisible = toRef(props, 'visible');
const …

我一直在尝试将 Vitest 与实现 Quasar 的项目集成，但我没有成功。我在测试时面临的主要问题是 quasar 组件没有在 HTML 元素中呈现，因此当我尝试在元素上设置文本时，vitest 不会将其识别为 HTML 元素，并且出现下一个错误：

Error: wrapper.setValue() cannot be called on Q-INPUT\n \xe2\x9d\xaf DOMWrapper.setValue node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7417:19\n \xe2\x9d\xaf src/modules/Auth/LoginView.spec.ts:8:60\n      6|   const wrapper = mount(LoginView)\n      7|   test('should render correctly', async() => {\n      8|     const inputEmail = await wrapper.get('[label="Email"]').setValue('andres@correo.com')\n       |           \n

我尝试了一下console.log(wrapper.get('[label="Email"]').html())，得到了以下结果：

<q-input type="text" filled="" label="Email" placeholder="correo@correo.com" lazy-rules="" modelvalue="" rules="(val) => val &amp;&amp; val.length > 0 || &quot;El correo es obligatorio&quot;,(val) => {\n  const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\\.){1,8}[a-zA-Z]{2,63}$/;\n  return emailPattern.test(val) || &quot;No es …

嗨，我坚持使用类星体对话框处理事件。首先，我有一个对话框组件（对于 cookie，用户可以单击两个按钮 - 一个用于接受 cookie，一个用于显示更多）。\n当用户单击“显示更多”时，它应该打开下一个对话框，其中包含一些基本文本和几个按钮（即对于这个问题并不重要）。

所以第一个对话框是父对话框，第二个对话框是子对话框。我尝试在父级中创建引用（isOpen = true）并将其发送给子级。问题是道具是只读的，当我单击对话框外部的屏幕时，我收到了有关它的警告。这是因为有隐藏对话框的本机操作（我需要此操作保持工作状态）所以我可以\xc2\xb4t这样做：/

我真的在这件事上停留了很长时间，所以感谢您的帮助：/

家长

<template>\n  <q-dialog :model-value='props.showCookies' position='bottom' persistent>\n    <q-card style='max-width: 1920px; width:100%; background-color: rgba(77,80,83,0.9490196078431372 )'>\n      <q-card-section>\n        <div>\n           ....\n          <div class='flex' style='justify-content: right'>\n            <!-- This is the button to open dialog-->\n            <q-btn rounded color='grey-5' label='Zjistit v\xc3\xadce' class='cookie-button q-mr-sm' @click='showMore' />\n            <q-btn rounded color='grey-5' label='Povolit v\xc5\xa1e' class='cookie-button' @click='acceptCookies' />\n          </div>\n        </div>\n      </q-card-section>\n    </q-card>\n  </q-dialog>\n  <CookiesDialogWhichWeUse :isOpen='isOpenCookieSettingsWhichWeUse' />\n</template>\n\n<script lang='ts'>\nimport { SetupContext, ref } from 'vue';\nimport CookiesDialogWhichWeUse from '@/components/Cookies/CookiesDialogWhichWeUse.vue';\n\nexport default {\n  name: 'CookiesModal',\n …

在我的 Quasary CLI 项目中，我包含了我自己的 js 文件，如下所示：

import Task from "src/js/task.js"

当我更改此文件 (task.js) 中的某些内容并保存它时，我的更改在热重载中不可见或不起作用。但是我在控制台中看到了这一点：[vite] 热更新：/src/components/kk-phase-tasks.vue

所以热重载似乎可以识别更改和更新。

即使重新加载页面后，我的更改也不会内置。

只有在关闭开发服务器并再次启动它（类星体开发）后，我的更改才会得到反映。

我是否必须定义 vite 应更新的文件夹或文件？我缺少什么？

我正在使用 Quasar/Vue 构建一个应用程序。我将“组织”对象传递给组件

<q-tab-panel name="roles">\n   <OrganisationRolesTab :organisation="organisation"></OrganisationRolesTab>\n</q-tab-panel>\n

在 OrganizationRolesTab.vue 内部，我通过 DefineProps 通用符号定义了 prop“组织”：

<template>\n  {{ organisation }}\n</template>\n\n<script setup lang="ts">\nimport { IOrganisation } from \'src/interfaces/IOrganisation\'\n\ndefineProps<{ organisation: IOrganisation | false }>()\n</script>\n

I 组织是：

export interface IOrganisation {\n  id?: string\n  title: string\n  shortTitle: string\n  createdAt?: Date\n  updatedAt?: Date\n}\n

这在控制台中向我发出警告：

runtime-core.esm-bundler.js?f781:38 [Vue warn]: Invalid prop: type check failed for prop "organisation". Expected Null | Boolean, got Object  \n  at <OrganisationRolesTab organisation= {id: \'94de89d3-38f2-4410-bf86-74db781b18aa\', createdAt: \'2022-06-13T15:11:45.185Z\', updatedAt: \'2022-07-03T14:24:26.103Z\', …