创建组件

通过脚本初始化组件

我们已经封装好了 shell 脚本，只需要运行命令就可以生成一个组件需要的所有文件，生成脚本，我们使用的是 plop 插件，感兴趣的朋友也可以了解一下，将常用的页面作为模板也可以提高开发效率避免很多重复工作

创建组件命令(同样推荐 pnpm):

pnpm new
或
yarn new
或
npm run new

操作视频
视频 - 1为添加一个新的柱状图示例
视频 - 2为添加一个不存在的类别

• 视频 - 1 添加一个新的柱状图

• 视频 - 2 添加一个不存在的类别

• 命令解释

1. 执行命令后，需要根据选项选择你要创建的类型

2. 通过键盘 上、下方向键 切换选项，单选或多选可以使用 空格 键选中、取消选中

3. 一般创建组件我们选择 datav 就可以了

4. 输入组件名称

5. 选择组件类型(如果没有选择'other'就可以了)

6. 如果上一步选择的是'other'，可以在这里输入你要创建的组件类型。这里的类型是和下图左侧的组件目录对应的，如果你要创建的类型在目录中没有，也可以自己创建一个名字(创建的名字要符合规范：此处名称推荐用 英文翻译 避免使用多个单词)

7. 完成创建，接下来在相应的文件内编写代码即可

组件目录结构

添加组件至菜单

在目录 src/data/system-components.ts文件内加入创建好的组件，如下所示:

通过命令生成的文件说明

index.ts

向外抛出 install 方法，用于注册组件和组件配置

完整的图表初始化配置 即生成的：basic-bar-chart1.ts

import { DatavComponent } from "@/components/_models/datav-component";
import {
  ApiConfigMap,
  ApiDataConfigMap,
  setApiConfig,
  setApiData,
} from "@/components/_models/data-source";
import { createField } from "@/components/_models/data-field";
import { DataEventConfig } from "@/components/_models/data-event";
import { getStaticData } from "@/api/data";

/**
 * BasicBarChart1
 */
export class BasicBarChart1 extends DatavComponent {
  config = {
    // 这里是很多配置项,
  };

  apis: Partial<ApiConfigMap>;
  apiData: Partial<ApiDataConfigMap>;
  events: Record<string, DataEventConfig>;
  actions: Record<string, DataEventConfig>;

  constructor() {
    // 组件默认宽高
    super("BasicBarChart1", { w: 200, h: 200 });

    this.initData();
  }

  initData() {
    // 组件映射字段
    const fields = [createField("value", { description: "", optional: true })];
    // 初始化请求
    setApiConfig(this, {
      fields: Object.assign({}, ...fields),
    });
    // 初始化静态数据
    setApiData(this);
    // 初始化事件
    this.events = {
      click: {
        description: "当点击数据项时",
        fields: Object.assign({}, ...fields),
      },
      dbclick: {
        description: "当双击数据项时",
        fields: Object.assign({}, ...fields),
      },
      hover: {
        description: "当鼠标滑过时",
        fields: Object.assign({}, ...fields),
      },
    };
    this.actions = {};

    return this;
  }

  async loadData() {
    try {
      // 组件静态数据来源，当前项目统一管理目录：public/data/*
      // 如：public/data/demo/data.json 简写为 => demo/data
      const path = "barChart/basic-bar-chart1";
      const res = await getStaticData(this.id, path);
      this.apiData.source.config.data = JSON.stringify(res.data);
    } catch (error) {
      throw error;
    }
  }
}

export default BasicBarChart1;

组件渲染文件 src/index.vue

<template>
  <div class="datav-wrapper">BasicBarChart1</div>
</template>

<script lang="ts" setup>
import { computed, toRef } from "vue";
import {
  useDataCenter,
  getFieldMap,
} from "@/components/_mixins/use-data-center";
import { useApiStore } from "@/store/api";
import { BasicBarChart1 } from "./basic-bar-chart1";

const props = defineProps<{
  com: BasicBarChart1;
}>();

const apiStore = useApiStore();
useDataCenter(props.com);
// 组件配置信息
const config = toRef(props.com, "config");
// 组件位置、大小
const attr = toRef(props.com, "attr");
// 静态数据或API、SQL请求到的数据
const dv_data = computed(() => {
  return apiStore.dataMap[props.com.id]?.source ?? {};
});
// 映射字段
const dv_field = computed(() => {
  return getFieldMap(props.com.apis.source.fields);
});
</script>

组件渲染文件 src/config.vue

<template>
  <div></div>
</template>
<script lang="ts">
import { defineComponent, PropType, toRef } from "vue";
import BasicBarChart1 from "./basic-bar-chart1";
export default defineComponent({
  name: "BasicBarChart1",
  props: {
    com: {
      type: Object as PropType<BasicBarChart1>,
      required: true,
    },
  },
  setup(props) {
    // 组件所有配置信息
    const config = toRef(props.com, "config");
    return {
      config,
    };
  },
});
</script>