uniapp界面新增水印实现示例详解

目录正文界面引入组件实现思路实现代码正文

界面引入组件<templeate><view> <Ywatermark :info=''这里是水印内容''></Ywatermark></view></tempate><script>import Ywatermark from '@/components/Ywatermark/Ywatermark' //引入组件 export default { data() {}}, components:{ Ywatermark //注册组件 }</script>实现思路

首先需要一个透明蒙版盖住页面，然后将水印信息循环展示出来，展示完成后将蒙版旋转倾斜，然后为了让水印不影响下层页面功能的正常使用，需要使用pointer-events: none;属性让事件穿透到下面去

实现代码<template> <view class='make'><view class='list'> <view 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>

以上就是uniapp界面新增水印实现示例的详细内容，更多关于uniapp界面新增水印的资料请关注好吧啦网其它相关文章！