@easyway/frame-editor

安装方式

npm install @easyway/frame-editor

yarn add @easyway/frame-editor

pnpm add @easyway/frame-editor

使用方法

全局使用：在 main.ts 引入

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 引入

<script setup lang="ts">
  import { FrameEditor, FramePreview } from '@easyway/frame-editor';
</script>

在 template 中使用

<frame-editor></frame-editor> <frame-preview></frame-preview>

帧编辑参数说明

| 参数 | 说明 | 类型 | | ---- | ---- | ---- | | | | |

帧编辑示例

<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 |

type PreviewEventType = 'click' | 'dblclick';
type PreviewSelectedData = {
  id: string; // 选中元素的 ID
  key: string; // 选中元素在 xml 中 对应的标签名称
  seq: number; // 选中元素的类型，xml 中的 TP 值
  type: string; // 选中元素的类型，比如 image，richText，table 等
  source: string; // 选中元素的设置的数据源值
};

帧预览示例

<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>