上一篇 > 【vue-plugin-hiprint】打印设计器的装置及应用
对于 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 看一下：
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';
// 自定义的 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挂载后去执行对应代码，否则就容易呈现，无奈拖拽的问题。
发表回复