构建可拖拽元素

概念说明

可拖拽元素由 "provider" 提供. 就是提供默认【新拖拽】出来元素的默认大小、参数及样式。

中也有举例说明

注意

默认的元素只有

文本(text) (可设置参数,渲染为二维码,条形码)
图片(image)
长文本(longText) (内容超过面板高度时,会自动分页)
表格(table) (内容超过面板高度时,会自动分页)
html(html)
横线(hline)
竖线(vline)
矩形(rect)
椭圆(oval)

如果需要扩展更多的元素, 可以参考

引入插件后,会自动插入默认 provider 中.

可通过 hiprint.ElementTypes.allElementTypes 查看所有元素类型.

查看支持的元素类型

const allTypes = new Set(hiprint.ElementTypes.allElementTypes.map((e)=>e.type))

比如新建一个 testProvider.js 文件, 里面的内容如下:

import {hiprint} from 'sv-print';
// 或 import { hiprint } from "@sv-print/hiprint"

export default function (options) {
  // 注意: 这里的 context 是 内部回调的.  
  // 上面的 options 才是我们自己 传的 参数
  var addElementTypes = function (context) {
    // 移除 旧的 testModule "元素"类型, 以避免重复
    context.removePrintElementTypes("testModule");
    // 添加 testModule "元素"类型
    context.addPrintElementTypes("testModule", [
      // PrintElementTypeGroup 分组 可添加多个
      new hiprint.PrintElementTypeGroup("常规", [
        {
          tid: "testModule.text", // 唯一 key
          type: "text", // 元素类型
          title: "文本", // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
          // field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除"
          // data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除"
          options: {
            title: options.title || "文本2", // 标题, "拖进设计器才会显示"
            field: "text", // 字段名称
            testData: "123", // 测试数据
          },
        },
      ]),
      // 辅助元素分组, 可添加多个
      new hiprint.PrintElementTypeGroup("辅助", [
        {
          tid: "testModule.hline",
          title: "横线",
          type: "hline",
        },
      ]),
    ]);
  };
  return {
    addElementTypes: addElementTypes,
  };
};

温馨提示

上面代码中:
testModule 是自定义的名称, 但是要保证唯一.
元素的 tid 也是自定义的, 但是要保证唯一.
所以推荐使用 testModule.text 这种格式. 以避免冲突.

可以在浏览器控制台输入 hiprint.ElementTypes 查看所有的元素类型.

默认渲染

渲染到设计器左侧拖拽元素内

// vue3 为例
<template>
  <Designer :providers="providers" :providerMap="providerMap">
  </Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {Designer} from '@sv-print/vue3';
  import testProvider from './testProvider.js';

  const providers = ref([testProvider({title: 'testModule'})]);
  const providerMap = ref({
    container: '.hiprintEpContainer', // 容器 $('.hiprintEpContainer')
    value: 'testModule' // testProvider 中 addPrintElementTypes("testModule") 定义的值
  });
</script>

默认渲染+渲染函数

// vue3 为例
<template>
  <Designer :providers="providers" :providerMap="providerMap" :clearProviderContainer="clearProviderContainer">
  </Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {Designer} from '@sv-print/vue3';
  import testProvider from './testProvider.js';

  const providers = ref([testProvider({title: 'testModule'})]);
  // 构建前先清空容器
  const clearProviderContainer = ref(true);
  const providerMap = ref({
    container: '.hiprintEpContainer', // 容器 $('.hiprintEpContainer')
    value: 'testModule', // testProvider 中 addPrintElementTypes("testModule") 定义的值
    // 可选,自定义渲染的 UI
    render: (list) => {
      let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
      list.forEach(function (item) {
        const box = globalThis.$(`
          <div class="draggable-ele-group">
            <span class="title">${item.name}</span>
            <div class="list"></div>
          </div>
          `);
        const typeList = box.find('.list');
        item.printElementTypes.forEach(function (t) {
          typeList.append(`
              <div class="draggable-ele ep-draggable-item" tid=${t.tid}>
                <i class="svicon sv-base sv-${t.type}"></i>
                <p style="white-space:nowrap">${t.getText()}</p>
              </div>
          `);
        });
        container.append(box);
      });
      return container;
    },
  });
</script>

自定义UI渲染

渲染到设计器左侧拖拽元素内

// vue3 为例
<template>
  <Designer :providers="providers" :tags="tags">
    <!-- 拖拽元素插槽 -->
    <template #draggableEls>
      <!-- class tid 是关键: 决定拖拽出来的 默认大小,样式 -->
      <div class="draggable-item" tid="testModule.text">
        <div>这是图标</div>
        <div>文本(描述)</div>
      </div>
      <!-- class tid 是关键 -->
      <div class="draggable-item" tid="testModule.hline">
        <div>这是图标</div>
        <div>这是描述</div>
      </div>
    </template>
  </Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {hiprint} from 'sv-print';
  import {Designer} from '@sv-print/vue3';
  import testProvider from './testProvider.js';

  const providers = ref([testProvider({title: 'testModule'})]);
  const tags = ref(['.draggable-item',]);

  // provider, ui是异步渲染的. 可以等待渲染完成后 手动初始化,让元素可拖拽
  onMounted(() => {
    const items = $('.draggable-item');
    // 构建前,查看 dom 是否渲染完毕
    // 如果还没挂载，那么肯定是找不到的
    console.log(items);
    // 初始化 可拖拽的元素 
    hiprint.PrintElementTypeManager.buildByHtml(items);
  });
</script>

自定义UI渲染到其他地方

可以渲染到自己的容器内.

// vue3 为例
<template>
  <Designer :providers="providers" :tags="tags">
    <template #other>
      <!-- class tid 是关键: 决定拖拽出来的 默认大小,样式 -->
      <div class="draggable-item draggable-ele" tid="testModule.text">
        <div>这是图标</div>
        <div>文本(描述)</div>
      </div>
      <!-- class tid 是关键 -->
      <div class="draggable-item ibujian" tid="testModule.hline">
        <div>这是图标</div>
        <div>这是描述</div>
      </div>
    </template>
  </Designer>
</template>
<script setup lang="ts">
  import {onMounted, ref} from 'vue';
  import {hiprint} from 'sv-print';
  import {Designer} from '@sv-print/vue3';
  import testProvider from './testProvider.js';

  const providers = ref([testProvider({title: 'testModule'})]);
  const tags = ref(['.draggable-ele', '.ibujian']);
  
  // provider, ui是异步渲染的. 可以等待渲染完成后 手动初始化,让元素可拖拽
  onMounted(() => {
    const items = $('.draggable-item');
    // 构建前,查看 dom 是否渲染完毕
    // 如果还没挂载，那么肯定是找不到的
    console.log(items);
    // 初始化 可拖拽的元素 
    hiprint.PrintElementTypeManager.buildByHtml(items);
  });
</script>