目录
- 正文
- 界面引入组件
- 实现思路
- 实现代码
正文
界面引入组件
<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界面新增水印的资料请关注悠久资源网其它相关文章！
您可能感兴趣的文章:
- uniapp @click事件冒泡问题解决示例
- uniapp解决软键盘弹出问题方法详解
- uniapp获取手机通知权限实现demo
- uniapp路由uni-simple-router使用示例
- uniappmovable-area应用
