uniapp界面新增水印實現(xiàn)示例詳解

更新時間：2023年07月10日 14:06:24 作者：小李不小

這篇文章主要為大家介紹了uniapp界面新增水印實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

界面引入組件

<templeate>
<view>
    <Ywatermark :info="'這里是水印內(nèi)容'"></Ywatermark>
</view>
</tempate>
<script>
import Ywatermark from '@/components/Ywatermark/Ywatermark' //引入組件
    export default {
            data() {}
        },
    components:{
      Ywatermark  //注冊組件
      }
</script>

實現(xiàn)思路

首先需要一個透明蒙版蓋住頁面，然后將水印信息循環(huán)展示出來，展示完成后將蒙版旋轉(zhuǎn)傾斜，然后為了讓水印不影響下層頁面功能的正常使用，需要使用pointer-events: none;屬性讓事件穿透到下面去

實現(xiàn)代碼

<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界面新增水印實現(xiàn)示例的詳細內(nèi)容，更多關于uniapp界面新增水印的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: