Vue教程 第五篇 插件开发

我们来想一个问题，假如我们要做一个SPA的后台管理系统，要做到按钮级别的权限管控，思路是什么样的？

首先，我们要在路由上做文章，如果我们能知道哪个路由下面有多少个按钮存在是不是就可以了，也就是我们要得到这样一个路由结构：

{
       path: '/directive',
       name: 'directive',
       component: directive,
       meta: {
          permission: ['add', 'query', 'delete']
       }
},

然后如果我们能页面每个路由对应的组件中获取当前组件下的this.$router.meta.permission，是不是就知道当前页面应该有几个按钮，OK，思路通了。来看代码实现：

const hasPermission = {
  // eslint-disable-next-line
    install(Vue, options) {
    Vue.mixin({
      methods: {
        hasPermission(data) {
          const permissionList = this.$route.meta.permission
          if (permissionList && permissionList.length && permissionList.includes(data)) {
            return true
          }
          return false
        }
      }
    })
  }
}

export default hasPermission

 

仔细看这个封装模式，他是插件的封装模式，而且他采用了上一章讲到的mixin，把这个method方法混入到了各大组件中，插件如何调用，不用我说了吧

// 组件全局注册
import Vue from 'vue'

import HasPermission from './hasPermission'
import PageNotes from './pageNotes'
import PageTitle from './pageTitle'
import PageToolbar from './pageToolbar'
import PageSection from './pageSection'
import PageTable from './pageTable'
import PageSearch from './pageSearch'
import PageBack from './pageBack'
import PageHeader from './pageHeader'

// 褰㈡垚缁勪欢搴?const components = [
  HasPermission,
  PageNotes,
  PageTitle,
  PageSection,
  PageTable,
  PageToolbar,
  PageSearch,
  PageBack,
  PageHeader
]

// 娉ㄥ唽鍏ㄥ眬缁勪欢
components.map((com) => {
  Vue.use(com)
  // Vue.component(com.name, com)
})

export default components

到此结束，这个插件完成了，虽然功能很单一，却很好的应用了插件的功能。