1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template>
- <!-- 水印 -->
- <view class="watermark">
- <block v-for="(item,index) in num" :key="index">
- <view class="watermark-text" v-if="text != ''" :style="{opacity:opacity}">{{text}}</view>
- <image class="watermark-img" :src="imgUrl" mode="aspectFill" v-if="imgUrl !='' && text ==''" :style="{opacity:opacity}"></image>
- </block>
- </view>
- </template>
- <script>
- export default {
- name:'wm-watermark',
- props:{
- text:{ //设置水印文字
- type:String,
- default:''
- },
- imgUrl:{ //设置水印图片
- type:String,
- default:''
- },
- opacity:{ //设置透明度
- type:[Number,String],
- default:0.6
- },
- num:{ //设置水印数量
- type:Number,
- default:20
- }
- },
- data() {
- return {
-
- };
- }
- }
- </script>
- <style lang="scss">
- .watermark{
- position: fixed;
- width: 100%;
- height: 100%;
- top:0;
- left: 0;
- bottom: 0;
- right: 0;
- pointer-events: none;
- z-index: 9999999;
- display: flex;
- flex-wrap: wrap;
- overflow: hidden;
- .watermark-text{
- width: 230upx;
- height: 230upx;
- display: flex;
- justify-content: center;
- align-items: center;
- transform: rotate(-45deg);
- color: #ddd;
- font-size: 32upx;
- white-space: nowrap;
- }
- .watermark-img{
- width: 230upx;
- height: 230upx;
- z-index: 1;
- }
- }
- </style>
|