You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
1 month ago
|
<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>
|