jvs-draw 1.1.8 → 1.1.9

package/README.md

@@ -140,11 +140,51 @@ const handleSetData = () => {
     drawRef.value.setCanvasData(newData);
   }
 };
+
+// 配置画板 (如: 开启并自定义图片上传)
+const handleSetting = () => {
+  if (drawRef.value) {
+    drawRef.value.setConfig({
+      enableImageUpload: true, // 开启自定义图片上传
+      uploadImageFn: async (file: File) => {
+        // 在这里对接你自己的后端上传接口
+        const formData = new FormData();
+        formData.append('file', file);
+        // 假设的上传请求
+        // const res = await axios.post('/api/upload', formData);
+        // return res.data.url; 
+        
+        // 此处返回模拟的线上图片地址作为示例
+        return URL.createObjectURL(file);
+      }
+    });
+  }
+};
+</script>
+```
+
+};
 </script>
 ```
 
 *(注意：所有方法均需通过 `ref` 获取组件实例后调用，以支持多实例独立运行。)*
 
+### 4. 完整的可选配置项 (Config)
+
+通过组件暴露的 `setConfig` 方法，您可以传入以下参数来全局定制画板的 UI 显示及其他核心设置：
+
+| 配置项 | 类型 | 默认值 | 说明 |
+| :--- | :---: | :---: | :--- |
+| `showToolbar` | `boolean` | `true` | 是否显示左侧工具栏 (包含画笔、形状工具等) |
+| `showPropertiesPanel` | `boolean` | `true` | 是否显示右侧属性面板 (用于修改颜色、线宽等) |
+| `showBoardName` | `boolean` | `true` | 是否显示在左上角的画板名称标题 |
+| `showFooter` | `boolean` | `true` | 是否显示底部栏 (包含缩放、拖拽视口工具等) |
+| `editable` | `boolean` | `true` | 是否开启编辑模式。设为 `false` 画板进入纯浏览/只读模式，同时隐藏所有编辑相关工具栏 |
+| `loadFromLocal` | `boolean` | `true` | 初始化时是否优先从本地缓存读取画板数据（而非使用 `initialData` 传入的数据） |
+| `initialData` | `Object` | `undefined` | 初始画布数据对象。包含 `elements` (数组) 和 `appState` (对象) |
+| `enableImageUpload` | `boolean` | `false` | 是否开启自定义图片上传。如果为 `false`，图片则默认以内置的 Base64 (`data:image/...`) 形式随画板数据保存 |
+| `uploadImageFn` | `Function` | `undefined` | 开启图片上传时的实际拦截函数 `(file: File) => Promise<string>`，向远端抛出上传请求并返回远程图片的完整 URL 字符串 |
+
 ## 🧩 依赖说明
 
 - `vue` >= 3.x