<template>
  <div>
    <div class="ep-draggable-item" />
    <div id="hiprint-printTemplate" />
    <div id="PrintElementOptionSetting" />
  </div>
</template>
<script>
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint';

console.log([new defaultElementTypeProvider()]);
hiprint.init({
  providers: [new defaultElementTypeProvider()]
});
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
let hiprintTemplate = new hiprint.PrintTemplate({
  template: {}, // 模板json
  settingContainer: '#PrintElementOptionSetting', // 元素参数容器
  history: true, // 是否需要 撤销重做功能
  onDataChanged: (type, json) => {
    // 模板发生改变回调
    console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
    console.log(json); // 返回 template
  },
  onUpdateError: (e) => {
    // 更新失败回调
    console.log(e);
  }
});
// 设计器的容器
hiprintTemplate.design('#hiprint-printTemplate');
</script>
<style scoped>
.ep-draggable-item, #hiprint-printTemplate, #PrintElementOptionSetting {
  display: inline-block;
  width: 300px;
  height: 100vh;
}
</style>
