awesome-watermark v1.1.0

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

Todo

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