Skip to content

Commit

Permalink
docs: 简化基础示例代码
Browse files Browse the repository at this point in the history
  • Loading branch information
@siaikin
siaikin committed Aug 26, 2024
1 parent a436ae4 commit d1e9524
Show file tree
Hide file tree
Showing 10 changed files with 120 additions and 153 deletions.
2 changes: 1 addition & 1 deletion docs/.vitepress/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default defineConfig({
]
},
{
text: "Usage",
text: "用法",
items: [
{ text: "基本用法", link: "/zh/guide/basic-usage" },
// { text: "Advanced Usage", link: "/guide/advanced-usage" },
Expand Down
34 changes: 2 additions & 32 deletions docs/examples/PrintByComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,7 @@ import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";
const componentRef = ref();
const state = reactive({
isLoading: false,
text: "old boring text"
});
const handleAfterPrint = () => {
console.log("`onAfterPrint` called"); // tslint:disable-line no-console
};
const handleBeforePrint = () => {
console.log("`onBeforePrint` called"); // tslint:disable-line no-console
};
const handleOnBeforeGetContent = () => {
console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
state.text = "Loading new text...";
state.isLoading = true;
return new Promise<void>((resolve) => {
setTimeout(() => {
state.text = "New, Updated Text!";
state.isLoading = false;
resolve();
}, 2000);
});
};
const state = reactive({ text: "old boring text" });
const getComponentToPrint = () => {
return componentRef.value;
Expand All @@ -44,16 +18,12 @@ const getComponentToPrint = () => {
<vue-to-print
:content="getComponentToPrint"
document-title="AwesomeFileName"
:on-after-print="handleAfterPrint"
:on-before-get-content="handleOnBeforeGetContent"
:on-before-print="handleBeforePrint"
remove-after-print
>
<template #trigger>
<button>Print using a Component</button>
<ion-button>Print</ion-button>
</template>
</vue-to-print>
<p v-if="state.isLoading" class="indicator">onBeforeGetContent: Loading...</p>
<div ref="componentRef">
<component-to-print :text="state.text" />
</div>
Expand Down
40 changes: 3 additions & 37 deletions docs/examples/PrintByHook.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,19 @@ import { reactive, ref } from "vue";
import ComponentToPrint from "./ComponentToPrint.vue";
const componentRef = ref();
const state = reactive({
isLoading: false,
text: "old boring text"
});
const handleAfterPrint = () => {
console.log("`onAfterPrint` called"); // tslint:disable-line no-console
};
const handleBeforePrint = () => {
console.log("`onBeforePrint` called"); // tslint:disable-line no-console
};
const handleOnBeforeGetContent = () => {
console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
state.text = "Loading new text...";
state.isLoading = true;
return new Promise<void>((resolve) => {
setTimeout(() => {
state.text = "New, Updated Text!";
state.isLoading = false;
resolve();
}, 2000);
});
};
const getComponentToPrint = () => {
return componentRef.value;
};
const state = reactive({ text: "old boring text" });
const { handlePrint } = useVueToPrint({
content: () => componentRef.value,
content: componentRef,
documentTitle: "AwesomeFileName",
onAfterPrint: handleAfterPrint,
onBeforeGetContent: handleOnBeforeGetContent,
onBeforePrint: handleBeforePrint,
removeAfterPrint: true
});
// #endregion script
</script>

// #region template
<template>
<button @click="handlePrint">Print using useVueToPrint hook</button>
<p v-if="state.isLoading" class="indicator">onBeforeGetContent: Loading...</p>
<ion-button @click="handlePrint">Print</ion-button>
<div ref="componentRef">
<component-to-print :text="state.text" />
</div>
Expand Down
42 changes: 4 additions & 38 deletions docs/examples/shadow-dom/PrintShadowDomByHook.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,19 @@ import { reactive, ref } from "vue";
import ShadowDomToPrint from "./ShadowDomToPrint.vue";
const componentRef = ref();
const state = reactive({
isLoading: false,
text: "old boring text"
});
const handleAfterPrint = () => {
console.log("`onAfterPrint` called"); // tslint:disable-line no-console
};
const handleBeforePrint = () => {
console.log("`onBeforePrint` called"); // tslint:disable-line no-console
};
const handleOnBeforeGetContent = () => {
console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
state.text = "Loading new text...";
state.isLoading = true;
return new Promise<void>((resolve) => {
setTimeout(() => {
state.text = "New, Updated Text!";
state.isLoading = false;
resolve();
}, 2000);
});
};
const getComponentToPrint = () => {
return componentRef.value;
};
const state = reactive({ text: "old boring text" });
const { handlePrint } = useVueToPrint({
content: () => componentRef.value,
content: componentRef,
documentTitle: "AwesomeFileName",
onAfterPrint: handleAfterPrint,
onBeforeGetContent: handleOnBeforeGetContent,
onBeforePrint: handleBeforePrint,
removeAfterPrint: false
removeAfterPrint: true
});
// #endregion script
</script>

// #region template
<template>
<button @click="handlePrint">Print using useVueToPrint hook</button>
<p v-if="state.isLoading" class="indicator">onBeforeGetContent: Loading...</p>
<ion-button @click="handlePrint">Print</ion-button>
<div ref="componentRef">
<shadow-dom-to-print :text="state.text" />
</div>
Expand Down
36 changes: 33 additions & 3 deletions docs/guide/api.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# API

## VueToPrint
## VueToPrint Component

### Props

| Name | Type | Description |
| :-----------------------: | :----------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| :-----------------------: | :----------------------------------------------------------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **`bodyClass?`** | `string` | One or more class names to pass to the print window, separated by spaces |
| **`content`** | `function` | A function that returns a component reference value. The content of this reference value is then used for print |
| **`content`** | `function` | A DOM element to print. |
| **`copyStyles?`** | `boolean` | Copy all `<style>` and `<link type="stylesheet" />` tags from `<head>` inside the parent window into the print window. (default: `true`) |
| **`documentTitle?`** | `string` | Set the title for printing when saving as a file |
| **`fonts?`** | `{ family: string, source: string; weight?: string; style?: string; }[]` | You may optionally provide a list of fonts which will be loaded into the printing iframe. This is useful if you are using custom fonts |
Expand All @@ -27,3 +27,33 @@
| :------------: | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **`default`** | `v-slot="{ handlePrint: () => void }"` | A function that returns a Vue Node or Element. `handlePrint` is a function that triggers the print dialog. |
| **`trigger?`** | `v-slot:trigger` | A function that returns a Vue Node or Element. Note: under the hood, we inject a custom `onClick` prop into the returned Component/Element. As such, do not provide an `onClick` prop to the root node returned by `trigger`, as it will be overwritten |

## useVueToPrint Hook

### Type Definitions

```typescript
declare function useVueToPrint(options: PublicUseVueToPrintProps): { handlePrint: () => void };

// content is required, other props are optional
declare type PublicUseVueToPrintProps = Partial<Omit<UseVueToPrintProps, "content">> & Pick<UseVueToPrintProps, "content">;

// See above for parameter descriptions
export interface UseVueToPrintProps {
bodyClass: MaybeRefOrGetter<string>;
content: MaybeRefOrGetter<HTMLElement>;
copyStyles: MaybeRefOrGetter<boolean>;
documentTitle: MaybeRefOrGetter<string>;
fonts: MaybeRefOrGetter<Font[]>;
onAfterPrint: MaybeRefOrGetter<() => void>;
onBeforeGetContent: MaybeRefOrGetter<() => void | Promise<void>>;
onBeforePrint: MaybeRefOrGetter<() => void | Promise<void>>;
onPrintError: MaybeRefOrGetter<(errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void>;
pageStyle: MaybeRefOrGetter<string | PropertyFunction<string>>;
print: MaybeRefOrGetter<(target: HTMLIFrameElement) => Promise<void>>;
removeAfterPrint: MaybeRefOrGetter<boolean>;
suppressErrors: MaybeRefOrGetter<boolean>;
nonce: MaybeRefOrGetter<string>;
}

```
21 changes: 12 additions & 9 deletions docs/guide/basic-usage.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,28 @@ import PrintByHook from "../examples/PrintByHook.vue";
import PrintShadowDomByHook from "../examples/shadow-dom/PrintShadowDomByHook.vue";
</script>

## Print using a component
## Print using hook (recommended)

<PrintByComponent />
<PrintByHook />

::: details Click to view code

::: code-group
<<< @/examples/PrintByComponent.vue#script{typescript} [script setup ts]
<<< @/examples/PrintByComponent.vue#template{html} [template]
<<< @/examples/PrintByHook.vue#template{html} [template]
<<< @/examples/PrintByHook.vue#script{typescript} [script setup ts]
<<< @/examples/PrintByHook.vue{vue} [all]
:::

## Print using hook
## Print using a component

<PrintByHook />
<PrintByComponent />

::: details Click to view code

::: code-group
<<< @/examples/PrintByHook.vue#script{typescript} [script setup ts]
<<< @/examples/PrintByHook.vue#template{html} [template]
<<< @/examples/PrintByComponent.vue#template{html} [template]
<<< @/examples/PrintByComponent.vue#script{typescript} [script setup ts]
<<< @/examples/PrintByComponent.vue{vue} [all]
:::

## Print [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
Expand All @@ -50,6 +52,7 @@ This example will print `Web Components` components from [Ionic](https://ionicfr
::: details Click to view code

::: code-group
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue#script{typescript} [script setup ts]
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue#template{html} [template]
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue#script{typescript} [script setup ts]
<<< @/examples/shadow-dom/PrintShadowDomByHook.vue{vue} [all]
:::
2 changes: 1 addition & 1 deletion docs/guide/get-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
$ npm install vue-to-print --save
```

```shell
```shell [pnpm]
$ pnpm add vue-to-print
```

Expand Down
Loading

0 comments on commit d1e9524

Please sign in to comment.