标签: quasar-framework

我正在使用 Quasar v2，使用 Vue Composition API 和 vue-i18n，我希望网站标题在活动语言更改时更改显示（通过下拉菜单），但无论我尝试什么都不会导致标题语言被改变。有任何想法吗？

以下是我现在所拥有的（只是必需品）：

import { defineComponent, ref, computed } from 'vue';
import { useMeta } from 'quasar';

export default defineComponent({
  setup () {
    const { t: translate } = useI18n() as any;

    const siteTitle = computed(() => translate('title.app') as string);

    const pageMetadata = {
      title: 'untitled',
      titleTemplate: (title: string) => `${title} - ${siteTitle.value}`
    };
    useMeta(pageMetadata);
  }
});

我用来切换语言的代码：

async onChangeLanguage () {
  try {
    let locale = this.language;
    if (this.language === 'en') {
      locale …

尝试了此链接并使用 Pinia 在 Quasar 创建了我的第一个商店，我还需要手动更改.quasar/app.js以添加 Pinia 商店并使 Pinia 正常运行。

import { Quasar } from 'quasar'
import { markRaw } from 'vue'
import RootComponent from 'app/src/App.vue'

import createStore from 'app/src/stores/index'
import createRouter from 'app/src/router/index'

export default async function (createAppFn, quasarUserOptions) {
  // Create the app instance.
  // Here we inject into it the Quasar UI, the router & possibly the store.
  const app = createAppFn(RootComponent)
  app.config.devtools = true
  

  app.use(Quasar, quasarUserOptions)

    const store = typeof createStore === 'function' …

我正在处理我的 PWA 应用程序。所以我有一个问题，我找不到任何如何解决的信息。

我将工作箱与 webpack InjectManifest 一起使用（但也尝试过 webpack offline-plugin ）。

当我从根访问我的网页并离线时，我可以看到它运行良好。但是当我将路由更改为“/授权”或基本上任何其他路由并离线时，它不起作用。

是否有任何要求它仅在我们位于根路径上的情况下才有效？除了这个，我找不到任何关于它的东西：https : //github.com/quasarframework/quasar-cli/issues/131

我有一个使用quasar-cli.

如何将单元测试集成到像这样Jest的应用程序的测试运行器中？

我已经在我的Jest配置中添加了一个

"moduleNameMapper": {
    "quasar": "<rootDir>/node_modules/quasar-framework"
}

不幸的是，Jest报告回来

Cannot find module 'quasar' from 'index.vue'

这是Vue文件的片段

<template>
<div style="padding-top: 20px" v-if="refund.type != null ">
      <q-btn :label="'Issue ' + (  currency(refund.amount)) + ' Refund'" :disable="refund.amount <= 0" @click="issueRefund()" color="green" class="full-width" :loading="noteLoading" />
    </div>
</template>

<script>
import { Notify } from "quasar"; // here is where I am using Quasar
issueRefund() {
  this.noteLoading = true;
  this.$axios
    .post(`${BASE_URL}/issue_refund/?secret=${this.secret}`, {
      refund: this.refund,
      agent_email: this.userEmail,
      order_id: this.selectedOrder.id, …

我有一个文本输入字段，例如：

        <q-input
          @blur="checkTextAnswer"
          @keyup.enter="submit"
          @keydown="checkEnterKey"
          v-model.trim="textInput"

当用户点击输入时，我想把它当作提交，即处理输入而不是在文本中添加额外的换行符。

这有点像preventDefaultJQuery 时代。我确实找到了这个：https : //quasar-framework.org/components/other-utils.html 但似乎更一般的 DOM 事件

我也尝试过只修改字符串（str.replace 换行符），但即使是这种 hack 也有一个丑陋的延迟。

我尝试探索 Quasar Framework。我已经下载了node.js 和quasar.cli。我设法创建项目，但是当我在类星体文件中“quasar dev”时，它会弹出错误。

C:\\Users\\User>cd njir

C:\\Users\\User\\njir>quasar dev

开发模式............ spa\n Pkg quasar........ v1.2.2\n Pkg @quasar/app... v1.2.1\n 调试...... ...启用

app:quasar-conf 读取 quasar.conf.js +0ms\n app:dev 正在检查监听地址可用性 (0.0.0.0:8080)... +25ms

app:dev \xe2\x9a\xa0\xef\xb8\x8f 发生未知网络错误 +0ms\n{ [ 错误：监听 EACCES：权限被拒绝 0.0.0.0:8080

\n

• next_tick.js:63 process._tickCallback\n内部/process/next_tick.js:63:19

\n

• loader.js:834 Function.Module.runMain\ninternal/modules/cjs/loader.js:834:11

\n

• node.js:283 启动\n内部/bootstrap/node.js:283:19

\n

• node.js:622 bootstrapNodeJSCore\ninternal/bootstrap/node.js:622:3

\n

]\n 代码: \'EACCES\',\n 错误号: \'EACCES\',\n 系统调用: \'listen\',\n 地址: \'0.0.0.0\',\n 端口: 8080 }

C:\\Users\\User\\njir>

我开始使用类星体，我希望以类星体方式以输入为中心（使用类星体可用的类、组件和指令）。我不想用 !important 来强制风格。这是codepen https://codepen.io/luckylooke11/pen/RwwqJex

<div id="q-app">
  <q-layout>
    <q-page-container>
    <q-page class="home-page q-gutter-lg">
    <div class="row justify-center q-pa-md">
      <div class="col-auto">
        <img alt="My image" class="image" src="../assets/images/image.png" />
      </div>
      <div class="col-12 text-center self-center">
        <h2>My gooogle search</h2>
        <q-input outlined square v-model="text" class="input self-center" placeholder="my centered input">
          <template v-slot:append>

            <q-icon v-if="text !== ''" name="close" @click="text = ''" class="cursor-pointer"></q-icon>
            <q-icon v-else name="search"></q-icon>
          </template>
        </q-input>
      </div>
    </div>
  </q-page>
    </q-page-container>
    </q-layout>
</div>

谢谢你的任何提示。

我正在尝试在 Quasar Framework 中创建一个圆形头像

为此，我使用 q-btn 和 q-vatar，但 Gravatar 的图像是方形的，这导致我在方形图像周围显示白色背景

<template v-slot:body="props">
  <q-tr
    @click="setUser(props.row)"
    :props="props"
    :style="!props.row.active ? 'background: #f48fb1' : ''"
    class="cursor-pointer"
  >
    <q-td key="avatar" :props="props">
      <q-btn round dense>
        <q-avatar :icon="'img:' + props.row.avatar" />
      </q-btn>
    </q-td>
    <q-td key="email" :props="props">{{ props.row.email }}</q-td>
    <q-td key="name" :props="props">{{ props.row.name }}</q-td>
    <q-td key="active" :props="props">{{ $t(String(!!props.row.active)) }}</q-td>
  </q-tr>
</template>

我有一个用 Options Api 编写的简单组件脚本：

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
  computed: {
    isMobile() {
      return this.$q.screen.xs || this.$q.screen.sm;
    }
  }
};
</script>

如何在 Typescript 中将其重写为 Composition Api？我设法实现了类似的目标，但我不知道如何访问 this.$q 变量。

<script lang="ts">
import { computed, defineComponent, ref, ComputedRef } from 'vue';

export default defineComponent({
  name: 'QuasarTest',
  setup() {
    const isMobile: ComputedRef<boolean> = computed((): boolean => {
      return this.$q.screen.xs || this.$q.screen.sm;;
    });
    return {
      isMobile,
      model: ref(null),
    };
  }
});
</script>

我有一个具有这些数字的特定用户的角色。

1. 它将显示“超级管理员”一词，而不是数字 1
2. 它将显示“Admin”一词，而不是数字 2
3. 它将显示“用户”一词，而不是数字 2，依此类推。

我在用q-table

     <q-table
              flat
              bordered
              title="USERS"
              :data="allUsers"
              :columns="columns"
              :filter="filter"
              :pagination.sync="initialPagination"
              row-key="id"
            >
              <template v-slot:top-right>
                <q-input
                  outlined
                  dense
                  debounce="300"
                  placeholder="Search"
                  v-model="filter"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
    
                <div class="q-pa-sm q-gutter-sm"></div>
                <q-btn
                  outline
                  color="white"
                  text-color="black"
                  @click="openCreateUserModal"
                  label="Create Users"
                />
              </template>
    
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td
                    v-for="col in props.cols.filter(col => col.name !== 'actions')"
                    :key="col.name"
                  >
                    {{ col.value }}
                  </q-td>
    
                  <td key="actions">
                    <q-btn dense flat color="primary" field="edit" icon="edit" />
                    <q-btn
                      dense
                      flat
                      color="negative"
                      field="delete"
                      icon="delete" …