关于前端:vuepluginhiprint如何自定义可拖拽元素-provider

上一篇 >【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 初始化后，咱们就能够抉择 渲染模式 了。

1. 依据 tid 齐全自定义可拖拽 打印元素
2. 依据 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 挂载后 去执行对应代码，否则就容易呈现，无奈拖拽 的问题。