如何在 Quasar Vue V2 框架中设置一些全局函数/mixin答案

【问题标题】：How can I set some global functions/mixins in Quasar Vue V2 framework如何在 Quasar Vue V2 框架中设置一些全局函数/mixin
【发布时间】：2021-08-31 02:52:36
【问题描述】：

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

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

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

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

我只想从全局类/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: () => { /* ... */ } }
          ]
        })

}

【问题讨论】：

标签： vue.js vuejs3 quasar-framework

【解决方案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>

【讨论】：

感谢您的回答。但是在 Quasar 框架中无法访问 main.js 我认为可以将其重构为在某些引导文件中使用它，
我更新了我的答案。您需要更新 quasar.conf.js 以加载通知插件。创建util/notify 文件，或者您喜欢命名它，您可以将它导入任何组件。您不需要启动文件。
完美！谢谢！

【解决方案2】：

在类星体中有引导文件夹，您可以创建自己的文件，例如：

// 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()

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

【讨论】：