watermark全局水印插件 - DCloud 插件市场

2021-06-18 10:36:16 Author: ext.dcloud.net.cn 阅读量: 124
觉得文章还不错?,点我收藏



更新记录

1.03(2020-05-28)

修改app端水印重叠的问题

1.02(2020-05-07)

新增更新水印方法

查看更多

ly-watermark全局水印插件

·支持H5/APP,受uni-app限制,小程序没研究出来方法

·使用mixins方式混入到需要加载的页面中

·由于用到了uni的页面通讯机制,需要HBuilderX 2.0.0及以上版本支持

·如果是低版本,可以自行用bus方式修改

基本用法

·因为需要借助canvas生成图片,H5端直接插入标签,APP端需要定义一个canvas

·可以适当地修改样式,比如z-index:-1的方式将图层置下,让其他元素遮挡住,否则可能会造成片刻的闪烁

<template>
    <view>
        <!-- #ifdef APP-PLUS -->
        <canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCanvas"></canvas>
        <!-- #endif -->
        <view class="ly-padding">
            <button @tap="navigate">跳转至下一页</button>
        </view>
    </view>
</template>

<script>
    import watermark from '@/commons/watermark.js'

    export default {
        mixins: [watermark],
        data() {
            return {
                // 水印内容,请以这个命名为准
                canvasText: 'hruomei2020',
            }
        },
        // 注意一定要在mounted中调用!!否则可能会绘制无效(不同HbuilderX版本差异)
        mounted() {
            this.initWatermark(); // 可以在水印内容准备好后执行初始化
        },
        methods: {
            navigate() {
                uni.navigateTo({
                    url: "../other/page"
                })
            }
        }
    }
</script>

<style>
    .ly-padding{
        padding: 30rpx;
    }

    /* 请注意这里一定要设置宽高 */
    .watermarkCans {
        width: 250rpx;
        height: 250rpx;
        position: absolute;
        z-index: -1;
    }
</style>

切换隐藏/显示状态

·由于部分页面可能需要隐藏掉水印,比如登录页,可以在页面的onLoad中隐藏,在onUnload中显示

<script>
    export default{
        onLoad() {
            //触发水印隐藏
            uni.$emit('ly-hide-watermark');
        },
        () {
            //触发水印显示
            uni.$emit('ly-show-watermark');
        }
    }
</script>

Tips 一个简单的插件,希望可能帮助大家




觉得文章还不错?,点我收藏



如果文章侵犯到您的版权,请联系我:buaq.net[#]pm.me