vue-workbench  自定义工作台组件介绍

页面上显示多个模块，模块宽高排序可调时，适合用

来看下具体什么样

点击标题栏的编辑时：

可随意修改主题色：

 

 

食用方法:

1、npm install vue-workbench

2、

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

<script>
import workbench from "vue-workbench";
export default {
  components: {
    workbench
  },
  data() {
    return {
      primaryColor: '',
      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){  // 调整之后的配置项
      console.log(JSON.stringify(cfg))
    }
  }
};
</script>

 

源码地址： https://github.com/santalzhou/vue-workbench

路过的老哥能否给个意见再走