@dora-fe/print v1.0.0

@dora-fe/print

打印

如何使用

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; padding: 10px">
    <div style="border: 1px solid #999999">
      <div style="background-color: #f5f5f5">默认打印 demo</div>
      <VPrint />
    </div>

    <div style="border: 1px solid #999999">
      <div style="background-color: #f5f5f5">打印内容显示 + 自定义打印触发按钮</div>
      <VPrint
        ref="printRef"
        :show-print-button="false"
      >
        <div>我是打印内容（你看见我的效果就是打印出来的效果）</div>
      </VPrint>
      <button @click="onPrint">自定义打印触发按钮</button>
    </div>

    <div style="border: 1px solid #999999">
      <div style="background-color: #f5f5f5">页面不显示打印内容</div>
      <VPrint
        ref="print2Ref"
        :show-content="false"
        :show-print-button="false"
      >
        <div>我是打印内容（你在页面上看不见我，打印能看见我）</div>
      </VPrint>
      <button @click="onPrint2">自定义打印触发按钮</button>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";

import VPrint from "@dora-fe/print";

const printRef = ref(null);

async function onPrint() {
  await nextTick();
  printRef.value?.print();
}

const print2Ref = ref(null);
async function onPrint2() {
  await nextTick();
  print2Ref.value?.print();
}
</script>