Skip to content

Commit 4825629

Browse files
wingkwongwingkwong
authored
Merge pull request #13 from watermarkify/develop
0.0.2 Release
2 parents 29245dc + 0976965 commit 4825629

23 files changed

+343
-115
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/**
2+
docs/**

‎.eslintrc‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"root": true,
3-
"env": {
4-
"es6": true,
5-
"browser": true,
6-
"node": true,
7-
},
8-
"extends": ["@antfu/eslint-config-ts"],
9-
"rules": {}
10-
}
2+
"root": true,
3+
"env": {
4+
"es6": true,
5+
"browser": true,
6+
"node": true
7+
},
8+
"extends": ["@antfu/eslint-config-ts"],
9+
"rules": {}
10+
}

‎.prettierignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
dist/**
2+
docs/**
3+
*.md
4+
*.yaml

‎.prettierrc.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"semi": false,
5+
"quoteProps": "consistent",
6+
"bracketSpacing": true,
7+
"printWidth": 130
8+
}

‎README.md‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @watermarkify/vue-watermark
22

3+
[![NPM version](https://img.shields.io/npm/v/@watermarkify/vue-watermark.svg)](https://www.npmjs.com/package/@watermarkify/vue-watermark) [![License](https://img.shields.io/npm/l/@watermarkify/vue-watermark.svg)](https://github.com/watermarkify/vue-watermark/blob/master/LICENSE) [![Total NPM Download](https://img.shields.io/npm/dt/@watermarkify/vue-watermark.svg)](https://www.npmjs.com/package/@watermarkify/vue-watermark)
4+
35
`@watermarkify/vue-watermark` is a lightweight and customizable Vue.js component that allows you to easily add watermarks to your web applications. With Vue Watermark, you can overlay images or text on top of images, videos, or any other HTML elements to protect your content or add branding.
46

57
<div align="center">
@@ -27,29 +29,31 @@ pnpm install @watermarkify/vue-watermark
2729

2830
## Usage
2931

30-
Retrieved from [playground](./playground/)
32+
The following code snippet is retrieved from [playground](./playground/). You may also try the interactive playground [here](https://watermarkify.github.io/vue-watermark/).
3133

3234
```vue
3335
<script setup lang="ts">
34-
import { ref } from 'vue'
3536
// step 1: import Watermark from @watermarkify/vue-watermark
3637
import { Watermark } from '@watermarkify/vue-watermark'
3738
3839
// step 2: define watermark options
40+
// see https://github.com/watermarkify/vue-watermark#options
3941
const watermarkOptions = ref({
40-
content: 'watermark'
42+
content: 'watermark',
43+
gap: [20, 20],
44+
offset: [10, 10],
45+
zIndex: 5,
46+
rotate: -20,
4147
})
4248
</script>
49+
```
4350

44-
<template>
45-
<div>
46-
<h1>Watermark Example</h1>
47-
<!-- step 3: apply watermark on the target slot -->
48-
<Watermark :options="watermarkOptions">
49-
<div class="content">This is the content of the slot.</div>
50-
</Watermark>
51-
</div>
52-
</template>
51+
Pass `watermarkOptions` to `options` and define your slot.
52+
53+
```vue
54+
<Watermark :options="watermarkOptions">
55+
<div>This is the content of the slot.</div>
56+
</Watermark>
5357
```
5458

5559
## Options

‎docs/assets/index-6f0b93f2.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-c71c65ef.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-e645e83f.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-ecddebbc.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vue-watermark/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>@watermarkify/watermark Example</title>
8+
<script type="module" crossorigin src="/vue-watermark/assets/index-e645e83f.js"></script>
9+
<link rel="stylesheet" href="/vue-watermark/assets/index-ecddebbc.css">
10+
</head>
11+
<body>
12+
<div id="app"></div>
13+
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)