目錄正文界面引入組件實現思路實現代碼正文

界面引入組件<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 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界面新增水印的資料請關注好吧啦網其它相關文章！