# 5.20 数据面板（Panel）

数据面板组件，用于以网格形式展示指标数据，并支持底部操作入口

# 基础用法

<template>
  <dof-panel
    :listData="listData"
    btnText="查看详情"
    @dofBottomBarClicked="onBottomBarClicked"
  ></dof-panel>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        [
          { title: '今日用电', value: '2.5', unit: 'kWh' },
          { title: '本月用电', value: '35', unit: 'kWh' },
        ],
      ],
    }
  },
  methods: {
    onBottomBarClicked() {
      // Handle the bottom action.
    },
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Attributes

Prop	Type	Required	Default	Description
`needDarkMode`	`Boolean`	N	`false`	是否启用 M-dark/T-dark 内置暗黑适配
`listData`	`Array`	N	`[]`	二维指标数组；每项包含 `title`、`value`、`unit`
`hasBottomBar`	`Boolean`	N	`true`	是否显示底部操作栏
`theme`	`String`	N	`'primary'`	底部操作文本主题
`btnText`	`String`	N	`'查看使用日志'`	底部操作文本
`isRTL`	`Boolean`	`N`	`false`	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见接入说明。

# Events

事件名	说明	回调参数
`dofBottomBarClicked`	点击底部操作栏	-