frame-editor-preview 1.0.0

package/README.md

@@ -0,0 +1,118 @@
+<!--
+ * @Author: Huangjs
+ * @Date: 2021-05-10 15:55:29
+ * @LastEditors: Huangjs huangjinsong@easyway.net.cn
+ * @LastEditTime: 2025-09-18 10:50:57
+ * @Description: ******
+-->
+
+# @easyway/frame-editor
+
+## 安装方式
+
+npm install @easyway/frame-editor
+
+yarn add @easyway/frame-editor
+
+pnpm add @easyway/frame-editor
+
+## 使用方法
+
+### 全局使用：在 main.ts 引入
+
+```javascript
+import { FrameEditor, FramePreview } from '@easyway/frame-editor';
+const app = createApp(App)；
+app.use(FrameEditor);
+// app.use(FramePreview);
+// 或者
+// app.component('FrameEditor', FrameEditor);
+// app.component('FramePreview', FramePreview);
+```
+
+### 局部使用：在 App.vue 引入
+
+```html
+<script setup lang="ts">
+  import { FrameEditor, FramePreview } from '@easyway/frame-editor';
+</script>
+```
+
+### 在 template 中使用
+
+```html
+<frame-editor></frame-editor> <frame-preview></frame-preview>
+```
+
+## 帧编辑参数说明
+
+| 参数 | 说明 | 类型 |
+| ---- | ---- | ---- |
+|      |      |      |
+
+## 帧编辑示例
+
+```html
+<template>
+  <main>
+    <frame-editor></frame-editor>
+  </main>
+</template>
+
+<script setup lang="ts"></script>
+```
+
+## 帧预览参数说明
+
+| 参数         | 说明                                                                                              | 类型                                                        |
+| ------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
+| style        | props: 行内样式                                                                                   | CSSProperties 非必传                                        |
+| className    | props: 内部元素 class                                                                             | string 非必传                                               |
+| bgcolor      | props: 预览整体背景色                                                                             | string 非必传                                               |
+| xmlString    | props: 预览的 xml 字符串                                                                          | string 非必传                                               |
+| useLiveData  | props: 预览是否使用实时数据（比如动态表格数据）                                                   | boolean 非必传，不传默认 false                              |
+| autoPlay     | props: 是否自动切换帧（多个帧的时候设置自动切换，不设置会显示前一个后一个按钮手动切换）           | boolean 非必传，不传默认 false                              |
+| autoScale    | props: 是否自动切缩放，当帧的宽高超出外层元素宽高，指示是滚动条还是缩放                           | boolean 非必传，不传默认 false                              |
+| showElBorder | props: 帧内每个元素是否给一个边框                                                                 | boolean 非必传，不传默认 false                              |
+| selectedData | props: 预览中需要被选中的元素数据信息                                                             | PreviewSelectedData 非必传                                  |
+| fileBuffer   | props: 针对 ppt/word/image/video 四种元素，根据文件名称获取文件数据的方法                         | (fileName: string) => Promise(ArrayBuffer) 必传             |
+| action       | event: 单击或双击预览内部元素时会触发该事件（可在此事件中配合 selectedData 处理选中其他预览元素） | (type: PreviewEventType, data: PreviewSelectedData) => void |
+| change       | event: 帧自动播放活手动播放，帧切换时的事件                                                       | (index: number, data: FrameData) => void                    |
+
+```ts
+type PreviewEventType = 'click' | 'dblclick';
+type PreviewSelectedData = {
+  id: string; // 选中元素的 ID
+  key: string; // 选中元素在 xml 中 对应的标签名称
+  seq: number; // 选中元素的类型，xml 中的 TP 值
+  type: string; // 选中元素的类型，比如 image，richText，table 等
+  source: string; // 选中元素的设置的数据源值
+};
+```
+
+## 帧预览示例
+
+```html
+<template>
+  <frame-preview
+    :xmlString="pXmlString"
+    :useLiveData
+    :autoPlay="false"
+    :selectedData="selectedData"
+    :fileBuffer="fetchBuffer"
+    @action="handleAction" />
+</template>
+
+<script setup lang="ts">
+  import { ref, shallowRef, onMounted } from 'vue';
+  import { fetchBuffer } from '@/views/pis/frameEdit/frameEditApi';
+
+  const pXmlString = ref('');
+  const selectedData = shallowRef({});
+  const handleAction = (type, data) => {
+    if (type === 'click') {
+      selectedData.value = data;
+    }
+  };
+</script>
+```