五冶项目学习总结

Vue 3 中全局注册组件

手动引入

app.component() 用于在 Vue 3 中全局注册组件

js 复制代码

// 全局注册项目的自定义UI组件
import GComponents from "@/ui/index.js"
for (const [key,component] of Object.entries(GComponents)) {
    app.component(key, component);
}

自动引入

使用 Vite 插件 unplugin-vue-components

步骤：

安装插件：
bash 复制代码
```
npm install unplugin-vue-components -D
```

配置 vite.config.js：

js 复制代码

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 如果需要支持 Element Plus 等 UI 库

export default defineConfig({
  plugins: [
    Components({
      // 自动扫描并注册 components 目录下的组件
      dirs: ['src/components'],
      // 生成自动导入的 TypeScript 类型声明文件（可选）
      dts: 'src/components.d.ts',
      // 解析 UI 库组件（如 Element Plus、Ant Design Vue 等）
      resolvers: [ElementPlusResolver()]
    })
  ]
})

自定义UI组件

layout组件

使用slot插槽自定义内容区域，通过footer/footerBefore具名插槽定义底部区域(通常为确定、关闭按钮)，默认高度为

i-block-area

使用slot插槽自定义内容区域，通过toolbar具名插槽定义工具栏，点击标题左边的按钮实现收起与展开

主要用于表格、详情页等区域展示

i-form-area

主要用于表单区域，通过props属性column控制一行展示类目数量，默认一行展示3条，最多展示4条。

组件中通过css flex: 0 0 <width>控制类目宽度。
flex: 0 0 <width> ：强制元素保持固定尺寸，适合需要精确控制布局的场景

i-form-wrapper

与el-form-item功能类似，但不能替代el-form-item实现表单验证。在el-form内部尽量使用el-form-item，非el-form内部要实现类似的布局可使用i-form-wrapper。

i-search-area

查询区域，左侧为查询条件，右侧为操作按钮。

左侧查询条件限定一行展示3条类目，右侧操作按钮为查询与清空，清空按钮默认不展示，可通过props属性showResetBtn控制清空按钮展示与否。通过slot插槽自定义查询条件，查询条件一般使用i-form-wrapper编写。

用于编写表格上方的工具条，左侧一般为按钮，右侧为分页。

AG Grid 表格

安装

1、安装依赖

bash 复制代码

npm install ag-grid-community ag-grid-vue3 --save

核心组件：ag-grid-vue3
提供基础样式：ag-grid-community

2、引入样式在 main.js 引入 AG Grid 的样式文件，可自定义样式进行覆盖，并注册全局组件

js 复制代码

import { AgGridVue } from "ag-grid-vue3";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
...此处可引入自定义样式文件
app.component("ag-grid-vue", AgGridVue);

使用

基础使用

在模板中定义表格容器，绑定列定义（columnDefs）和数据（rowData）：

vue 复制代码

<template>
  <div class="ag-theme-alpine" style="height: 500px; width: 100%;">
    <ag-grid-vue
      :columnDefs="columnDefs"
      :rowData="rowData"
      @grid-ready="onGridReady"
    ></ag-grid-vue>
  </div>
</template>

js 复制代码

const columnDefs = [
  { headerName: "Name", field: "name", sortable: true, filter: true },
  { headerName: "Age", field: "age", editable: true }
]
const rowData = [
  { name: "John", age: 30 },
  { name: "Jane", age: 28 }
]
let gridApi;
const onGridReady = (params) => {
    gridApi = params.api;
    params.api.sizeColumnsToFit(); // 自适应列宽
}

核心配置

vue 复制代码

 <AgGridVue
      :style="'width:100%;height:' + props.height + 'px'"//设置表格的内联样式，宽度为100%，高度根据props.height的值动态设置
      class="ag-theme-alpine" //使用ag-theme-alpine CSS类为表格应用Alpine主题样式。
      :class="activeClass.join(' ')"//动态绑定附加的CSS类到表格上，类名由activeClass数组中的值组成。
      :columnDefs="columns"//定义表格的列配置（如标题、排序、过滤等），使用columns对象。
      :rowData="gridData"//提供表格显示的数据，使用gridData数组。
      rowSelection="multiple"//允许选择多行。
      @grid-ready="onGridReady"//表格初始化完成时触发的事件处理函数。
      :rowDeselection="true"//允许点击已选择的行来取消选择。
      :enableRangeSelection="true"//启用选择一系列单元格或行的功能。

      :suppressCopyRowsToClipboard="true"//防止将行数据复制到剪贴板。
      :statusBar="{
        // statusPanels: [
        //   // { statusPanel: 'agTotalAndFilteredRowCountComponent', align: 'left' },
        //   // { statusPanel: 'agSelectedRowCountComponent', align: 'left' }
        // ],
      }" //配置表格的状态栏。在你的代码中被注释掉了，但可以用于显示各种状态面板。
      :gridOptions="props.gridOptions"//从props.gridOptions中传递额外的表格选项，以进行自定义配置。
      :getContextMenuItems="getContextMenuItems"//提供一个函数来自定义右键菜单项。
      @sortChanged="refreshEvenRowsCurrencyData"//排序发生变化时触发的事件处理函数，用于根据新的排序顺序刷新数据。
      @filterChanged="refreshEvenRowsCurrencyData"//过滤条件发生变化时触发的事件处理函数，用于根据新的过滤条件刷新数据。
      @rowClicked="props.rowClick"//行被点击时触发的事件处理函数，用于执行自定义函数。
      @rowDoubleClicked="props.rowDoubleClicked"//行被双击时触发的事件处理函数，用于执行自定义函数。
      animateRows //启用行动画，用于行数据的添加或删除时的视觉效果。
      :suppressDragLeaveHidesColumns="true" //防止在将列拖动到表格外部时列被隐藏。
      :suppressMakeColumnVisibleAfterUnGroup="true" //防止在取消分组后自动显示列。
      :rowGroupPanelShow="props.autoGroupColumnDef ? 'always' : false" //控制行分组面板的显示。如果props.autoGroupColumnDef被设置，则总是显示；否则，隐藏。
      :groupSelectsChildren="true" //选择一个分组行时，所有其子行也会被选中。
      :suppressAggFuncInHeader="true" //防止在列头显示聚合函数。
      :autoGroupColumnDef="autoGroupColumnDef" //定义自动分组列的配置，用于数据分组。
      :masterDetail="true" //启用主从详细视图，允许在行中显示嵌套的详细信息。
      :localeText="localeText" //提供表格的本地化文本，基于localeText。
      :rowHeight="props.rowHeight" //根据props.rowHeight设置行的高度。
      @column-moved="onColumnMoved" //列移动时触发的事件处理函数，用于执行自定义函数。
      @column-resized="onColumnResized" //列大小调整时触发的事件处理函数，用于执行自定义函数。
      :suppressColumnVirtualisation="true" //禁用列虚拟化，这会影响性能，因为它会一次性渲染所有列，而不是仅渲染可见的列。
      :pinnedBottomRowData="pinnedBottomRowData" //将一组固定的数据行固定在表格的底部。这个属性接受一个数组，其中包含要固定在表格底部的行数据。
    >
    </AgGridVue>

注意项

1、使用push添加表格数据或者通过索引更改表格中某个数据，会导致表格不更新。需要调用下面的方法来进行更新：

js 复制代码

gridApiList.value.applyTransaction("update", gridOptionsList.rowData);

海康视频播放

1、创建WebControl实例与启动插件

2、创建视频播放窗口

3、初始化

4、监听resize事件以及scroll事件，保证视频播放窗口大小以及位置

五冶项目学习总结

Vue 3 中全局注册组件

手动引入

自动引入

步骤：

自定义UI组件

layout组件

i-modal-wrapper

i-block-area

i-form-area

i-form-wrapper

i-search-area

i-table-toolbar

AG Grid 表格

安装

使用

基础使用

核心配置

注意项

海康视频播放