我按照 Quasar 文档 (v2.11.5) 中的说明创建通知。

我已在 quasar.config.js 中启用了该插件：

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { /* look at QuasarConfOptions from the API card */ }
    }
  }
}

我正在使用其文档中的代码：

<template>
  <div class="q-pa-md">
    <q-btn color="purple" @click="showNotif" label="Show Notification" />
  </div>
</template>

<script>
import { useQuasar } from "quasar";

export default {
  setup() {
    const $q = useQuasar();

    return {
      showNotif() {
        $q.notify({
          message: "Jim pinged you.",
          color: "purple",
        });
      },
    };
  },
};
</script>

尽管严格遵循 Quasar 文档，但我还是收到此错误：

Uncaught TypeError: $q.notify is not a function

更新 我已确认已安装 Notify 插件。我启动了一个新项目，并尝试在该项目中再次按照文档操作，但仍然不起作用。

$ quasar describe Notify

 Describing Notify plugin API
 Description is based on your project's Quasar version

 Injection

   $q.notify

 quasar.config.js > framework > config

   Property name: notify
   Definition:

     type (String)
       Description: Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')
       Examples:
         negative
         custom-type

     color (String)
       Description: Color name for component from the Quasar Color Palette
       Examples:
         primary
         teal-10

     textColor (String)
       Description: Color name for component from the Quasar Color Palette
       Examples:
         primary
         teal-10

     message (String)
       Description: The content of your message
       Example:
         John Doe pinged you

     caption (String)
       Description: The content of your optional caption
       Example:
         5 minutes ago

     html (Boolean)
       Description: Render the message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first

     icon (String)
       Description: Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
       Examples:
         map
         ion-add
         img:https://cdn.quasar.dev/logo-v2/svg/logo.svg
         img:path/to/some_image.png

     iconColor (String)
       Description: Color name for component from the Quasar Color Palette
       Examples:
         primary
         teal-10

     iconSize (String)
       Description: Size in CSS units, including unit name
       Examples:
         16px
         2rem

     avatar (String)
       Description: URL to an avatar/image; Suggestion: use public folder
       Examples:
         (public folder) img/something.png
         (relative path format) require('./my_img.jpg')
         (URL) https://some-site.net/some-img.gif

     spinner (Boolean)
       Description: Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown
       Examples:
         true
         QSpinnerBars

     spinnerColor (String)
       Description: Color name for component from the Quasar Color Palette
       Examples:
         primary
         teal-10

     spinnerSize (String)
       Description: Size in CSS units, including unit name
       Examples:
         16px
         2rem

     position (String)
       Description: Window side/corner to stick to
       Accepted values: top-left | top-right | bottom-left | bottom-right | top | bottom | left | right | center
       Default value: bottom

     group (Boolean | String | Number)
       Description: Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered
       Default value: (message + caption + multiline + actions labels + position)
       Example:
         my-group

     badgeColor (String)
       Description: Color name for the badge from the Quasar Color Palette
       Examples:
         primary
         teal-10

     badgeTextColor (String)
       Description: Color name for the badge text from the Quasar Color Palette
       Examples:
         primary
         teal-10

     badgePosition (String)
       Description: Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left
       Accepted values: top-left | top-right | bottom-left | bottom-right
       Default value: (top-left/top-right)

     badgeStyle (String | Array | Object)
       Description: Style definitions to be attributed to the badge
       Examples:
         background-color: #ff0000
         { backgroundColor: '#ff0000' }

     badgeClass (String | Array | Object)
       Description: Class definitions to be attributed to the badge
       Examples:
         my-special-class
         { 'my-special-class': <condition> }

     progress (Boolean)
       Description: Show progress bar to detail when notification will disappear automatically (unless timeout is 0)

     progressClass (String | Array | Object)
       Description: Class definitions to be attributed to the progress bar
       Examples:
         my-special-class
         { 'my-special-class': <condition> }

     classes (String)
       Description: Add CSS class(es) to the notification for easier customization
       Example:
         my-notif-class

     attrs (Object)
       Description: Key-value for attributes to be set on the notification
       Example:
         { role: 'alertdialog' }

     timeout (Number)
       Description: Amount of time to display (in milliseconds)
       Default value: 5000

     closeBtn (Boolean | String)
       Description: Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language
       Example:
         Close me

     multiLine (Boolean)
       Description: Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default

 Properties

   *No properties*

 Methods

   create (opts) => Function
     Creates a notification; Same as calling $q.notify(...)
     Parameters:
       opts (Object | String) [Required]
         Description: Notification options
         Props:
           type (String)
             Description: Optional type (that has been previously registered) or one of the out of the box ones ('positive', 'negative', 'warning', 'info', 'ongoing')
             Examples:
               negative
               custom-type
           color (String)
             Description: Color name for component from the Quasar Color Palette
             Examples:
               primary
               teal-10
           textColor (String)
             Description: Color name for component from the Quasar Color Palette
             Examples:
               primary
               teal-10
           message (String)
             Description: The content of your message
             Example:
               John Doe pinged you
           caption (String)
             Description: The content of your optional caption
             Example:
               5 minutes ago
           html (Boolean)
             Description: Render the message as HTML; This can lead to XSS attacks, so make sure that you sanitize the message first
           icon (String)
             Description: Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
             Examples:
               map
               ion-add
               img:https://cdn.quasar.dev/logo-v2/svg/logo.svg
               img:path/to/some_image.png
           iconColor (String)
             Description: Color name for component from the Quasar Color Palette
             Examples:
               primary
               teal-10
           iconSize (String)
             Description: Size in CSS units, including unit name
             Examples:
               16px
               2rem
           avatar (String)
             Description: URL to an avatar/image; Suggestion: use public folder
             Examples:
               (public folder) img/something.png
               (relative path format) require('./my_img.jpg')
               (URL) https://some-site.net/some-img.gif
           spinner (Boolean | Component)
             Description: Useful for notifications that are updated; Displays a Quasar spinner instead of an avatar or icon; If value is Boolean 'true' then the default QSpinner is shown
             Examples:
               true
               QSpinnerBars
           spinnerColor (String)
             Description: Color name for component from the Quasar Color Palette
             Examples:
               primary
               teal-10
           spinnerSize (String)
             Description: Size in CSS units, including unit name
             Examples:
               16px
               2rem
           position (String)
             Description: Window side/corner to stick to
             Accepted values: top-left | top-right | bottom-left | bottom-right | top | bottom | left | right | center
             Default value: bottom
           group (Boolean | String | Number)
             Description: Override the auto generated group with custom one; Grouped notifications cannot be updated; String or number value inform this is part of a specific group, regardless of its options; When a new notification is triggered with same group name, it replaces the old one and shows a badge with how many times the notification was triggered
             Default value: (message + caption + multiline + actions labels + position)
             Example:
               my-group
           badgeColor (String)
             Description: Color name for the badge from the Quasar Color Palette
             Examples:
               primary
               teal-10
           badgeTextColor (String)
             Description: Color name for the badge text from the Quasar Color Palette
             Examples:
               primary
               teal-10
           badgePosition (String)
             Description: Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left
             Accepted values: top-left | top-right | bottom-left | bottom-right
             Default value: (top-left/top-right)
           badgeStyle (String | Array | Object)
             Description: Style definitions to be attributed to the badge
             Examples:
               background-color: #ff0000
               { backgroundColor: '#ff0000' }
           badgeClass (String | Array | Object)
             Description: Class definitions to be attributed to the badge
             Examples:
               my-special-class
               { 'my-special-class': <condition> }
           progress (Boolean)
             Description: Show progress bar to detail when notification will disappear automatically (unless timeout is 0)
           progressClass (String | Array | Object)
             Description: Class definitions to be attributed to the progress bar
             Examples:
               my-special-class
               { 'my-special-class': <condition> }
           classes (String)
             Description: Add CSS class(es) to the notification for easier customization
             Example:
               my-notif-class
           attrs (Object)
             Description: Key-value for attributes to be set on the notification
             Example:
               { role: 'alertdialog' }
           timeout (Number)
             Description: Amount of time to display (in milliseconds)
             Default value: 5000
             Example:
               2500
           actions (Array)
             Description: Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop
             Props:
               handler (Function)
                 Description: Function to be executed when the button is clicked/tapped
                 Function form: () => void 0
                 Example:
                   () => { console.log('button clicked') }
               noDismiss (Boolean)
                 Description: Do not dismiss the notification when the button is clicked/tapped
               ... (Any)
                 Description: Any other QBtn prop expect 'onClick' (use 'handler' instead)
                 Examples:
                   label: 'Learn more'
                   color: 'primary'
             Example:
               [ { label: 'Show', handler: () => {}, 'aria-label': 'Button label' }, { icon: 'map', handler: () => {}, color: 'yellow' }, { label: 'Learn more', noDismiss: true, handler: () => {} } ]
           onDismiss (Function)
             Description: Function to call when notification gets dismissed
             Function form: () => void 0
             Example:
               () => { console.log('Dismissed') }
           closeBtn (Boolean | String)
             Description: Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language
             Example:
               Close me
           multiLine (Boolean)
             Description: Put notification into multi-line mode; If this prop isn't used and more than one 'action' is specified then notification goes into multi-line mode by default
           ignoreDefaults (Boolean)
             Description: Ignore the default configuration (set by setDefaults()) for this instance only
     Returns Function:
       Description: Calling this function with no parameters hides the notification; When called with one Object parameter (the original notification must NOT be grouped), it updates the notification (specified properties are shallow merged with previous ones; note that group and position cannot be changed while updating and so they are ignored)
       Function form: (props) => void 0
       Params:
         props (Object)
           Description: Notification properties that will be shallow merged to previous ones in order to update the non-grouped notification; (See 'opts' param of 'create()' for object properties, except 'group' and 'position')

   setDefaults (opts) => void 0
     Merge options into the default ones
     Parameters:
       opts (Object) [Required]
         Description: Notification options (See 'opts' param of 'create()' for object properties)

   registerType (typeName, typeOpts) => void 0
     Register a new type of notification (or override an existing one)
     Parameters:
       typeName (String) [Required]
         Description: Name of the type (to be used as 'type' prop later on)
         Example:
           my-type
       typeOpts (Object) [Required]
         Description: Notification options (See 'opts' param of 'create()' for object properties)

 Documentation URL

   https://v2.quasar.dev/quasar-plugins/notify