awesome-watermark

可用于 react，vue 和微信小程序（更多平台正在开发）的水印组件

使用

1.安装依赖

npm install awesome-watermark

2.引入组件

react:

import Watermark from "awesome-watermark/react";

vue:

import Watermark from "awesome-watermark/vue";

微信小程序（需构建 npm）:

{
    "usingComponents": {
        "watermark": "awesome-watermark"
    }
}

3.具体使用

由于 Watermark 组件使用position:absolute;定位，确保你需要加上水印的区域 position 值不为 static；且因需计算水印位置，要有固定高度，具体可见下面的实例：

React:

import React, { Component } from "react";
import Watermark from "awesome-watermark/react";
import "./index.css";
 
class Avatar extends Component {
    render() {
        return (
            <div className="avatar">
                <Watermark
                    text="bowen"
                    textStyle={{ color: "#fff", fontSize: 20 }}
                />
            </div>
        );
    }
}
 
export default Avatar;

.avatar {
    width: 30%;
    height: 300px;
    border-radius: 50%;
    border: 1px solid #000;
    background: url(../../assets/27432981.jpeg);
    background-size: cover;
    position: relative;
}

Vue:

<template>
    <div class="avatar">
        <Watermark v-bind:text="text" />
    </div>
</template>
 
<script>
import Watermark from "awesome-watermark/vue";
export default {
    name: "Avatar",
    components: {
        Watermark
    },
    data: function() {
        return {
            text: "bowen"
        };
    }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.avatar {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid #000;
    background: url(../../assets/27432981.jpeg);
    background-size: cover;
    position: relative;
}
</style>

微信小程序:

<view class="avatar">
    <image src="../../assets/27432981.jpeg" class="img"></image>
    <watermark text="bowen"></watermark>
</view>

.avatar {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid #000;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
 
.img {
    width: 300px;
    height: 300px;
}

5.使用效果

Api

属性名	类型	默认值	说明
text	String(required)	""	水印的文字，该属性更改后会引起重新渲染
angle	Number	30	水印文字旋转的角度
row	Number	2	水印的行数
col	Number	3	水印的列数
textStyle	react 和 vue 中为 Object，微信小程序中为 String	{}	水印文字的 style 属性

Todo

• 实现 react hooks 版本
• 拓展更多小程序平台
• api 拓展