awesome-watermark

    1.1.0 • Public • Published

    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 拓展

    Install

    npm i awesome-watermark

    DownloadsWeekly Downloads

    34

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    109 kB

    Total Files

    14

    Last publish

    Collaborators

    • bbbowen