标签: quasar-framework

我正在使用 Quasar 框架。并想在框架组件的预设上添加第三个参数。

这是针对Q-popup-edit的save/cancel事件：

句法：

@save->function(value, initialValue)

描述

当值已成功验证且应保存时发出

参数：

value- 要保存的验证值

initialValue- 更改前的初始值

有没有办法让我不必指定“新”和“旧”值而只需传递第三个参数？ @save="saved(.., .., arg3)"或类似的东西@cancel="canceled(arg3)"。如果这是不可能的，那么我如何传递初始值和新值？

<q-popup-edit buttons lazy-rule v-model="props.row.value" @save=(newValue, initialValue, arg3)? 

...
methods: {
  saved (val, initialValue, arg3) {
    console.log(`original value = ${initialValue}, new value = ${val}`)
    console.log('argument3 = ' + arg3)
  },
  canceled (val, initialValue, arg3) {
    console.log(`retain original value = ${initialValue}, canceled value = ${val}`)  
    console.log('argument3 = ' + arg3)
  } …

我使用 Quasar 和 Firebase

我收到 FirebaseError：权限缺失或不足。控制台上出现错误

错误

脚本：

    // 从 firebase 获取
const 路径 = "/newpage";
    this.$auth.onAuthStateChanged(authUser => {
如果（authUser）{
 
this.$bind('userz', this.$db.collection('users'));
 this.$db.collection('users').doc(authUser.uid).get()
              .then(快照=> {
                const userData = snapshot.data();
                控制台.log(用户数据);

 (this.$route.path !== 路径);
  this.$router.push(path).catch(err => {});

 this.livePaper = false;


   }）} 别的 {
    
 this.livePaper = true;
console.log('用户已退出');
this.$router.push('/Login').catch(err => {});

}   
    })

  },

每当我把

```this.$bind('userz', this.$db.collection('users'));```

发生缺少权限的情况

但是当我删除绑定时它没有错误

虽然我想获取用户名：字段中的值并将其放在我的导航上

firebase - 用户名

``` <li v-for="(users, uid) in userz" :key="uid">
      {{users.username}} <q-btn v-on:click="livePaper = true"   label="Sign Out" @click="logOut()" color="green"/>

但我无法得到它，除非我删除

```this.$db.collection('users').doc(authUser.uid).get() …

vue-router 运行良好，但我们想将路由推送到另一个文件中。一些代码来澄清：

// src/router/index.ts
import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

export default route(function ({ Vue }) {
  Vue.use(VueRouter)
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  })

  return Router
})

如果能够像这样在另一个文件中调整路线，那就太好了：

// src/services/auth/authService.ts
import router from 'src/router'

if (router.currentRoute.path === '/login') {
  console.log('authService push to /');
  router.push('/')
}

但这会引发错误：

TS2339：类型“RouteCallback”上不存在属性“currentRoute”。

我们可能没有正确导出/导入路由器。

我的资产文件夹中有一个名为“home.svg”的图标。如何指示我的q-icon组件获取目录内的图标assets/。

我尝试过这样应用：

  <q-icon name="img:/assets/home.svg" class="text-dark" style="font-size: 32px;" />

但图像没有被渲染。

我正在构建一个仅适用于平板电脑的应用程序，我想使用我自己的 ttf 格式的字体。如何将 .ttf 字体加载到 quasar 中？

另一种选择是将其转换为 woff？

我在 app.scss 中尝试过此操作，但它不起作用：

@font-face {
  font-family: 'MyFont';
  src: url('css/fonts/MyFont.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

.my-custom-font {
  font-family: 'Cookies', Fallback sans-serif;
}

我有一个带有深色主题切换的类星体项目。但如果使用深色模式，我想改变整个配色方案。

我对sass一无所知，我想知道可以通过在用户更改主题时更新sass变量来完成。

src/css/quasar.variables.sass这是（浅色主题）中定义的实际 sass 变量：

// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// …

我在我的网站中使用Quasar freamwork和 Perisan 单词。我使用Export-data util从数据表中导出 csv 文件。

这是导出数据的js代码：

function wrapCsvValue(val, formatFn) {
  let formatted = formatFn !== void 0
    ? formatFn(val)
    : val
  formatted = formatted === void 0 || formatted === null
    ? ''
    : String(formatted)
  formatted = formatted.split('"').join('""')
  return `"${formatted}"`
}


exportTable() {
  const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
    this.rows.map(row => this.columns.map(col => wrapCsvValue(
      typeof col.field === 'function'
        ? col.field(row)
        : row[col.field === void 0 ? col.name : col.field],
      col.format
    )).join(','))
  ).join('\r\n')

  const status …

我有一个用 Vue2 编写的应用程序，它还没有真正准备好升级到 Vue3。但是，我想开始在 Vue3 中编写一个组件库，并将组件导入回 Vue2，以便在准备就绪后最终进行升级。

Vue 3.2+ 引入了defineCustomElement它，它工作得很好，但是一旦我在附加到 Vue 实例的 Vue3 环境（例如 Quasar）中使用框架，它就会开始在 Vue2 应用程序中抛出错误，可能是因为尝试defineCustomElement(SomeComponent)使用框架中的某些内容的结果应该附加到应用程序中。

我考虑过扩展 HTMLElement 并安装应用程序connectedCallback，但随后我失去了反应性，必须手动处理所有 props/emits/.. ，如下所示：

class TestQuasarComponentCE extends HTMLElement {
  // get init props
  const prop1 = this.getAttribute('prop1')

  // handle changes
  // Mutation observer here probably...

  const app = createApp(TestQuasarComponent, { prop1 }).use(Quasar)
  
  app.mount(this)
}

customElements.define('test-quasar-component-ce', TestQuasarComponentCE);

所以最后的问题是 - 是否有可能以某种方式将其defineCustomElement与附加到应用程序的框架结合起来？

如何允许 qInput 中的 qDate 单范围选择？下面是 qInput 中 qDate 单个日期选择的示例代码。我尝试过<q-date v-model="date" range>，但它不会在输入框中显示所选范围。

<div id="q-app">
  <div class="q-pa-md" style="max-width: 300px">
      <q-input filled v-model="date" mask="date" :rules="['date']">
        <template v-slot:append>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy>
              <q-date v-model="date" ></q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
</div>

<script>
new Vue({
  el: '#q-app',
  data () {
    return {
      date: '2019/02/01'
    }
  }
})

我收到以下错误：

ERROR  Failed to compile with 1 errors                                                                                                                                                                                       

This relative module was not found:

* ./QSpinner in ./node_modules/quasar-framework/src/components/spinner/index.js

香港专业教育学院试图重新安装quasar-cli和更新npm

即时通讯使用类星体框架0.15.8
和类星体cli.0.15.12