跳至主要內容

组件参数props

小不2025/5/28...大约 6 分钟sv-print可视化打印打印组件模板

基础参数

参数键名数据类型默认值说明备注
templateobject{}模板json数据也可传整个模板对象支持的参数
printDataobject{}打印数据(设计时打印预览)
templateKeystringdefault-template缓存键(设计保存存入localStorage的键)
titlestring默认模板导出文件默认名称:
模板模板.json
designOptionsobject{ grid: true }设计参数,显示网格线
autoConnectboolean``是否自动连接打印客户端即将废弃
设计页面可无需考虑
paperListstring[]默认纸张列表可选纸张列表,见下方参数说明
pluginsobject[]插件插件机制,扩展参数,扩展打印元素
见下方参数说明
authKeystring``授权key没有则有体验版水印

参数说明:

paperList
// vue3 为例
const paperList = ref([
  { type: 'A1', width: 594, height: 841 },
  { type: 'A2', width: 420, height: 594 },
  { type: 'A3', width: 297, height: 420 },
  { type: 'A4', width: 210, height: 297 },
  { type: 'A5', width: 148, height: 210 },
  { type: 'A6', width: 105, height: 148 },
  { type: 'A7', width: 74, height: 105 },
  { type: 'B1', width: 728, height: 1030 },
  { type: 'B2', width: 515, height: 728 },
  { type: 'B3', width: 364, height: 515 },
  { type: 'B4', width: 257, height: 364 },
  { type: 'B5', width: 182, height: 257 },
  { type: 'B6', width: 91, height: 182 },
  { type: 'B7', width: 64, height: 91 },
]);

构建可拖拽元素相关

参数键名数据类型默认值说明备注
providersobject[][]可拖拽元素 provider
providerMapobject|object[]{
container: ".hiprintEpContainer",
value: "defaultModule"
}		构建可拖拽元素的容器,provider的键
clearProviderContainerbooleantrue构建provider时 是否先清空容器
tagsstring[][".draggable-ele"]可拖拽元素 选择器

参数说明:

provider.js
import { hiprint } from 'sv-print';

export default function (options) {
  var addElementTypes = function (context) {
    context.removePrintElementTypes('ibujianModule'); // 避免重复添加
    context.addPrintElementTypes('ibujianModule', [
      new hiprint.PrintElementTypeGroup('i不简', [
        {
          tid: 'ibujianModule.text', // 唯一 key
          type: 'text', // 元素类型
          title: '文本', // 这里和 options 中的 title 一样。"拖拽时就显示" 优先级高于 options 的, "无法彻底删除"
          options: {
            // 参数同 模板json数据格式 中的 options, 可以不用指定 left, top
            title: '文本2', // 标题
            field: 'text', // 字段名
            testData: '123', // 测试数据
          },
        },
      ]),
    ]);
  };
  return {
    addElementTypes: addElementTypes,
  };
}

设计器函数重写

参数键名数据类型默认值说明备注
eventsobject{}保存,编辑模板,编辑打印数据,快捷键
onPreviewClickfunction(e: MouseEvent):boolean预览 点击事件返回 "true|false" 是否阻止冒泡
onImageChooseClickfunction(target: any)图片选择点击事件
onPanelAddClickfunction(panel, createPanel)多面板点击 "+" 事件
onFunctionClickfunction(option, printElement, event)函数/textarea点击事件

参数说明:

events事件
// vue3 为例
<template>
  <Designer :events="events"></Designer>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';

const events = ref({
  // 保存模板
  onSave: (key: string, data: unknown) => {
    console.log('保存模板');
    return true; // 返回 true 阻止冒泡
  },
  // 编辑模板
  onEdit: (data: unknown) => {
    console.log('编辑模板');
    return true; // 返回 true 阻止冒泡
  },
  // 编辑打印数据
  onEditData: (data: unknown) => {
    console.log('编辑打印数据');
    return true; // 返回 true 阻止冒泡
  },
  // 快捷键
  onKeyDownEvent: (e: KeyboardEvent, designerUtils: unknown) => {
    console.log('快捷键');
    return true; // 返回 true 阻止冒泡
  },
});
</script>

设计器回调

参数键名数据类型默认值说明备注
onDesignedfunction组件初始化完成回调见参数说明

参数说明:

回调示例
// vue3 为例
<template>
  <Designer @onDesigned="onDesigned"></Designer>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Designer } from '@sv-print/vue3';

const utils = ref();

const onDesigned = (e) => {
  console.log('注意看 onDesigned 回调参数: ');
  console.log(e);
  const { hiprint, designerUtils } = e.detail;
  console.log(hiprint);
  // 核心工具类, 单例对象
  utils.value = designerUtils;
  console.log(designerUtils);
  // 设计器的 模板对象
  console.log(designerUtils.printTemplate);

  // 示例: 更新模板json数据
  designerUtils.printTemplate.update({});
  // 示例: 导出模板json文件
  designerUtils.export();
};
</script>

UI样式参数

参数键名数据类型默认值说明备注
themestringlight默认主题
themeListstring[]支持的所有主题可选主题列表,见下方参数说明
showPanelsbooleantrue是显示多面板操作区域
headerLogoHtmlstring<i class="svp-header-logo svicon sv-print"></i>默认 Header 左侧logo样式需authKey
headerTitlestringsv-print默认 Header title需authKey
miniMapOriginModebooleanfalse概览图原始模式
previewOptionsobject{}预览参数
styleOptionobject{}默认小组件样式,位置
showOptionobject{}Header,Toolbar,Footer显示控制

参数说明:

themeList
// vue3 为例
const themeList = ref([
  'light',
  'dark',
  'cupcake',
  'bumblebee',
  'emerald',
  'corporate',
  'synthwave',
  'retro',
  'cyberpunk',
  'valentine',
  'halloween',
  'garden',
  'forest',
  'aqua',
  'lofi',
  'pastel',
  'fantasy',
  'wireframe',
  'black',
  'luxury',
  'dracula',
  'cmyk',
  'autumn',
  'business',
  'acid',
  'lemonade',
  'night',
  'coffee',
  'winter',
]);
最近更新：
贡献者: Canim