uniapp界面新增水印实现示例详解
作者：小李不小
这篇文章主要为大家介绍了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 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>以上就是uniapp界面新增水印实现示例的详细内容，更多关于uniapp界面新增水印的资料请关注脚本之家其它相关文章！