添加组件

本页介绍如何将自定义的 Vue 组件接入 HFLVEditor3，使其出现在编辑器组件区并可拖拽使用。

接入流程

1. 定义组件描述（分组、名称、属性等）
2. 注册到组件分组并同步到编辑器

TIP

组件的命名建议使用有效的前缀区分，避免与其他组件命名冲突。由于HFLVEditor3中组合时使用命名为Group的组件，需要规避重名

定义组件描述

建议集中维护组件定义，可以存数据库，文件，甚至直接写在js中，根据业务系统自身规范来定。例如 src/custom-component/custom-component-def.js：

export const customComponents = [
  {
    "groupName": "基础组件",
    "componentList": [
       {
        "component": "CustomComponentDemo",
        "label": "Demo组件",
        "icon": "svgpicture",
        "iconContent":"",
        "propValue": {
          "flipHorizontal": false,
          "flipVertical": false,
          "url": "",
          "urlCK": ""
        },
        "hasEvents": [
          "onBeforeMount",
          "onMounted",
          "onBeforeUnmount",
          "onUnmounted",
          "onActivated",
          "onDeactivated",
          "onMouseClick",
          "onMouseDblClick"
        ],
        "style": {
          "width": 300,
          "height": 200
        }
       }
    ]
  }
]

TIP

groupName定义分组名，componentList定义分组下的组件集合

组件定义说明

属性	说明
component	全局注册的组件名称，需要唯一
label	组件名，不宜过长
icon	显示图标
iconContent	图标内容，svg形式。该属性有内容则忽略icon设置
propValue	组件属性对象，根据组件需要自定义
hasEvents	事件，罗列组件支持的事件，事件列表范围参考
style	组件属性，通常此处只设置宽和高

TIP

组件图标的处理逻辑，先判断iconfont属性是否有值，有值则按其配置的SVG标签内容加载，无属性或者空则进行后续判断。 其次icon可以是svg图标(即使用若依项目的svg图标，以svg开头比如"svgpicture",会加载icons/svg/pictur.svg)。不是svg开头支持图片配置，可以是data:image开头的base64图片，可以是路径指定的图片文件，也可以是https的网络图片。 最后当着普通iconfont处理

图片的形式示例

icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'  // base64

icon: 'https://example.com/icon.png'  // 网络路径

icon: '/src/assets/images/custom-icon.png'  // 本地路径

icon: './static/logo.png'  // 相对路径

注册到编辑器

在集成页面中调用 useVEStore() 注册分组：

import { useVEStore } from 'hflveditor3'
import { customComponents } from '@/custom-component/custom-component-def.js'

const veStore = useVEStore()

const registerCustomComponnets = () => {
  // 先清空旧分组，避免重复注册
  veStore.clearAllCompGroup()
  // 注册新分组（可传多个）
  veStore.registerCompGroups(customComponents)
}

在页面 onMounted 时执行：

onMounted(() => {
  registerCustomComponnets()
})

推荐目录结构

src/
  custom-component/
    CustomComponentDemo
      CustomComponentDemoAttr.vue
      CustomComponentDemo.vue
      CustomComponentDemoData.vue
    custom-component-def.js
  views/
    PageDesigner.vue

TIP

在编辑器中右侧区域对组件的属性和数据页签进行编辑时，需要提供对应的Attr和Data组件

常见问题

组件拖入后不显示

• 检查 component 是否正确引用 Vue 组件对象
• 检查 width / height 是否为有效数值

分组显示重复

• 注册前调用 veStore.clearAllCompGroup()
• 避免在多个 watch 或多次 mounted 中重复调用注册逻辑