vue-plugin-hiprint开发记录三（构建设计器）

构建设计器（设计器是打印设计的画布，将上述可拖拽的元素拖入到设计器中即可进行打印模板的设计）

1.编写设计器html

<div class="flex-5 center">
  <!-- 设计器的 容器 -->
  <div id="hiprint-printTemplate"></div>
</div>

2.初始化设计器

<script setup>
import { onMounted } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";

onMounted(() => {
  buildDesigner();
});
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
let hiprintTemplate;
const buildDesigner = () => {
  // eslint-disable-next-line no-undef
  $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
  hiprintTemplate = new hiprint.PrintTemplate({
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
  });
  // 构建 并填充到 容器中
  hiprintTemplate.design("#hiprint-printTemplate");
};
</script>

注意：必须要在 onMounted 中去构建设计器。因为要先查找到该 容器。

其中 hiprintTemplate.design("#hiprint-printTemplate") 就是去执行构建。传入的参数是 jquery 选择器。同理 settingContainer 也是插入 jquery 选择器。

当执行完design后，我们将看到如下：