nuxt ui组件库Notification的使用

Nuxt UI是一个基于Vue.js构建的一系列美观、易用的UI组件，它提供了一个名为`Notification`的组件，用于创建通知或信息提示。在Nuxt项目中，你可以通过以下步骤使用`Notification`组件：

1. 首先，确保已安装了Nuxt UI，可以在nuxt.config.js文件中添加`@nuxtjs/ui`到plugins数组，然后运行`npm install @nuxtjs/ui`或`yarn add @nuxtjs/ui`。

export default {
  plugins: [
    { src: '~/plugins/nuxt-ui', ssr: false },
  ],
}

2. 引入组件：
在需要使用`Notification`的地方，导入组件并使用它。例如，在`.vue`文件中：

   <template>
     <v-container>
       <v-row>
         <v-col>
           <v-btn @click="showNotification">显示通知</v-btn>
         </v-col>
       </v-row>
       <v-notification v-model="notification" />
     </v-container>
   </template>

   <script>
   import { VContainer, VRow, VCol, VBtn, VNotification } from '@nuxtjs/ui';
   export default {
     components: {
       VNotification,
     },
     data() {
       return {
         notification: false, // 初始状态，一般设置为false
       };
     },
     methods: {
       showNotification() {
         this.notification = true; // 当点击按钮时，将通知打开
         setTimeout(() => {
           this.notification = false; // 指定时间后关闭通知
         }, 3000); // 可以自定义延迟时间
       },
     },
   }
   </script>

3. 使用props和事件进行定制：
如果你想对`Notification`的样式、内容等进行更精细的控制，可以使用其提供的props，如`type`（成功、错误、警告等）、`message`、`color`等。