组件开发示例

在 WoodyDashboard 中，组件是构建大屏看板的核心元素。每个组件都包含模板、样式、逻辑和配置四个部分。

组件结构

一个完整的组件包含以下四个部分：

JS

// 导入Vue 3的响应式API
const { defineComponent, ref } = Vue;

// 定义动态组件 - 这是组件的核心逻辑部分
const dynamicComponent = defineComponent({
  name: 'CommonComp1', // 组件名称，用于调试和开发工具识别
  props: {
    // 根数据：包含所有设备信息、告警数据、计算数据等
    rootData: Object,
    // 组件配置：包含组件的各种配置参数
    configOption: Object,
    // 边框配置：传递给边框组件的参数
    barOption: Object,
    // 全局设置：看板的全局配置信息
    globalSetting: Object,
  },
  setup(props, { attrs: _attrs }) {
    console.log('props', props);
    // 定义响应式数据
    const msg = ref('最简单的组件示例');

    return {
      msg,
    };
  },
});

// getConfigOption函数：组件的配置生成器
// 这个函数在组件渲染前被调用，用于生成组件的配置参数
// 参数说明：
// - configOption: 传入的配置参数（可能为空）
// - rootData: 根数据，包含所有设备信息
const getConfigOption = (configOption, rootData) => {
  return {
    // 传递根数据给组件
    rootData,

    // 测试配置：用于开发调试时的尺寸设置
    testConfig: { w: 400, h: 500 },

    // 组件配置选项
    configOption: {
      // 是否隐藏边框：false表示显示边框，true表示隐藏边框
      hideBorder: false,

      // 全屏配置：控制组件是否支持全屏显示
      fullScreen: {
        show: true, // 是否显示全屏按钮
        style: { // 全屏按钮的样式
          color: 'blue',
        },
      },
    },

    // 边框配置：传递给边框组件的参数
    barOption: {
      title: { text: '标题信息' }, // 边框标题文本
    },
  };
};

// 导出组件和配置函数
// 框架会调用getConfigOption来获取配置，然后渲染dynamicComponent
return { dynamicComponent, getConfigOption };

HTML

<div class="flex flex-col justify-center text-t34g2">
    <p>{{msg}}</p>
    <p class="text-red-400">{{rootData.test}}</p>
</div>

CSS

.text-t34g2 {
    font-size: 32px;
    color: yellow;
}

预览