@embedpdf-editor/vue3-chapter-viewer 0.3.1 → 0.3.3

package/README.md

@@ -243,6 +243,83 @@ usePdfiumEngine({ wasmUrl: '/assets/pdfium.wasm', worker: true });
 
 使用 `worker: true` 时，部署环境需要允许 worker 加载 wasm。若只在 worker 模式失败，可先用 `worker: false` 定位资源或响应头问题。
 
+## `features` 自定义：划线样式、删除菜单、图标
+
+与 React 包相同，通过 `options.features` 配置。类型见 `@embedpdf-editor/vue3-chapter-viewer`（来自 `chapter-viewer`）。
+
+### 划线颜色、粗细与位置
+
+```ts
+features: {
+  markup: {
+    styles: {
+      highlight: { color: '#fef08a', opacity: 0.45 },
+      underline: { color: '#dc2626', thickness: 1.5, offsetY: 2.5 },
+      squiggly: { color: '#dc2626', thickness: 1.5, offsetY: 4 },
+      strikeout: { color: '#64748b', offsetY: 0 },
+    },
+  },
+},
+```
+
+`offsetY` 为 PDF 点、正值向下；波浪线默认 `4`，减轻盖住字形。`markup: false` 关闭划线。
+
+### 点击已有划线：删除
+
+选中高亮/下划线/波浪线/删除线后，默认在标注下方显示「删除」。可自定义：
+
+```ts
+import { h } from 'vue';
+
+features: {
+  markup: {
+    annotationMenu: {
+      renderMenu: ({ onDelete }) =>
+        h('button', { type: 'button', onClick: onDelete }, '移除'),
+    },
+  },
+},
+```
+
+`PdfChapterViewport` 上传 `annotation-selection-menu` 时宿主优先，未渲染时再回退默认删除菜单。
+
+### 笔记、书签图标
+
+```ts
+import { h } from 'vue';
+
+features: {
+  notes: {
+    marker: {
+      renderIcon: () => h('img', { src: '/icons/note.svg', width: 20, height: 20 }),
+      iconSize: 22,
+      renderMenuActions: ({ onEdit, onDelete }) =>
+        h('div', [
+          h('button', { onClick: onEdit }, '编辑'),
+          h('button', { onClick: onDelete }, '删除'),
+        ]),
+    },
+  },
+  bookmarks: {
+    marker: { renderIcon: () => h('img', { src: '/icons/bookmark.svg' }) },
+    hover: { renderAddIcon: () => h('span', '＋') },
+  },
+},
+```
+
+### 选区工具栏
+
+```ts
+features: {
+  selectionToolbar: {
+    hiddenBuiltinActions: ['strikeout'],
+    extraActions: [{ id: 'cite', label: '引用', order: 10 }],
+  },
+},
+```
+
+配合 `ChapterPdfViewer` 的 `@extra-selection-action` 或 `build-selection-menu`。
+
 ## 进阶组合
 
 内置 `ChapterPdfViewer` 已完成插件注册和章节视口渲染。需要插入自定义 shell、目录、工具栏或直接访问 registry 时，可以使用低层组合：