vue-plugin-hiprint 如何自定义可拖拽元素 provider

2023年3月3日 1111点热度 0人点赞 0条评论

关于 provider

是「可拖拽打印元素」的关键，必须先初始化
可定义多个 「provider」
支持「动态添加」，「动态更新」

首先我们需要理解清楚它的对象格式，例如：

export  default  function (options) {
  var addElementTypes = function (context) {};
  return {
    addElementTypes: addElementTypes,
  };
}

看到上述代码，你是否明白了呢？

没明白没关系，往下看 ↓

// 导出一个 function 传入 options
return  function (options) {
  // 定义了一个 addElementTypes function 传入 context
  var addElementTypes = function (context) {};
  // 返回一个 object 包含一个 addElementTypes function
  return {
    addElementTypes: addElementTypes,
  };
}

上述代码转成 ES6 的 Class 你大概知道不呢？

如下 `Class`

class Provider {
  constructor(options) {}
  addElementTypes(context) {}
}
不知道你是否和你想的一样呢 😁

初始化 provider

defaultElementTypeProvider 是一个内置的 「provider」

import {defaultElementTypeProvider, hiprint} from 'vue-plugin-hiprint';

hiprint.init({
  // 看了上述的 ES6 Class 应该很清楚这里为什么要这么写了吧
  providers: [new defaultElementTypeProvider()]
});

那么什么时候去init呢？

「这个就需要根据项目实际情况了，比如：动态初始化，需要后端返回数据再 init ，比如：静态初始化：项目仅提供内置的 10 个 provider」

ok，我们现在再来看看 hiprint 内部是怎么来初始化这个 「provider」 的

// 代码位置约：9983 ~ 9987行
function mt(t) {
  p.a.instance.init(t), p.a.instance.providers.forEach(function (t) {
    // 关键在这里
    // 初始化的时候 去执行了 addElementTypes 方法
    t.addElementTypes(a.instance);
  });
}

所以很明显 init 传的 providers 是一个包含 addElementTypes 方法的 object 数组

创建 provider

清楚了 provider 对象格式，那么接下来就是真正的怎么去定义 「可拖拽打印元素」了

首先 addElementTypes 中回调了一个 context。那么可想而知，定义的方法肯定在这里面，我们先 log 看一下：

重点在于 addPrintElementTypes、removePrintElementTypes这两个方法。一个是添加打印元素，一个是删除打印元素(避免刷新重新添加)。

「注：hiprint 官网[1]提供的代码没有 removePrintElementTypes」

来看看实际示例：

import { hiprint } from 'vue-plugin-hiprint'

export  default  function (options) {
    var addElementTypes = function (context) {
      // 移除 旧的 defaultModule "元素"类型, 以避免重复
      context.removePrintElementTypes("defaultModule");
      // 添加 defaultModule "元素"类型
      context.addPrintElementTypes("defaultModule", [
        // PrintElementTypeGroup 分组
        // 如果使用 hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "defaultModule") 这里会渲染这个 "常规" 分组名称
        new hiprint.PrintElementTypeGroup("常规", [
          {
            tid: "defaultModule.text", // 唯一 key
            type: "text", // 元素类型
            title: "文本", // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
            // field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除"
            // data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除"
            options: {
              title: "文本2", // 标题, "拖进设计器才会显示"
              field: "text", // 字段名称
              testData: "123", // 测试数据
            },
          },
        ]),
        new hiprint.PrintElementTypeGroup("辅助", [
          {
            tid: "defaultModule.hline",
            title: "横线",
            type: "hline",
          },
        ]),
      ]);
    };
    return {
      addElementTypes: addElementTypes,
    };
  };
}

初始化自定义的打印元素

provider定义好了，调用init初始化后，我们就可以选择渲染模式了。

根据 tid 完全自定义可拖拽 打印元素
根据 provider 渲染对应的 打印元素

1.自定义模式

自定义模式就是自己写 UI 然后去绑定已初始provider中的tid。如下代码：

<template>
  <div class="hiprintEpContainer">
    <!-- 这个 ep-draggable-item 必须指定，底层代码必要包含它才能拖拽 -->
    <!-- 这个 defaultModule.text 就是先前 provider 中定义的 打印元素 -->
    <a class="ep-draggable-item" tid="defaultModule.text">
      <span class="iconfont icon-text"></span>
      <p class="desc">文本</p>
    </a>
    ... 此处省略 ...
  </div>
</template>
<script>
import { hiprint } from 'vue-plugin-hiprint';
// 自定义的 provider
import TestProvider from './test-provider';
export default {
  // 需要在 DOM 挂载后 再去渲染。
  mounted() {
    // 初始化 provider
    hiprint.init({
      providers: [new TestProvider()]
    });
    // 这就是为什么 需要在 DOM 挂载后 执行的原因
    // 如果还没挂载，那么肯定是找不到的
    var items = $('.ep-draggable-item')
    // 初始化 可拖拽的元素 
    hiprint.PrintElementTypeManager.buildByHtml(items);
  }
}
</script>

2.内部渲染模式

内部渲染模式就是指定一个容器把已初始provider中的打印元素信息渲染出来。如下代码：

<template>
  <!-- 这个 hiprintEpContainer 就是容器 -->
  <div class="hiprintEpContainer">
  </div>
</template>
<script>
import { hiprint } from 'vue-plugin-hiprint';
// 自定义的 provider
import TestProvider from './test-provider';
export default {
  // 需要在 DOM 挂载后 再去渲染。
  // 因为 hiprintEpContainer 是一个容器
  mounted() {
    // 初始化 provider
    hiprint.init({
      providers: [new TestProvider()]
    });
    // 这就是为什么 需要在 DOM 挂载后 执行的原因
    // 如果还没挂载，那么肯定是找不到的
    $('.hiprintEpContainer').empty(); // 先清空，避免重复渲染
    // 指定容器 .hiprintEpContainer 去渲染 defaultModule 元素组
    hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule');
  }
}
</script>

其中defaultModule就是我们在自定义provider定义的元素组

context.addPrintElementTypes("defaultModule", [])

初始化provider以及自定义provider的部分内容到此结束。

总结

一定要理解清楚provider对象格式，只有理解了才好去实现动态provider功能。「可拖拽元素」的初始化渲染一定需要等DOM挂载后去执行对应代码，否则就容易出现，无法拖拽的问题。

参考资料

[1] hiprint官网: http://hiprint.io/

原文标题：【vue-plugin-hiprint】如何自定义可拖拽元素 provider
原文链接：【vue-plugin-hiprint】如何自定义可拖拽元素 provider
原文快照：【vue-plugin-hiprint】如何自定义可拖拽元素 provider - PDF