上一篇 > 【vue-plugin-hiprint】打印设计器的装置及应用
对于 provider
- 是可拖拽打印元素的要害，
必须先初始化 - 可定义多个 provider
- 反对动静增加，动静更新
首先咱们须要了解分明它的对象格局，例如：
export default function (options) { var addElementTypes = function (context) {}; return { addElementTypes: addElementTypes, };}看到上述代码，你是否明确了呢？
没明确没关系，往下看 ↓
// 导出一个 function 传入 optionsreturn 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 看一下：
context对象" title="回调的context对象">
重点在于 addPrintElementTypes、removePrintElementTypes这两个办法。
一个是增加打印元素，一个是删除打印元素(防止刷新从新增加)。
注：hiprint 官网提供的代码没有 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';// 自定义的 providerimport 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';// 自定义的 providerimport 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挂载后去执行对应代码，否则就容易呈现，无奈拖拽的问题。