feat: 改造directive

Author: vanoneang

src/lin/directive/README.md

@@ -1,10 +1,17 @@
 import Vue from 'vue'
 import store from '@/store'
 
+/**
+ * 判断是否允许访问该DOM
+ * @param {*} permission 权限
+ * @param {*} user 当前用户实例
+ * @param {*} permissions 当前管理员所在分组权限集
+ */
 function isAllowed(permission, user, permissions) {
   if (user.admin) {
     return true
   }
+
   if (typeof permission === 'string') {
     return permissions.includes(permission)
   }
@@ -15,9 +22,11 @@ function isAllowed(permission, user, permissions) {
 }
 
 Vue.directive('permission', {
-  bind(el, binding) {
-    let permission
+  beforeMount(el, binding) {
     let type
+    let permission
+    const element = el
+
     if (Object.prototype.toString.call(binding.value) === '[object Object]') {
       // eslint-disable-next-line prefer-destructuring
       permission = binding.value.permission
@@ -27,7 +36,6 @@ Vue.directive('permission', {
       permission = binding.value
     }
     const isAllow = isAllowed(permission, store.state.user || {}, store.state.permissions)
-    const element = el
     if (!isAllow && permission) {
       if (type) {
         element.disabled = true

src/lin/directive/authorize.js

@@ -1,2 +1 @@
-import './ripple'
 import './authorize'

src/lin/directive/index.js

@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import { Message } from 'element-ui'
+
 // import EventSourcePolyfill from 'event-source-polyfill'
 import 'event-source-polyfill/src/eventsource'
 import { getToken } from './cookie'
@@ -45,11 +46,7 @@ export default class Sse {
       // console.log('receive one message: ', event.data)
       // console.log('receive one message: ', event.lastEventId)
       store.commit('ADD_UNREAD_MESSAGE', { data: event.data, id: event.lastEventId })
-      Vue.prototype.$notify({
-        title: '您有新的消息',
-        dangerouslyUseHTMLString: true,
-        message: `<strong class="my-notify">${JSON.parse(event.data).message}</strong>`,
-      })
+      Message.warning(JSON.parse(event.data).message)
     })
   }
 }

src/lin/directive/ripple.js

@@ -1,37 +1,35 @@
-import Vue, { createApp } from 'vue'
-import VueCompositionApi from '@vue/composition-api'
-import ElementUI from 'element-ui'
+import { createApp } from 'vue'
 
 import '@/config/global'
 import '@/lin/plugin'
-import '@/lin/directive'
-
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
-import LinNotify from '@/component/notify'
-import router from '@/router'
-import store from '@/store'
+import directives from '@/lin/directive'
+
 import App from '@/app.vue'
+import store from '@/store'
+import router from '@/router'
 
-import StickyTop from '@/component/base/sticky-top/sticky-top'
 import LIcon from '@/component/base/icon/lin-icon'
+import StickyTop from '@/component/base/sticky-top/sticky-top'
 import SourceCode from '@/component/base/source-code/source-code'
 
 import '@/assets/style/index.scss' // eslint-disable-line
 import '@/assets/style/realize/element-variable.scss'
 import 'element-ui/lib/theme-chalk/display.css'
 
-Vue.component(CollapseTransition.name, CollapseTransition)
+const app = createApp(App)
+
+app.component(CollapseTransition.name, CollapseTransition)
 
 // base 组件注册
-Vue.component('sticky-top', StickyTop)
-Vue.component('l-icon', LIcon)
-Vue.component('source-code', SourceCode)
+app.component('l-icon', LIcon)
+app.component('sticky-top', StickyTop)
+app.component('source-code', SourceCode)
 
-/* eslint no-unused-vars: 0 */
-const AppInstance = createApp(App)
-  .use(router)
-  .use(store)
-  .mount('#app')
+app.use(router)
+app.use(store)
+app.directive(directives)
+app.mount('#app')
 
 // 设置 App 实例
-window.App = AppInstance
+window.App = app

src/lin/util/sse.js

@@ -1,5 +1,6 @@
-import Vue from 'vue'
 import { createRouter } from 'vue-router'
+import { Message } from 'element-ui'
+
 import routes from './route'
 import store from '../store'
 import appConfig from '@/config/index'
@@ -55,11 +56,7 @@ router.beforeEach((to, from, next) => {
   if (store && store.state && store.getters) {
     const { permissions, user } = store.getters
     if (to.path !== '/about' && !Util.hasPermission(permissions, to.meta, user)) {
-      Vue.prototype.$notify({
-        title: '无权限',
-        dangerouslyUseHTMLString: true,
-        message: '<strong class="my-notify">您无此页面的权限哟</strong>',
-      })
+      Message.error('您无此页面的权限哟')
       next({ path: '/about' })
       return
     }