拖拽式仪表盘 - 组件配置文档

本文将对 Dashboard 组件的使用方法进行介绍。

1 A note on terminology

“Widget（小部件）”和“Component（组件）”都是计算机科学中常见的术语，用于描述可重复使用的用户界面元素。Widget 通常更简单，具有预定义的样式和功能，而 Component 可以更灵活、可定制，并具有更丰富的行为和交互性。Widget 更倾向于描述独立的、自包含的小型组件，而 Component 则更倾向于描述较大规模的、可组合的用户界面元素。

Vue 项目通常选用 Component，与之相比仪表盘组件功能更加局限，使用 Widget 来描述显然更符合实际情况。

2 Widget Example

完整例子详见 @/components/Dashboard/widgets/example.vue 组件。

3 Inject

dashboard 组件及其后代组件可以通过注入 $dashboard 访问容器中的属性或方法。

• $dashboard (Object): 当前 dashboard 容器实例

例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<script>
export default {
  name: 'ExampleWidget',
  widget: { /* ... */ },
  inject: ['$dashboard'],
  mounted() {
    // 组件通过 this.$dashboard 访问容器中的属性或方法
    this.$dashboard.notify('example widget mounted')
  },
  /* ... */
}
</script>

4 Props

容器中的组件可以接收一些上层传递的参数，如下：

5 Widget Properties

widget 配置如下：

6 Widget Events

参数说明：

• item：Object，组件实例数据，参考文档
• args：Array，传递给事件的其他参数，参考文档

7 Widget Styles

组件默认含有 box-shadow、background-color 等样式，可在组件根节点通过以下样式调整或根据实际情况自行覆盖。

8 Widget Directory

dashboard 组件统一存放目录：

• 通用组件：@/components/Dashboard/widgets/
• 模块组件：@/views/{module_name}/widgets/