如何在 Quasar Vue V2 框架中设置一些全局 functions/mixins

Question

我正在为 SPA 使用 Quasar Framework V2，我需要创建一个 class，我可以在其中声明应用程序上的所有共享 functions/methods 以减少代码编写。

例如，要显示来自 Notify 插件的警报，您必须使用以下代码：

$q.notify({
          message: 'Error',
          color: 'primary',
          actions: [
            { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
          ]
        })

在我希望调用该通知的每个事件中都写这个太长了。但我不知道在 Quasar 上执行此操作的正确方法。 我尝试使用引导文件但失败了

我只想从全局 class/mixin/boot 或其他任何地方调用 notifyError()。像这样：

const notifyError = () => {

$q.notify({
          message: 'Jim just pinged you.',
          color: 'primary',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          actions: [
            { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
            { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
          ]
        })

}

Answer 1

您可以像这样定义通知实用程序：

// If you're not using Quasar CLI, you probably have a quasar.js file that you'll need to import inside main.js
import Vue from 'vue';
import { Quasar, Notify } from 'quasar';

Vue.use(Quasar, {
  // You can configure here how notify works
  config: {
    notify: {
    position: 'top-right',
    timeout: 2000,
  },
  // You need to import the plugin
  plugins: {
    Notify,
  },
});

// If you're using Quasar CLI, you need to add the Notify plugin in quasar.conf.js
module.exports = function () {
  return {
    framework: {
      plugins: [
        'Notify',
      ],
    },
  };
};

// util/notify.js
import { Notify } from 'quasar';

const error = (message) => {
  Notify.create({
    message,
    color: 'primary',
    actions: [
      { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } },
    ],
  });
};

const primary = (message) => {
  Notify.create({
    message,
    color: 'primary',
    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
    actions: [
      { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
      { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } },
    ],
  });
};

export default {
  error,
  primary,
};

// Home.vue
<template>
  ...
</template>

<script>
import notify from '@/notify';

export default {
  name: 'Home',
  async created() {
    notify.primary('message');
  },
};
</script>

Answer 2

在 quasar 中有启动文件夹，您可以创建自己的文件，例如：

// src/boot/Notify.js


import { boot } from 'quasar/wrappers'
import { Notify} from 'quasar'
export default boot(async ({ app }) => {   
  const notifyError = () => {

        Notify.create({
          message: 'Jim just pinged you.',
          color: 'primary',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          actions: [
              { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
              { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
            ]
          })

  }

 app.config.globalProperties.$notifyError = notifyError 
}

其次，您应该在 quasar.conf.js

中添加此文件

boot: [
      'i18n',//already exist
      'axios',//already exist
      'Notify'//NEW : Our File Name  in boot folder 
    ],

现在您可以像这样在您的组件中访问此函数：

this.$notifyError()

同样的方法，你可以创建多少你想要的功能，还有启动文件...

如何在 Quasar Vue V2 框架中设置一些全局 functions/mixins

How can I set some global functions/mixins in Quasar Vue V2 framework

vue.js

vuejs3

quasar-framework