关于头部按钮

CabloyJS对头部按钮进行了抽象,既有利于灵活定制,也便于开发新的按钮

模块a-layoutpc内置了三个头部按钮,分别是:

名称 说明
仪表盘 打开仪表盘页面
全屏 切换全屏显示
我的 在右边栏显示我的页面

我们以全屏为例来说明如何开发一个头部按钮

1. 创建一个Vue组件

头部按钮本身是一个Vue组件,但是巧妙的使用了Vue的多个语法特性。为了更清晰地说明,这里先贴出全部源码,再做详细解释

src/module/a-layoutpc/front/src/components/button/buttonFullscreen.vue

<template>
  <eb-link :iconMaterial="isFullscreen?'fullscreen_exit':'fullscreen'" :onPerform="onPerform"></eb-link>
</template>
<script>
import screenfull from 'screenfull';

// export
export default {
  install,
};

// install
function install(_Vue) {
  const Vue = _Vue;
  const ebLayoutButtonBase = Vue.prototype.$meta.module.get('a-layoutpc').options.mixins.ebLayoutButtonBase;
  return {
    mixins: [ebLayoutButtonBase],
    data() {
      return {
        isFullscreen: false,
      }
    },
    created() {
      if (!screenfull.isEnabled) {
        this.button.hide();
      } else {
        screenfull.on('change', () => {
          this.isFullscreen = screenfull.isFullscreen;
        });
      }
    },
    methods: {
      onPerform() {
        screenfull.toggle();
      }
    },
  };
}

</script>

1.1 export default

首先,我们并不像一般的Vue组件那样直接导出Options对象,而是像Vue插件一样导出一个带install方法的对象

1.2 mixins: [ebLayoutButtonBase]

ebLayoutButtonBase是模块a-layoutpc提供的按钮基类,所有按钮都必须mixin这个基类

这里我们就可以解释为什么不能直接导出Options对象。因为模块a-layoutpc是异步加载的模块,而所有按钮又必须继承ebLayoutButtonBase。如果直接导出Options对象,那么在编译期是获取不到ebLayoutButtonBase的,所以mixin必然失败

2. 引用Vue组件

为了让系统可以找到此Vue组件,需要在组件清单中引用

src/module/a-layoutpc/front/src/components.js

import buttonFullscreen from './components/button/buttonFullscreen.vue';

export default {
  buttonFullscreen,
};

3. 后端功能定义

在一个复杂的系统中,会涉及到数据授权的问题,我们需要对头部按钮进行权限控制。那么,我们需要在后端定义与头部按钮对应的功能,从而可以对头部按钮进行授权

3.1 功能定义

src/module/a-layoutpc/backend/src/meta.js

...
buttonFullscreen: {
  title: 'Fullscreen',
  component: 'buttonFullscreen',
  menu: 5,
  public: 1,
},
...
名称 说明
title 头部按钮的标题
component 头部按钮所对应的Vue组件
menu 常量5:对应头部按钮的类别
public 是否公开。如果是公开就不需要进行授权,所有用户均可访问

3.2 功能初始化

src/module/a-layoutpc/backend/src/service/version.js

      if (options.version === 1) {

        // roleFunctions: buttons
        const roleButtons = [
          { roleName: null, name: 'buttonDashboard' },
          { roleName: null, name: 'buttonFullscreen' },
          { roleName: null, name: 'buttonMine' },
        ];
        await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions: roleButtons });

      }

    }

我们需要在模块数据版本初始化时,向数据库中添加头部按钮的授权记录。因为头部按钮的publictrue,所以,这里的roleNamenull

  1. 关于模块数据版本的概念,请参见:模块数据版本
  2. 头部按钮的功能定义,请参见:功能与菜单
  3. 头部按钮的功能授权,请参见:功能授权