⚡ 使用自己的 vuetify-message 插件

Signed-off-by: LemonNeko <chheese048@gmail.com>
liliumneko · Jun 15, 2021 · 7ed6a16 · 7ed6a16
1 parent 524dd2d
commit 7ed6a16
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 52 deletions.
diff --git a/fe/components/neko-footer/index.vue b/fe/components/neko-footer/index.vue
@@ -36,23 +36,15 @@
         </v-row>
       </v-col>
     </v-row>
-    <v-snackbar v-model="copySuccess" color="success" timeout="1500">
-      邮箱已复制到剪贴板
-    </v-snackbar>
   </v-footer>
 </template>
 <script lang="ts">
 import Vue from 'vue'
 export default Vue.extend({
-  data () {
-    return {
-      copySuccess: false
-    }
-  },
   methods: {
     copyEmail () {
       navigator.clipboard.writeText('chheese048@gmail.com')
-      this.copySuccess = true
+      this.$msg.success('邮箱已复制到剪贴板')
     }
   }
 })

diff --git a/fe/layouts/default.vue b/fe/layouts/default.vue
@@ -22,9 +22,6 @@
         <neko-footer v-if="!$vuetify.breakpoint.mobile" />
       </v-main>
     </v-img>
-    <v-snackbar v-model="snackbar.show" elevation="0" :color="snackbar.color" top app>
-      {{ snackbar.text }}
-    </v-snackbar>
     <v-dialog v-model="openInfo" transition="dialog-bottom-transition" fullscreen>
       <v-app-bar flat color="white">
         <v-app-bar-title>关于</v-app-bar-title>
@@ -88,11 +85,6 @@ export default Vue.extend({
     return {
       background: '',
       getBackgroundFromBing: true,
-      snackbar: {
-        show: false,
-        color: '',
-        text: ''
-      },
       loadingBingWallpaper: false,
       openInfo: false
     }
@@ -131,14 +123,10 @@ export default Vue.extend({
       }
       api.be.getWallpaper().then((res) => {
         if (res === 'api-failed') {
-          this.snackbar.color = 'warning'
-          this.snackbar.text = '获取 Bing 壁纸失败，Bing 壁纸的 API 可能发生了变动'
-          this.snackbar.show = true
+          this.$msg.warning('获取 Bing 壁纸失败，服务器可能没有准备好')
           this.getBackgroundFromBing = false
         } else if (res === 'api-error') {
-          this.snackbar.color = 'error'
-          this.snackbar.text = '获取 Bing 壁纸失败，服务器可能没有准备好'
-          this.snackbar.show = true
+          this.$msg.error('获取 Bing 壁纸失败，服务器可能没有准备好')
           this.getBackgroundFromBing = false
         } else {
           this.background = res
@@ -162,9 +150,7 @@ export default Vue.extend({
     },
     copyEmail () {
       navigator.clipboard.writeText('chheese048@gmail.com')
-      this.snackbar.color = 'success'
-      this.snackbar.text = '已复制柠喵的邮箱'
-      this.snackbar.show = true
+      this.$msg.success('复制邮箱成功')
     }
   }
 })

diff --git a/fe/nuxt.config.ts b/fe/nuxt.config.ts
@@ -35,6 +35,7 @@ const config: NuxtConfig = {
   },
   css: [],
   plugins: [
+    { src: '~/plugins/vuetify-message', ssr: false }
   ],
   components: true,
   buildModules: [

diff --git a/fe/package.json b/fe/package.json
@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@lemonneko/vuetify-message": "^1.1.7",
     "@nuxtjs/axios": "^5.13.1",
     "axios": "^0.21.1",
     "core-js": "^3.14.0",

diff --git a/fe/pages/index.vue b/fe/pages/index.vue
@@ -93,9 +93,6 @@
           </v-card-actions>
         </v-card>
       </v-col>
-      <v-snackbar v-model="snackbar.show" elevation="0" :color="snackbar.color" top app>
-        {{ snackbar.text }}
-      </v-snackbar>
     </v-row>
     <v-row v-for="(item, index) in questions" :key="index" :dense="$vuetify.breakpoint.mobile">
       <v-col>
@@ -130,20 +127,13 @@ import Vue from 'vue'
 import moment from 'moment'
 import { api, ResponseData } from '~/api/api'
 
-type SnackbarColor = 'success' | 'warning' | 'error' | ''
-
 interface ComponentData {
   isServerAvailable: boolean
   refreshingAvailable: boolean
   question: string
   captchaId: string
   captchaValue: string
   captchaLoadFailed: boolean
-  snackbar: {
-    show: boolean
-    color: SnackbarColor
-    text: string
-  }
   submitting: boolean
   questions: ResponseData[]
 }
@@ -156,11 +146,6 @@ export default Vue.extend({
       question: '',
       captchaId: '',
       captchaValue: '',
-      snackbar: {
-        show: false,
-        color: '',
-        text: ''
-      },
       submitting: false,
       captchaLoadFailed: false,
       questions: []
@@ -197,11 +182,11 @@ export default Vue.extend({
     },
     async submitQuestion () {
       if (this.question === '') {
-        this.showSnackbar('没有输入问题哦', 'error')
+        this.$msg.error('没有输入问题哦')
         return
       }
       if (this.captchaValue === '') {
-        this.showSnackbar('没有输入验证码哦', 'error')
+        this.$msg.error('没有输入验证码哦')
       }
 
       this.submitting = true
@@ -214,23 +199,17 @@ export default Vue.extend({
         case 200:
           this.reset()
           this.getQuestions().then()
-          this.showSnackbar('提问成功啦，等待柠喵回复吧', 'success')
+          this.$msg.success('提问成功啦，等待柠喵回复吧')
           break
         case 406:
-          this.showSnackbar('验证失败，请点击验证码图案再来一次', 'warning')
+          this.$msg.warning('验证失败，请点击验证码图案再来一次')
           break
         case 500:
-          this.showSnackbar('服务器出了点问题，可能过一会就好了', 'error')
+          this.$msg.error('服务器出了点问题，可能过一会就好了')
           break
       }
       this.submitting = false
     },
-    showSnackbar (text: string, color: SnackbarColor) {
-      if (color === '') { return }
-      this.snackbar.text = text
-      this.snackbar.color = color
-      this.snackbar.show = true
-    },
     reset () {
       this.captchaValue = ''
       this.question = ''

diff --git a/fe/plugins/vuetify-message.ts b/fe/plugins/vuetify-message.ts
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VuetifyMessage from '@lemonneko/vuetify-message'
+
+Vue.use(VuetifyMessage)
diff --git a/fe/yarn.lock b/fe/yarn.lock
@@ -1185,6 +1185,11 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@lemonneko/vuetify-message@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@lemonneko/vuetify-message/-/vuetify-message-1.1.7.tgz#56c8753b3a23aba6b15884fa55e92dd84cc40acc"
+  integrity sha512-xum0ApfKLMLMM5L2xAp/+txsWV6PVkr29p9MFH6lsACdtYB6iEy2OkuS6bDvh1mf2gJP7h45nCItdWZFFqteGA==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"