元素工具条 plugin-view-ele-tools

约 991 字大约 3 分钟

...

2026-09-28

插件说明

元素被选中时在其上方显示悬浮工具条，按元素类型提供内置默认工具集（字号、字体样式、对齐、颜色、层级、克隆/复制、删除等），支持 resolveTools 回调完全自定义；可选底部尺寸标签（显示宽高 + 微调按钮），并可隐藏 resize-panel 原生宽高/删除按钮、显示元素坐标位置。纯 DOM 实现，无第三方依赖。

npm install @sv-print/plugin-view-ele-tools

import pluginViewEleTools from '@sv-print/plugin-view-ele-tools';

const plugins = [
  pluginViewEleTools({
    showSizeBox: true, // 选中元素底部显示尺寸标签
    sizeBoxUnit: 'mm',
    sizeBoxStep: 5,
  }),
];

示例代码

import pluginViewEleTools, { getDefaultTools } from '@sv-print/plugin-view-ele-tools';

await hiprint.register({
  plugins: [
    pluginViewEleTools({
      // image/table/html 默认工具中的「数据源」按钮需先安装 plugin-view-data-source
      resolveTools: (ctx) => {
        switch (ctx.elementType) {
          case 'image':
            return [
              {
                key: 'my-image-tool',
                title: '图片处理',
                icon: 'svicon sv-image',
                click: (ctx) => console.log('image:', ctx.currentEl),
              },
              // 通用操作: 删除
              {
                key: 'delete',
                title: '删除',
                icon: 'svicon sv-delete',
                click: (ctx) => {
                  ctx.selectEls.forEach((el) => el.panel.deletePrintElement(el));
                  ctx.refreshPageStructure();
                },
              },
            ];
          case 'text':
            return [
              ...getDefaultTools(), // 展开内置全量工具
              {
                key: 'my-extra',
                title: '自定义',
                icon: 'svicon sv-font-big',
                click: (ctx) => {
                  ctx.selectEls.forEach((el) => el.updateOption('fontSize', 20, false));
                  ctx.refreshPageStructure();
                },
              },
            ];
          default:
            return null; // 使用内置默认工具
        }
      },
    }),
  ],
});

高级用法

配置参数

参数	类型	默认	说明
`resolveTools`	`(ctx: ToolContext) => ToolItem[] \| null`	`null`	自定义工具集回调，返回 `null` 使用内置默认
`hideSizeBox`	`boolean`	`false`	隐藏 resize-panel 原生宽高显示
`hideDelBtn`	`boolean`	`false`	隐藏 resize-panel 删除按钮
`showSizeBox`	`boolean`	`false`	元素底部显示尺寸标签 + 微调按钮
`sizeBoxUnit`	`'pt' \| 'mm' \| 'px'`	`'pt'`	尺寸单位
`sizeBoxStep`	`number`	`1`	微调步长（内部自动换算为 pt 后调用 `updateOption('widthHeight')`）
`sizeBoxShowAdjust`	`boolean`	`true`	是否显示微调按钮
`maxWidth`	`string`	`'none'`	工具栏最大宽度
`elementTypeResolver`	`(el) => string`	`null`	自定义元素类型判断
`showPosition`	`boolean`	`false`	是否显示元素坐标位置

内置默认工具（按元素类型分发）

元素类型	默认工具
text	字体大小 / 字体样式 / 对齐 / 字体颜色 / 背景颜色 / 字体 / 层级 / 克隆 / 复制 / 删除
image	数据源 / 选择图片 / 层级 / 克隆 / 复制 / 删除
table / longText	字体大小 / 数据源 / 字体 / 颜色 / 对齐 / 层级 / 克隆 / 复制 / 删除
html	数据源 / 层级 / 克隆 / 复制 / 删除
hline / vline	线条颜色 / 线宽 / 层级 / 克隆 / 复制 / 删除
rect / oval	边框颜色 / 背景颜色 / 边框宽度 / 层级 / 克隆 / 复制 / 删除
未知类型	层级 / 克隆 / 复制 / 删除

ToolItem / ToolChild 结构

ToolItem：{ key, title?, icon?, click?, children?, subMenuDirection?, subMenuType?, getFontList?, gap?, hidden?, className?, singleOnly?, multiOnly?, display? }

ToolChild（children 子项）：{ key?, title, icon?, click?, type?: 'range'|'select'|'color'|'font', min?, max?, value?, options?, change?, optionName? }

ToolContext 结构

属性	说明
`selectEls`	当前选中元素列表
`designerUtils` / `printTemplate`	设计器工具对象 / 模板实例
`currentEl`	当前元素
`elementType` / `textType?`	元素类型 / 文本子类型
`refreshPageStructure()`	刷新页面结构（修改属性后调用）
`close()`	手动关闭工具栏和尺寸标签（删除元素后调用）

注意事项

image / table / html 默认工具中的「数据源」按钮调用 designerUtils.dataSource.showPicker，需先安装 plugin-view-data-source
尺寸标签格式：123pt × 45pt | 宽 [−] [+] 高 [−] [+]，左侧宽高值、竖线分隔、右侧微调按钮

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)