Yh-hiprint NPM

yh-hiprint

力控远海技术中心封装的 hiprint

当前教程匹配 2+ 版本

安装

配置好云效NPM私有仓库后,直接执行如下命令安装

npm install yh-hiprint

使用

安装并引入设计器

main.js（main.ts） 中

import yhHiprint from "yh-hiprint";
// ……
  const app = createApp(App);
//……
  app.use(yhHiprint, {
    router,
    pinia,
    isAdmin,
  });
//……
  app.use(pinia);
  app.use(router);
  app.use(ElementPlus);

预览页面配置

新增预览页入口html

hiprint/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <title>力控元海</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/layout/hiprint/hiprint.js"></script>
  </body>
</html>

新增预览页入口js

src/layout/hiprint/hiprint.js

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";
import { setTitle } from "@/libs/util";
import "element-plus/dist/index.css";

import App from "yh-hiprint/hiprint.vue";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/preview",
    },
    {
      path: "/preview",
      name: "printView",
      meta: {
        title: "打印",
      },
      component: () => import("yh-hiprint/hiprintPreview.vue"),
    },
  ],
});

router.beforeEach((to, from, next) => {
  next();
});

router.afterEach((to) => {
  setTitle(to);
  window.scrollTo(0, 0);
});
const app = createApp(App);
app.use(router);
app.mount("#app");

配置对应的vite 入口

vite-.config.js

// ……
export default defineConfig({
  // ……
  build: {
    // ……
    rollupOptions: {
      // ……
      input: {
        // ……
        hiprint: path.resolve(__dirname, "hiprint/index.html"),
      },
    },
  },
});

预览调用方法

// 如果是自己的组件中则需要自己引入,slw 脚本中是不需要自己引入的，slw已经处理
const hiprint = inject("$hiprint")

// 三个可选参数必须有一个
hirpint({
  code: "xxxxxx", // 必选
  params: {...}, // 可选
  data: {...} | [{...},...], // 可选
  isCustom: true | false, // 可选 
})