Dashboard Designer

一个基于Vue 2的数据看板设计器组件库。

功能特性

• 🎨 可视化拖拽设计
• 📱 响应式布局支持
• 🎯 组件属性配置
• 🎪 事件系统支持
• 📦 多格式打包输出

安装

npm install dashboard-designer
# 或
yarn add dashboard-designer

使用方法

CommonJS模块使用

// 导入CommonJS模块
const DashboardDesigner = require('dashboard-designer/lib/commonjs/dashboard-designer.common.js')
require('dashboard-designer/lib/commonjs/dashboard-designer.css')

// 或者使用ES6 import语法
import DashboardDesigner from 'dashboard-designer/lib/commonjs/dashboard-designer.common.js'
import 'dashboard-designer/lib/commonjs/dashboard-designer.css'

// 在Vue组件中使用
export default {
  components: {
    DashboardDesigner
  }
}

UMD模块

<script src="dashboard-designer/lib/umd/dashboard-designer.js"></script>
<link rel="stylesheet" href="dashboard-designer/lib/umd/dashboard-designer.css">

在Vue项目中使用

<template>
  <div>
    <DashboardDesigner 
      :component-instances="componentInstances"
      :registered-components="registeredComponents"
      @update-instance="handleUpdateInstance"
    />
  </div>
</template>

<script>
import DashboardDesigner from 'dashboard-designer'

export default {
  components: {
    DashboardDesigner
  },
  data() {
    return {
      componentInstances: [],
      registeredComponents: []
    }
  },
  methods: {
    handleUpdateInstance(instance) {
      // 处理组件实例更新
    }
  }
}
</script>

开发

安装依赖

npm install
# 或
yarn install

开发模式

npm run serve

构建组件库

# 构建所有格式
npm run build:lib

# 仅构建UMD格式
npm run build:lib:umd

# 仅构建CommonJS格式
npm run build:lib:commonjs

构建输出

构建后的文件将输出到 lib 目录：

lib/
├── commonjs/
│   ├── dashboard-designer.common.js
│   └── dashboard-designer.css
└── umd/
    ├── dashboard-designer.umd.js
    ├── dashboard-designer.umd.min.js
    └── dashboard-designer.css

API文档

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | componentInstances | Array | [] | 组件实例列表 | | registeredComponents | Array | [] | 注册的组件配置 | | previewMode | Boolean | false | 预览模式 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | update-instance | instance | 组件实例更新时触发 | | select-instance | instanceId | 选中组件时触发 | | delete-instance | instanceId | 删除组件时触发 |

许可证

MIT License