1,界面引入組件
<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>