uniapp 打造自用组件库 (六) 全局水印
uniapp 打造自用组件库 (六) 全局水印
前言
本文将带领读者使用uniapp封装一些常用组件，方便日后开发时重复使用，当然文中封装的组件不可能适配所有应用场景，但是我希望读者可以跟着我的思路实现出来，然后可以在此基础上优化改进为自己合适的，本人一个前端小菜鸡，希望大佬们可以不吝赐教，也是对我的技术水平的提升
全局水印
需求
在给客户开发过程中，经常会遇到一些保密性较强的信息展示，这时候就需要增加全局水印，便于被截图后的溯源，于是便封装水印组件
效果展示
应用效果
应用代码
<view> <Ywatermark :info="'这里是水印内容'"></Ywatermark> </view> 复制代码
实现思路
首先需要一个透明蒙版盖住页面，然后将水印信息循环展示出来，展示完成后将蒙版旋转倾斜，然后为了让水印不影响下层页面功能的正常使用，需要使用pointer-events: none;属性让事件穿透到下面去
完整实现代码
<template> <view class="make"> <view class="list"> <view class="item" v-for="i in 500"> <text>{{info}}</text> </view> </view> </view> </template> <script> export default { name: "watermark", props: { info: { type: String, default: '全局水印' } }, data() { return { }; } } </script> <style lang="scss" scoped> .make { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, 0); pointer-events: none; .list { width: 500%; height: 400%; position: absolute; top: -50%; left: -50%; transform: rotate(-45deg); display: flex; flex-wrap: wrap; justify-content: space-between; pointer-events: none; .item { font-size: 28px; color: rgba(220, 220, 220, 0.3); font-weight: bold; padding: 30rpx; pointer-events: none; } } } </style>
作者：shengtu_归尘
链接：https://juejin.cn/post/7023296030170939405