Vue-workbench NPM

vue-workbench

vue custom workbench component

a simple custom workbench components, modify the page display module style
vue的组件，自定义工作台，能改变页面上不同模块显示的顺序、大小、标题

Install

 npm install vue-workbench

Example

Demo

<template>
    <workbench :config="config" :color="primaryColor" @resize="resizeHdl">
        <template v-slot:module1>
          第一个模块的内容
        </template>
        <template v-slot:module2>
          第二个模块的内容
        </template>
        <template v-slot:module3>
          内容溢出时, overflow:auto
        </template>
        <!-- 多个template -->
    </workbench>
</template>

<script>
import workbench from "vue-workbench";
export default {
  components: { workbench },
  data() {
    return {
      primaryColor: '#fdd',  // 主题色，非必须
      config: [              // 配置项，必须， 见下表
        { 
          name: "第一块",
          nickName: "第一块",
          order: 1,
          width: "1/3",
          height: 160,
          moduleId: "1"
        },
        {
          name: "第二块",
          nickName: "第二块",
          order: 2,
          rowsShow: 5,
          width: "1/3",
          height: 160,
          moduleId: "2"
        },
        // ...多个配置项
      ]
    };
  },
  methods: {
    resizeHdl(cfg){ // 参数是修改过的配置文件
      // ... 做一些事情 
    }
  }
};
</script>