拖拽元素基础使用
默认渲染
渲染到设计器左侧 拖拽元素内
provider.js
import { hiprint } from 'sv-print';
// 或 import { hiprint } from "@sv-print/hiprint"
export default function (options) {
// 注意: 这里的 context 是 内部回调的.
// 上面的 options 才是我们自己 传的 参数
var addElementTypes = function (context) {
// 移除 旧的 testModule "元素"类型, 以避免重复
context.removePrintElementTypes('testModule');
// 添加 testModule "元素"类型
context.addPrintElementTypes('testModule', [
// PrintElementTypeGroup 分组 可添加多个
new hiprint.PrintElementTypeGroup('常规', [
{
tid: 'testModule.text', // 唯一 key
type: 'text', // 元素类型
title: '文本', // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
// field: 'text' // 这里和 options 中的 field 一样。优先级高于 options 的, "无法彻底删除"
// data: "1111", // 这里和 options 中的 testData 一样。会有冲突, "无法彻底删除"
options: {
title: options.title || '文本2', // 标题, "拖进设计器才会显示"
field: 'text', // 字段名称
testData: '123', // 测试数据
},
},
]),
// 辅助元素分组, 可添加多个
new hiprint.PrintElementTypeGroup('辅助', [
{
tid: 'testModule.hline',
title: '横线',
type: 'hline',
},
]),
]);
};
return {
addElementTypes: addElementTypes,
};
}designer.vue
<template>
<!-- 宽高自定义 [!code word:providerMap] -->
<div style="width: 100vw; height: 100vh">
<Designer :providers="providers" :providerMap="providerMap"></Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
import testProvider from './testProvider.js';
const providers = ref([testProvider({ title: 'testModule' })]);
const providerMap = ref({
container: '.hiprintEpContainer', // 容器 $('.hiprintEpContainer')
value: 'testModule', // testProvider 中 addPrintElementTypes("testModule") 定义的值
});
</script>默认渲染+渲染函数
// vue3 为例
<template>
<!-- 宽高自定义 [!code word:providerMap] -->
<div style="width: 100vw; height: 100vh">
<Designer
:providers="providers"
:providerMap="providerMap"
:clearProviderContainer="clearProviderContainer"
></Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
import testProvider from './testProvider.js';
const providers = ref([testProvider({ title: 'testModule' })]);
// 构建前先清空容器
const clearProviderContainer = ref(true);
const providerMap = ref([
{
container: '.hiprintEpContainer', // 容器 $('.hiprintEpContainer')
value: 'defaultModule', // 默认的 provider 名称
render: null, // 默认渲染样式
},
// clearProviderContainer 为 true 时, 会先清空容器
// 也就是说，上面的 defaultModule 会被清空
{
container: '.hiprintEpContainer', // 容器 $('.hiprintEpContainer')
value: 'testModule', // testProvider 中 addPrintElementTypes("testModule") 定义的值
// 可选,自定义渲染的 UI
render: (list) => {
let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
list.forEach(function (item) {
const box = globalThis.$(`
<div class="draggable-ele-group">
<span class="title">${item.name}</span>
<div class="list"></div>
</div>
`);
const typeList = box.find('.list');
item.printElementTypes.forEach(function (t) {
typeList.append(`
<div class="draggable-ele ep-draggable-item" tid=${t.tid}>
<i class="svicon sv-base sv-${t.type}"></i>
<p style="white-space:nowrap">${t.getText()}</p>
</div>
`);
});
container.append(box);
});
return container;
},
},
]);
</script>providerJson+渲染函数
providerJson.js
export default [
{
name: 'testModule', // 唯一标识
list: [
{
name: '常规', // 分组名称，根据内容分类展示
printElementTypes: [
{
tid: 'testModule.text',
type: 'text',
title: '文本',
options: { title: '文本', field: 'text', testData: '123' },
},
{
tid: 'testModule.image',
type: 'image',
title: '图片',
options: { width: 100, height: 100 },
},
{
tid: 'testModule.barcode',
type: 'text',
title: 'barcode',
options: { textType: 'barcode', width: 100, height: 30 },
},
{
tid: 'testModule.qrcode',
type: 'text',
title: 'qrcode',
options: { textType: 'qrcode', width: 50, height: 50 },
},
{ tid: 'testModule.longText', type: 'longText', title: '长文' },
{
tid: 'testModule.table',
type: 'table',
title: '表格',
field: 'table',
columnFields: [
{
text: '姓名',
field: 'name',
},
{
text: '性别',
field: 'gender',
},
{
text: '数量',
field: 'count',
},
{
text: '金额',
field: 'amount',
},
],
columns: [
[
{
title: '姓名',
align: 'left',
field: 'name',
width: 100,
},
{
title: '性别',
field: 'gender',
width: 100,
},
{
title: '销售数量',
field: 'count',
width: 100,
},
{
title: '销售金额',
field: 'amount',
width: 100,
},
],
],
},
{
tid: 'testModule.html',
type: 'html',
title: 'html',
options: {
formatter:
'function(data, options) {\n return \'<div style="height:50pt;width:50pt;background:red;border-radius:50%;"></div>\';\n}',
},
},
{
tid: 'testModule.pageBreak',
type: 'text',
title: '分页符',
options: {
hideTitle: true,
color: '#ff0000',
textAlign: 'center',
pageBreak: true,
showInPage: 'none',
},
},
],
},
{
name: '辅助',
printElementTypes: [
{ tid: 'testModule.hline', title: '横线', type: 'hline' },
{ tid: 'testModule.vline', title: '竖线', type: 'vline' },
],
},
],
},
];designer.vue
<template>
<!-- 宽高自定义 [!code word:providerMap] -->
<div style="width: 100vw; height: 100vh">
<Designer :providerJson="providerJson" :providerRender="providerRender"></Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';
import providerJson from './providerJson.js';
const providerJson = ref(providerJson);
// 可以把这个封装一下，方便换皮~
const providerRender = ref((list) => {
let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
list.forEach(function (item) {
const box = globalThis.$(`
<div class="draggable-ele-group">
<span class="title">${item.name}</span>
<div class="list"></div>
</div>
`);
const typeList = box.find('.list');
item.printElementTypes.forEach(function (t) {
typeList.append(`
<div class="draggable-ele ep-draggable-item" tid=${t.tid}>
<i class="svicon sv-base sv-${t.type}"></i>
<p style="white-space:nowrap">${t.getText()}</p>
</div>
`);
});
container.append(box);
});
return container;
});
</script>自定义UI渲染
渲染到设计器左侧 拖拽元素内。渲染函数也是可以做到的
<template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer :providers="providers" :tags="tags">
<!-- 拖拽元素插槽 -->
<template #draggableEls>
<!-- [!code word:draggable-item] 包含 ep-draggable-item 才能拖入画布中 // -->
<!-- class tid 是关键: 决定拖拽出来的 默认大小,样式 // -->
<div class="ep-draggable-item draggable-item" tid="testModule.text">
<div>这是图标</div>
<div>文本(描述)</div>
</div>
<!-- [!code word:draggable-item] 包含 ep-draggable-item 才能拖入画布中 // -->
<!-- class tid 是关键 -->
<div class="ep-draggable-item draggable-item" tid="testModule.hline">
<div>这是图标</div>
<div>这是描述</div>
</div>
</template>
</Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { hiprint } from 'sv-print';
import { Designer } from '@sv-print/vue3';
import testProvider from './testProvider.js';
const providers = ref([testProvider({ title: 'testModule' })]);
const tags = ref(['.draggable-item']);
// provider, ui是异步渲染的. 可以等待渲染完成后 手动初始化,让元素可拖拽
onMounted(() => {
const items = $('.draggable-item');
// 构建前,查看 dom 是否渲染完毕
// 如果还没挂载，那么肯定是找不到的
console.log(items);
// 初始化 可拖拽的元素
hiprint.PrintElementTypeManager.buildByHtml(items);
});
</script>自定义UI渲染到其他地方
可以渲染到自己的容器内.
<template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer :providers="providers" :tags="tags">
<template #other>
<!-- [!code word:draggable-item] 包含 ep-draggable-item 才能拖入画布中 // -->
<!-- class tid 是关键: 决定拖拽出来的 默认大小,样式 // -->
<div class="ep-draggable-item draggable-item draggable-ele" tid="testModule.text">
<div>这是图标</div>
<div>文本(描述)</div>
</div>
<!-- class tid 是关键 -->
<div class="ep-draggable-item draggable-item ibujian" tid="testModule.hline">
<div>这是图标</div>
<div>这是描述</div>
</div>
</template>
</Designer>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { hiprint } from 'sv-print';
import { Designer } from '@sv-print/vue3';
import testProvider from './testProvider.js';
const providers = ref([testProvider({ title: 'testModule' })]);
const tags = ref(['.draggable-ele', '.ibujian']);
// provider, ui是异步渲染的. 可以等待渲染完成后 手动初始化,让元素可拖拽
onMounted(() => {
const items = $('.draggable-item');
// 构建前,查看 dom 是否渲染完毕
// 如果还没挂载，那么肯定是找不到的
console.log(items);
// 初始化 可拖拽的元素
hiprint.PrintElementTypeManager.buildByHtml(items);
});
</script>Header中添加拖拽元素
<template>
<!-- 宽高自定义 -->
<div style="width: 100vw; height: 100vh">
<Designer :headerNewEle="headerNewEle" :headerEleList="headerEleList" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Designer } from '@sv-print/vue3';
const headerNewEle = ref(false); // 是否重新 创建元素
const headerEleList = ref([
{
gap: true, // 间隔
},
{
icon: 'sv-base',
title: '基础',
children: [
{
type: 'defaultModule.hline', // provider tid
icon: 'sv-hline',
title: '横线',
},
],
},
]);
</script>版权所有
版权归属：