am-watermark v1.0.1

Vue 3 WaterMark

一款 Vue3 的水印组件,支持组件使用和指令使用两种方式。

安装

npm i am-watermark

用法

main.js 引入组件和样式,将会自动注册组件和指令两种使用方式，不要忘记导入样式。

import WaterMark from 'am-watermark'
import 'am-watermark/dist/style.css'

createApp(App).use(WaterMark).mount('#app')

1、通过组件

<template>
  <div>
    <WaterMark text="水印文字" :options="options">
      <div>这是一个水印组件</div>
    </WaterMark>
  </div>
</template>

2、通过指令

使用指令方式会改变您的 DOM 结构,在外层增加一层 DIV,如果您的样式有问题,请使用组件方式

<template>
  <div
    v-watermark="{
      text: '水印文字',
      options,
    }"
  >
    <div>这是一个水印组件</div>
  </div>
</template>

参数

text

水印的文字,类型为字符串

options