# 5.17 数字面板（Digital Panel）

数字面板组件，用于展示设备状态数字信息

# 基础用法

<template>
  <dof-digital-panel :digital="digitalData"></dof-digital-panel>
</template>

<script>
export default {
  data() {
    return {
      digitalData: {
        online: { lottie: [{ src: 'https://example.com/online.json' }] },
        offline: { lottie: [{ src: 'https://example.com/offline.json' }] },
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Attributes

Prop Type Required Default Description
state String N online 设备状态
digital Object N {"online":{"title":"online","value":"-","lottie":[]},"offline":{"title":"","value":"已离线","lottie":[]}} 数字面板配置，需包含与 state 对应的状态对象及 lottie 数组
position String N static 当前版本未应用该属性，暂不生效
text-color String N '' 文本颜色
panel-top Number / String N 0 面板顶部偏移
text-top Number / String N 0 文本顶部偏移
needDarkMode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

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

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。