指令

src/directives/index.js

@@ -0,0 +1,14 @@
+import showScore from './showScore'
+
+// 自定义指令
+const directives = {
+  showScore
+}
+
+export default {
+  install (Vue) {
+    Object.keys(directives).forEach((key) => {
+      Vue.directive(key, directives[key])
+    })
+  }
+}

src/directives/showScore/index.js

@@ -0,0 +1,13 @@
+import Snackbar from '@/plugins/snackbar'
+
+export default {
+  mounted(el, binding) {
+    el.addEventListener('click', () => {
+      const score = binding.value
+      Snackbar.success('恭喜您获得' + score + '积分')
+    })
+  },
+  unmounted(el) {
+    el.removeEventListener('click', () => {})
+  }
+}

src/main.js

@@ -18,6 +18,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' // pinia 持
 // 日期组件
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
+import Directives from './directives'
 
 import router from './router'
 
@@ -32,6 +33,7 @@ const app = createApp(App)
 
 app.use(pinia)
 app.use(router)
+app.use(Directives)
 
 registerPlugins(app)
 app.component('VueDatePicker', VueDatePicker)