功能区按钮

本节介绍 HFLVEditor3 编辑器工具栏的功能按钮。

基础按钮

• 收缩: 收缩左右两侧区域，增大画布区域
• 新建: 新增一个画布Tab页签
• 打开: 触发打开回调，集成侧实现的打开功能
• 保存: 将当前设计导出为 JSON。触发保存回调，集成侧实现的保存功能
• 预览: 实时查看渲染效果，触发预览回调，集成侧实现的预览功能
• 撤销/重做: 历史操作控制
• 清空: 清空当前画布
• 删除: 删除当前选择组件
• 组合/拆分: 对选区内组件进行组合/拆分操作
• 锁定/解锁: 对选择组件进行锁定/解锁操作
• 画布设置: 设置画布的基础信息
• 其他设置: 设置编辑器的其他参数
• 选区设置: 对选区组件进行其他操作

自定义按钮

除前面编辑器固定的按钮外，还支持自定义工具栏按钮。以数组的形式进行注册，按钮对象包含title(按钮的提示信息),name(按钮名称),code(按钮唯一标识),needDataFlag(按钮点击回调时是否携带当前页面数据),content(按钮的svg图标内容)。

let customButtons = [
    {
      title: '站号选择',
      name: 'stationSelect',
      code: 'stationSelect',
      needDataFlag: 'Y',
      content: '<svg t="1768011450071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7443"><path d="M791.9 618.1V483.6H531.3v-77.8h127.6V104.6H357.7v301.2h127.6v77.8H234.7v134.5H104.5v301.2h301.2V618.1h-125v-88.5h465.2v88.5H618.3v301.2h301.2V618.1H791.9zM403.7 150.6h209.2v209.2H403.7V150.6z m-44 722.8H150.5V664.1h209.2v209.3z m513.8 0H664.3V664.1h209.2v209.3z" p-id="7444"></path></svg>'
    }
  ];
  veStore.registerCustomButtons(customButtons)

点击自定义按钮时触发编辑器的@clickCustomButton="clickCustomButton"，参数data中code即为按钮注册时的code，用于区分点击的按钮。

<VEEditor ref="veEditorRef" @import-json="importJson" @export-json="exportJson"
      @preview="preview" @open-page="openPage"
      @save-page="savePage" @clickCustomButton="clickCustomButton"></VEEditor>


const clickCustomButton = (data) => {
  if (data && data.code == 'stationSelect') {
    stationSelectRef.value?.show();
  }
}

TIP

自定义按钮点击回调函数的参数中返回注册时的code，因此需要保持唯一区分