边栏按钮

关于边栏按钮

边栏按钮既可以在头部边栏显示，也可以在状态栏显示，甚至可以同时显示

CabloyJS对边栏按钮进行了抽象，既有利于灵活定制，也便于开发新的按钮

最佳实践：可以根据业务需要开发自定义的边栏按钮，然后再创建一个新的PC布局，或修改现有PC布局的配置

PC布局配置，请参见：PC布局配置

内置边栏按钮

模块a-layoutpc内置了六个边栏按钮，分别是：

名称	说明
首页	打开首页
仪表板	打开仪表板页面
全屏	切换全屏显示
我的	在右边栏显示`我的`页面
时钟	显示时钟
版权	显示版权信息

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

1. 创建一个Vue组件

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

src/module-system/a-layoutpc/front/src/components/buttons/buttonFullscreen.vue

1<template>
2  <eb-link :class="buttonClass" :iconMaterial="isFullscreen?'fullscreen_exit':'fullscreen'" :onPerform="onPerform"></eb-link>
3</template>
4<script>
5import screenfull from 'screenfull';
6
7// export
8export default {
9  installFactory,
10};
11
12// installFactory
13function installFactory(_Vue) {
14  const Vue = _Vue;
15  const ebLayoutButtonBase = Vue.prototype.$meta.module.get('a-layoutpc').options.mixins.ebLayoutButtonBase;
16  return {
17    mixins: [ ebLayoutButtonBase ],
18    data() {
19      return {
20        isFullscreen: false,
21      };
22    },
23    created() {
24      if (!screenfull.isEnabled) {
25        this.button.hide();
26      } else {
27        screenfull.on('change', () => {
28          this.isFullscreen = screenfull.isFullscreen;
29        });
30      }
31    },
32    methods: {
33      onPerform() {
34        screenfull.toggle();
35      },
36    },
37  };
38}
39
40</script>

1.1 export default

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

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

1import buttonFullscreen from './components/button/buttonFullscreen.vue';
2
3export default {
4  buttonFullscreen,
5};

3. 后端资源定义

在一个复杂的系统中，会涉及到资源授权的问题，我们需要对边栏按钮进行权限控制。模块a-layoutpc提供了一个资源类型a-layoutpc:button，只需定义静态资源，并指定角色，即可同时完成资源的注册与初始授权

3.1 定义静态资源

定义一个静态资源数组

src/module-system/a-layoutpc/backend/src/config/static/resources.js

1module.exports = app => {
2  const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
3  const resources = [
4    // buttons
5    {
6      atomName: 'Fullscreen',
7      atomStaticKey: 'buttonFullscreen',
8      atomRevision: 0,
9      atomCategoryId: 'a-layoutpc:button.General',
10      resourceType: 'a-layoutpc:button',
11      resourceConfig: JSON.stringify({
12        module: moduleInfo.relativeName,
13        component: 'buttonFullscreen',
14      }),
15      resourceRoles: 'root',
16    },
17  ];
18  return resources;
19};

名称	说明
atomStaticKey	系统自动添加模块名称前缀，生成`a-layoutpc:buttonFullscreen`
atomCategoryId	资源归属目录。资源类型全称`a-layoutpc:button`作为一级目录
resourceType	资源类型全称
resourceConfig	资源配置信息
resourceConfig.module + component	按钮前端渲染组件名称
resourceRoles	资源授权对象，这里是角色`root`

角色root是整个角色树的根，也就意味着所有用户（包括匿名用户）均可访问此资源

更多配置说明，参见静态资源

3.2 注册静态资源

前面定义好一组静态资源，接下来就需要在模块的meta文件中进行注册

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

1const staticResources = require('./config/static/resources.js')(app);
2
3base: {
4  statics: {
5    'a-base.resource': {
6      items: staticResources,
7    },
8  },
9},

名称	说明
a-base.resource	原子类型的全称。在这里，原子类型`resource`是由模块`a-base`提供的
items	静态资源数组

通用边栏按钮

边栏按钮更一般的用途是作为链接使用，当点击按钮时打开一个页面。因此，CabloyJS提供了一个通用的Vue组件，可直接在静态资源中使用。下面以Copyright按钮为例：