vg-print 1.0.219 → 1.0.220

package/README.md

@@ -198,3 +198,78 @@ npm run build:lib# 组件库构建
 
 - 入口与导出：`packages/index.ts`
 - 完整页面组件：`src/views/index.vue`
+## 完整示例
+
+```vue
+<template>
+  <FullDesigner
+    :initial-template="tpl"
+    :initial-print-data="rows"
+    default-lang="cn"
+    :hi-host="host"
+    :hi-token="token"
+    :hi-auto-connect="true"
+    @save="onSave"
+  />
+
+  <div style="margin-top: 12px;">
+    <el-input v-model="host" placeholder="客户端地址，如 http://127.0.0.1:17521" style="width: 360px; margin-right: 8px;" />
+    <el-input v-model="token" placeholder="鉴权令牌" style="width: 200px; margin-right: 8px;" />
+    <el-button type="primary" @click="applyHostToken">应用连接参数</el-button>
+    <el-button style="margin-left:8px;" @click="preview">预览</el-button>
+    <el-button style="margin-left:8px;" @click="printBrowser">浏览器打印</el-button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 模板（示例）
+const tpl = {
+  panels: [
+    {
+      index: 0,
+      paperType: 'A4',
+      width: 210,
+      height: 297,
+      printElements: [
+        {
+          options: { left: 20, top: 20, title: '标题', field: 'title', fontSize: 18 },
+          printElementType: { type: 'text' }
+        },
+        {
+          options: { left: 20, top: 50, title: '姓名', field: 'name' },
+          printElementType: { type: 'text' }
+        }
+      ]
+    }
+  ]
+}
+
+// 数据（对象或数组均可）
+const rows = [{ title: '病理图文报告', name: '东东' }]
+
+// 连接参数
+const host = ref('http://127.0.0.1:17521')
+const token = ref('')
+
+// 组件引用
+const designer = ref(null)
+
+const applyHostToken = () => {
+  // 设置客户端地址与令牌，并尝试重连
+  designer.value?.setHiwebSocket(host.value, token.value)
+}
+
+// 预览与浏览器打印
+const preview = () => designer.value?.preView()
+const printBrowser = () => designer.value?.printView()
+
+// 保存事件：拿到模板与数据入库
+const onSave = ({ template, data, templateId }) => {
+  // 持久化示例
+  // await api.save({ template, data, templateId })
+  console.log('save payload:', { template, data, templateId })
+}
+</script>
+```