先在compontents里面写个全局组件
<template>
<view class="water_top" style="pointer-events: none;">
<view class="water-text" v-for="i in 20" :key="i">{{ watermarkText }}</view>
</view>
</template>
<script>
export default {
name: 'WaterMark',
data() {
return {};
},
computed: {
watermarkText() {
return '2021-12-28';
}
}
};
</script>
<style lang="scss" scoped>
/* 想要改水印大小或者稀疏通过样式调整即可 */
.water_top{
position: fixed;
width: 200vw;
top:0;
bottom: 0;
left: 0;
right: 0;
transform:rotate(-10deg);
z-index: 1;
}
.water-text{
float: left;
padding: 0 50rpx;
color: rgba(169,169,169,.4);
text-align: center;
font-size: 28rpx;
margin: 80rpx 0;
}
</style>
在main.js里面全局挂载
import WaterMark from '@/components/WaterMark/index.vue';
Vue.component("WaterMark",WaterMark)
在需要的界面直接使用
<WaterMark></WaterMark>