vue页面添加水印(可用于H5,APP)

vue页面添加水印

  • 背景
  • 实现
    • 新建vue组件
    • 使用
    • 效果
  • 尾巴

背景

最近实现了一个小功能,就是给页面添加背景水印。实现思路就是定义一个宽高充满屏幕的组件,然后使用绝对定位并通过层级控制让水印显示在页面的最前端。

实现

代码相对简单,相信有点vue基础的人都能看懂

新建vue组件

watermark.vue

<template><view class="make"><view class="list"><!--这里循环生成水印文字--><view class="item" v-for="i in 300"><text>{{ info }}</text></view></view></view>
</template><script setup>const props = defineProps({info: {type: String,default: '默认水印'}})
</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: 50rpx;color: rgba(220, 220, 220, 0.3);font-weight: bold;padding: 30rpx;pointer-events: none;//这句很关键,让事件穿透}}}
</style>

使用

新建任意页面,然后引入上一步中的watermark.vue组件

<template><view><button>test</button><view>水印测试</view><Ywatermark info="吗咿呀嘿"></Ywatermark></view>
</template>
<script>import Ywatermark from '../watermark.vue'//这里省略其他无关代码...
</script>

效果

H5页面运行效果

在这里插入图片描述

尾巴

今天实现效果较为简单,在H5页面效果最佳,APP上存在有些原生控件层级最高的问题,就会被遮挡,这个问题可以使用nvue尝试下,理论上pc端vue项目也能使用。
希望今天的文章能给大家帮助,如果喜欢我的文章,欢迎给我点赞,评论,关注,谢谢大家!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/129114.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023-9-11 高斯消元解异或线性方程组

题目链接&#xff1a;高斯消元解异或线性方程组 #include <iostream> #include <algorithm>using namespace std;const int N 110;int n; int a[N][N];int gauss() {int c, r;for(c r 0; c < n; c ){int t r;for(int i r; i < n; i )if(a[i][c]){t i;b…

超图聚类论文阅读1:Kumar算法

超图聚类论文阅读1&#xff1a;Kumar算法 《超图中模块化的新度量&#xff1a;有效聚类的理论见解和启示》 《A New Measure of Modularity in Hypergraphs: Theoretical Insights and Implications for Effective Clustering》 COMPLEX NETWORKS 2020, SCI 3区 具体实现源码见…

vue checkbox-group和checkbox动态生成,问题解决

源码 <el-checkbox-group v-model"form[keyItem.name]"><el-checkboxv-for"(checkboxItem,cindex) in keyItem.options.split(,)":key"cindex":label"checkboxItem"></el-checkbox></el-checkbox-group> 我是…

不关闭Tamper Protection(篡改保护)下强制卸载Windows Defender和安全中心所有组件

个人博客: xzajyjs.cn 背景介绍 由于微软不再更新arm版本的win10系统&#xff0c;因此只能通过安装insider preview的镜像来使用。而能找到的win10 on arm最新版镜像在安装之后由于内核版本过期&#xff0c;无法打开Windows安全中心面板了&#xff0c;提示如下&#xff1a; 尝…

——二叉树

二叉树种类 二叉树有两种主要的形式&#xff1a;满二叉树和完全二叉树。 满二叉树 如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。 完全二叉树 在完全二叉树中&#xff0c;除了最底层节点可能没…

buuctf web 前5题

目录 一、[极客大挑战 2019]EasySQL 总结&#xff1a; 二、[极客大挑战 2019]Havefun 总结&#xff1a; 三、[HCTF 2018]WarmUp 总论&#xff1a; 四、[ACTF2020 新生赛]Include 总结&#xff1a; 五、[ACTF2020 新生赛]Exec 总结&#xff1a; 一、[极客大挑战 2019]…

VPS使用环境受限?亚马逊云科技Amazon Lightsail为开发者提供更多选择

对于开发者而言&#xff0c;当你想构建系统架构时&#xff0c;你的面前就出现了两种选择&#xff0c;选择一是花时间去亲手挑选每个亚马逊云科技组件&#xff08;云服务器、存储、IP地址等&#xff09;&#xff0c;然后自己组装起来&#xff1b;选择二是只需要一个预先配置且预…

C语言经典100例题(51-54)--学习使用按位与 ,按位或 |,按位异或 ^和按位取反~

目录 题目 问题分析 按位与操作符&#xff08;&&#xff09; 按位或操作符&#xff08;|&#xff09; 按位异或操作符&#xff08;^&#xff09; 按位取反操作符&#xff08;~&#xff09; 代码及运行结果 题目 学习使用按位与& ,按位或 |,按位异或 ^和按位取反…

解决微信开发者工具企业微信小程序模式下模拟器白屏问题

前一天晚上没有关电脑&#xff0c;第二天发现电脑自己重启了&#xff0c;然后微信开发者工具就出了问题&#xff0c;在企业微信小程序模式下&#xff0c;模拟器出现了白屏&#xff0c;只有上方title可以正常显示。点击模拟器右上角三个点都不出弹出菜单&#xff0c;并且在调试器…

初识Nacos

前言 Nacos是一个用于微服务架构下的服务发现和配置管理以及服务管理的综合解决方案&#xff08;官网介绍&#xff09;&#xff0c;这里的服务发现其实就是注册中心&#xff0c;配置管理就是配置中心&#xff0c;而服务管理是二者的综合&#xff1b; Nacos特性 1.服务发现与…

李宏毅机器学习笔记:RNN循环神经网络

RNN 一、RNN1、场景引入2、如何将一个单词表示成一个向量3种典型的RNN网络结构 二、LSTMLSTM和普通NN、RNN区别 三、 RNN的训练RNN与auto encoder和decoder 四、RNN和结构学习的区别五、pytorch实现RNN与LSTM5.1为何 H o u t h i d d e n s i z e H_{out}hidden_size Hout​hi…

一个集成的BurpSuite漏洞探测插件1.1

免责声明 本文发布的工具和脚本&#xff0c;仅用作测试和学习研究&#xff0c;禁止用于商业用途&#xff0c;不能保证其合法性&#xff0c;准确性&#xff0c;完整性和有效性&#xff0c;请根据情况自行判断。如果任何单位或个人认为该项目的脚本可能涉嫌侵犯其权利&#xff0c…

Mysql数据库基础总结:

什么是数据库&#xff1a; 数据库&#xff08;DataBase&#xff09;&#xff1a;存储和管理数据的一个仓库。 数据库类型分为&#xff1a;关系型数据库和非关系型数据库。 关系型数据库&#xff08;SQL&#xff09;&#xff1a;存储的数据以行和列为格式&#xff0c;类似于e…

手写Mybatis

Mybatis核心配置文件就是为了配置Configration 因此要首先会解析Mybatis核心配置文件 首先使用dom4J解析Mybatis核心配置文件 新建模块演示dom4j解析.xml 目录放错了 无所谓 引入依赖 从原来项目可以拷贝过来 就些简单配置就好 解析核心配置文件和解析xxxMapper.xml映射文件…

vue学习之属性绑定

内容渲染 采用 &#xff1a;进行属性渲染创建 demo3.html,内容如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&…

CHS零壹视频恢复程序OCR使用方法

目前CHS零壹视频恢复程序监控版、专业版、高级版已经支持了OCR&#xff0c;OCR是一种光学识别系统&#xff0c;通俗说就和扫描仪带的OCR软件一样的原理&#xff1a; 分析照片->OCR获取字符串->整理字符串->输出 使用方法如下&#xff08;以CHS零壹视频恢复程序监控版…

使用LlamaIndex构建自己的PandasAI

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 Pandas AI 是一个 Python 库&#xff0c;它利用生成 AI 的强大功能来增强流行的数据分析库 Pandas。只需一个简单的提示&#xff0c;Pandas AI 就可以让你执行复杂的数据清理、分析和可视化&#xff0c;而这以前需要很…

STL线程各种容器对比、数组和vector如何互相转换

STL vector如何扩展内存和释放内存STL中各种容器对比STL中的swap函数STL中哈希表扩容STL迭代器失效的情况和原因vector删除元素后如何避免当前迭代器会失效vector的iterator和const_iterator和const iterator vector如何扩展内存和释放内存 内存增长 1.5还是2倍扩容 gcc 二倍扩…

微信小程序ibeacon搜索功能制作

以下是一个完整的微信小程序代码示例&#xff0c;演示如何实现iBeacon搜索功能&#xff1a; // 在小程序页面中的js文件中编写代码Page({data: {beacons: [] // 存储搜索到的iBeacon设备信息},onReady() {// 初始化iBeaconwx.startBeaconDiscovery({uuids: [你的UUID], // 替换…

数据结构和算法(1):开始

算法概述 所谓算法&#xff0c;即特定计算模型下&#xff0c;旨在解决特定问题的指令序列 输入 待处理的信息&#xff08;问题&#xff09; 输出 经处理的信息&#xff08;答案&#xff09; 正确性 的确可以解决指定的问题 确定性 任一算法都可以描述为一个由基本操作组成的序…