About Header Buttons

CabloyJS abstracts the header buttons, which is not only convenient for flexible customization, but also convenient for developing new buttons

The module a-layoutpc has three built-in header buttons, which are:

Name Description
Dashboard Open Dashboard
Fullscreen Switch Fullscreen
Mine Show the panel of Mine on the right sidebar

Let’s take Fullscreen as an example to show how to develop a header button

1. Create a Vue component

The Header Button itself is a Vue component, but it cleverly uses multiple syntax features of Vue. In order to explain it more clearly, all the source codes are pasted here before detailed explanation

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

First of all, we do not export Options object directly like ordinary Vue component, but export an object with the install method like Vue plugin

1.2 mixins: [ebLayoutButtonBase]

ebLayoutButtonBase is the base component provided by module a-layoutpc. All buttons must mixin this base component

Here we can explain why we can’t export the Options object directly. Because module a-layoutpc is a module loaded asynchronously, and all buttons must mixin ebLayoutButtonBase. If export Options object directly, you will not obtain ebLayoutButtonBase at compile time, so mixin will fail

2. Reference Vue component

In order for the system to find this Vue component, you need to reference it in the component list

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

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

export default {
  buttonFullscreen,
};

3. Definition of Function at backend

In a complex system, the problem of data authorization will be involved. We need to control the authority of buttons. Then, we need to define the function corresponding to the button at backend so that the button can be authorized

3.1 Definition of Function

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

...
buttonFullscreen: {
  title: 'Fullscreen',
  component: 'buttonFullscreen',
  menu: 5,
  public: 1,
},
...
Name Description
title Button’s title
component Button’s Vue component
menu const 5：Function’s type which means button
public Public or not. If it is public, no authorization is required, and all users can access it

3.2 Initialization

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 });

      }

    }

We need to add the authorization record of the button to the database when the module data version is initialized. Because the public of the button is true, the roleName here should be null

  1. About Module Data Version, please refer to: Module Data Version
  2. About Definition of Function, please refer to: Function & Menu
  3. About Function Authorization, please refer to: Function Authorization