构建可拖拽元素

概念说明

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

组件参数props 中也有举例说明 组件参数中构建可拖拽元素

比如新建一个 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 查看所有的元素类型.

默认渲染

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

img.png

// vue3 为例
<template>
  <Designer :providers="providers">
  </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'})]);
</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>