上篇已简单介绍了 sv-print 组件库的一些基础知识，以及怎么引入它。本篇主要讲一讲 sv-print 组件库的参数及插槽。
先上效果图：
参数说明：ccsimple.github.io/sv-print-do…
渲染可拖拽元素
如下图，根据这三个参数即可实现
上才艺：
以 vue3 为例：
- 首先构建 可拖拽元素 provider
如果你不清楚，可以先看看自定义拖拽元素 ccsimple.github.io/sv-print-do…
provider1.js
import { hiprint } from "sv-print";
export const provider1 = function (options) {
console.log(options);
var addElementTypes = function (context) {
context.removePrintElementTypes("providerModule1");
context.addPrintElementTypes("providerModule1", [
new hiprint.PrintElementTypeGroup("常规", [
options.config,
{
tid: "providerModule1.header",
title: "单据表头",
data: "单据表头",
type: "text",
options: {
testData: "单据表头",
height: 17,
fontSize: 16.5,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
]),
]);
};
return {
addElementTypes: addElementTypes,
};
};
- 引入设计器组件，传入参数
<template>
<div style="width: 100vw; height: 100vh">
<Designer :providers="providers" :providerMap="providerMap" :clearProviderContainer="false" @onDesigned="onDesigned" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Designer } from "@sv-print/vue3";
// 自定义的 provider
import { provider1 } from "./provider1";
import { provider2 } from "./provider2";
const providers = ref([provider1(),provider2()]);
const providerMap = ref([
{
// 这是默认的 拖拽元素容器
container: ".hiprintEpContainer",
// provider 对应的键
value: "providerModule1",
},
{
// 这是默认的 拖拽元素容器
container: ".hiprintEpContainer",
// provider 对应的键
value: "providerModule2",
}
]);
const onDesigned = (e) => {
console.log("onDesigned");
// 注意看 回调值
console.log(e);
};
</script>
注意：clearProviderContainer 是控制同一个容器，是否先清空再渲染。
保存事件
<template>
<div style="width: 100vw; height: 100vh">
<Designer :events="events" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Designer } from "@sv-print/vue3";
const events = ref({
// 保存
onSave: (key, data) => {
console.log(data);
return true; // 是否阻止原有事件
},
// 编辑模板
onEdit: (data) => {
console.log(data);
return true; // 是否阻止原有事件
},
// 点击打印数据
onEditData: (data) => {
console.log(data);
return true; // 是否阻止原有事件
},
// 快捷键
onKeyDownEvent: (e: KeyboardEvent, designerUtils: DesignerUtils) => {
console.log(designerUtils);
return true; // 是否阻止原有事件
},
})
</script>
隐藏、调整小组件
如果觉得 拖拽元素、小地图、缩放等等工具栏位置，大小不合适，或者不想显示可使用下列两个参数
eg: 重写/隐藏 页面结构，隐藏 旋转工具
<template>
<div style="width: 100vw; height: 100vh">
<Designer :styleOption="styleOption" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Designer } from "@sv-print/vue3";
const styleOption = ref({
pageStructure: {
mode: "default", // 拖拽模式: default(默认), top(上), bottom(下), left(左), right(右), fixed(固定)
show: false, // 不显示
style: "right:210px;top:95px;width:220px;",
},
rotateTools: {
show: false, // 不显示
}
});
</script>
header插槽
头部不好看，或者有自定义需求，那就自己写一个咯。
<template>
<div style="width: 100vw; height: 100vh">
<Designer @onDesigned="onDesigned">
<template #header>
<div>
<div @click="preview">自定义 header 预览</div>
</div>
</template>
</Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Designer } from "@sv-print/vue3";
let dUtils; // 缓存工具类，其他方法可调用
const onDesigned = (e) => {
console.log("onDesigned");
// 注意看 回调值
console.log(e);
// 有很多方法都在 设计器工具类中 如：导入导出模板json文件、预览
const { designerUtils } = e.detail;
dUtils = designerUtils;
// designerUtils.import(); // 导入
// designerUtils.export(); // 导出
// eg: show(printData, {}, { callback: () => {...}})
// designerUtils.preview.show(); // 预览
// 模板对象
// designerUtils.printTemplate;
};
const preview = () => {
dUtils.preview.show();
}
</script>
总结
参数多不要怕，如果有不清楚的，已授权、获取源码的小伙伴可以随时联系我，咱们是一对一的技术支持。
如果看到这里，你还是疑问，想要一对一技术指导，欢迎私信联系我。
敬请期待下一篇：如何自定义、扩展 vue3、react 使用的组件。比如内置的 Header、Designer 组件等。
记得点个赞咯~
