史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件

哈喽哇!我是小不不简说的不。在代码世界疯狂蹦跶的 "非资深选手"🙋‍♂️!主打一个*"踩坑我来,避坑你学"*。毕竟独乐乐不如众乐乐,让大家少走弯路,才是咱的终极使命✨~

sv-print 可视化打印设计器 迎来重大更新!适配移动端啦~ 虽然功能不是很完美,但是确实很能打!

移动端可能不存在设计打印模板的情况,但是~ 有这功能和不用是两回事☺️

更多使用文档,可访问网站www.ibujian.cn/svp查看。

更新日志:

🌈 调整优化 支持触摸事件 & 适配移动端UI

🌈 新增支持 touchZoom 方法,以适配移动端预览双指缩放

js 复制代码
const box = globalThis.$("#preview_content .hiprint-printPaper");
const ww = window.innerWidth - 64; // 64: 边距
const tw = box.width();
const zoom = Math.round((ww / tw) * 100) / 100;
box.css({
  transform: `scale(${zoom})`,
  "transform-origin": "0px 0px",
});
globalThis.$(box).touchZoom({
  minScale: 0.2,
  maxScale: 6.0,
  transform: true, // 启用 transform 缩放
});

🌈 新增支持 ${paperNo} ${paperCount} 和 ${field} 值替换

🌈 新增支持 addPrintElementToPaperByTid 根据 tid 添加元素

js 复制代码
printTemplate?.addPrintElementToPaperByTid("defaultModule.text");
// 添加到指定位置 pt
const left = 10;
const top = 30;
printTemplate?.addPrintElementToPaperByTid("defaultModule.text", left,top);

🌈 新增支持 providerMap 支持传自定义渲染函数

js 复制代码
const providerMap = ref({
    container: '.hiprintEpContainer',
    value: 'defaultModule',
    render: (list) => {
      let container = globalThis.$('<div class="hiprint-printElement-type"></div>');
      // xxx
      return container;
    },
});

hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule', (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;
});

🌈 调整优化 setElsAlign 支持对齐纸张;单项默认对齐纸张, 多选按住 ctrl/command 键可批量对齐

js 复制代码
printTemplate?.setElsAlign("left", true);
printTemplate?.setElsAlign("right", true);

🌈 调整优化 锁定元素 禁止调整大小 & 全局配置 disableNoDraggableSize 默认 true

js 复制代码
hiprint.setConfig({
  disableNoDraggableSize: false, // 锁定元素,可编辑属性 宽高大小
})

🌈 调整新增 buildPagination 构建多面板菜单

js 复制代码
// 手动构建多面板菜单
printTemplate.buildPagination("#printPanels");

✨ 优化 导出PDF,导出图片部分元素清晰度 & 导出图片支持 quality: 0~1

✨ 优化 双击编辑功能(可编辑为html)

✨ 优化 删除元素逻辑(锁定元素,全选元素) & 右键菜单删除情况

✨ 优化 预览支持设置是否隐藏 导出图片,导出PDF以及直接打印按钮

✨ 优化 全选时触发元素选中事件

✨ 优化 designer 组件传 template 为模板对象时,默认事件处理

✨ fix setConfig 方法可能导致 tab 显示错误问题

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui