uniapp頁面完成水印添加功能代碼示例(自定義文字)

更新時間：2025年01月10日 09:21:16 作者：苦逼的猿寶

這篇文章主要介紹了uniapp頁面完成水印添加功能(自定義文字)的相關資料,包括如何編寫頁面代碼、數(shù)據(jù)代碼以及如何展示效果圖,通過代碼介紹的非常詳細,需要的朋友可以參考下

頁面代碼

<template>
	<view class="">
		<!-- 水印 -->
		<view class="watermark-container" v-if="text">
			<view class="zhanshiyemian">
				<view class="weikaifang-sty" v-for="(item, index) in generateWatermarks()" :key="index">
					{{ text }}
				</view>
			</view>
		</view>
		<!-- 代碼 -->
		<view class="content">
			<!-- 搜索 -->
			<view class="serchform_time">
				<view class="left">
					<view class="contentx">全部訂單</view>
					<view></view>
				</view>
				<view class="right">
					<view @click="show = true" class="serchform_t">時間</view>
					<view>1</view>
				</view>
			</view>
			<u-popup :show="show" :round="10" mode="top" @close="close" @open="open">
				<view>
					<text>出淤泥而不染，濯清漣而不妖</text>
				</view>
			</u-popup>
			<!-- 主體展示 -->
			<view class="content_center">
				<view v-for="item in list" :key="item">
					<view class="title">{{item.time}}</view>
					<view v-for="(aitem,index) in item.listevery" :key="index" class="box_center">
						<view class="aa">
							<view class="left">
								{{aitem.time}}
							</view>
							<view class="right">
								{{aitem.status}}
							</view>
						</view>
						<view class="bb">
							<view class="left">

							</view>
							<view class="right">
								{{aitem.a}}
							</view>
						</view>
						<view class="cc">
							<view class="left">

							</view>
							<view class="right">
								{{aitem.b}}
							</view>
						</view>
						<view class="dd">
							<view class="left">
								{{aitem.to}}
							</view>
							<view class="right">
								{{aitem.money}} <text>元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listFive
	} from '../listMessage.js'
	export default {
		name: "Watermark",
		data() {
			return {
				itemCount: 0,
				list: [],
				show: false,
			};
		},
		props: {
			text: {
				type: String,
				default: '阿寶科技'
			},
		},
		mounted() {
			this.calculateWatermarkCount();
			console.log(listFive, 'listFive');
			this.list = listFive
		},
		onReady() {
			// 微信小程序需要用此寫法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		beforeDestroy() {},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			calculateWatermarkCount() {
				const screenWidth = uni.getSystemInfoSync().windowWidth;
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				const watermarkWidth = 25;
				const watermarkHeight = 140;
				const horizontalCount = Math.ceil(screenWidth / watermarkWidth);
				const verticalCount = Math.ceil(screenHeight / watermarkHeight);
				this.itemCount = horizontalCount * verticalCount;
			},
			generateWatermarks() {
				return Array(this.itemCount).fill(null);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.from-stye {
		position: relative;
		z-index: 999;
		pointer-events: none;
	}

	.zhanshiyemian {
		position: absolute;
		width: 100%;
		z-index: 9999;
		pointer-events: none;
		display: flex;
		flex-wrap: wrap;
		line-height: 100rpx;
	}

	.weikaifang-sty {
		font-size: 12px;
		color: #cccccc63;
		width: 25%;
		text-align: center;
		transform: rotate(-30deg);
		/* 順時針旋轉(zhuǎn)30度 */
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;

		.serchform_time {
			height: 100rpx;
			background-color: #fff;
			box-shadow: 0 4px 6px -6px #999;
			position: fixed;
			top:  0;
			left: 0;
			right: 0;
			z-index: 9999;
			display: flex;
			justify-content: space-evenly;

			.right,
			.left {
				// width: 50%;
				display: flex;
				align-items: center;
			}

			.left {
				.contentx {
					font-weight: 600;
				}
			}

			.rigth {
				.serchform_t {
					position: relative;
					margin-bottom: 40px;
					/* 確保有足夠的空間顯示彈出框 */
				}
			}
		}

		.content_center {
			padding-top:140rpx;
			box-sizing: border-box;

			.title {
				font-weight: 600;
			}

			.box_center {
				width: 100%;
				height: 260rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx 0;
				padding: 20px;
				box-sizing: border-box;

				.aa,
				.bb,
				.cc,
				.dd {
					display: flex;

				}

				.aa {
					justify-content: space-between;

					.left {
						font-size: 28rpx;
						font-weight: 600;
					}

					.right {
						font-size: 26rpx;
						color: #333;
					}
				}

				.bb,
				.cc {
					margin: 20rpx 0;
					align-items: center;

					.left {
						background-color: greenyellow;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				.cc {
					.left {
						background-color: red;
					}
				}

				.dd {
					justify-content: space-between;

					.left {
						padding: 0 4rpx;
						font-size: 22rpx;
						background-color: #e6f1fb;
						color: #4669bb;
						height: 34rpx;
					}

					.right {
						font-size: 32rpx;
						font-weight: 600;

						text {
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>

數(shù)據(jù)代碼

export const listFive = [{
	time:"07月24日",
	listevery:[
		{
			time:'23:36',
			status:'已支付',
			a:'張三哈哈哈',
			b:'李四哈哈哈',
			to:'高德渠道',
			money:'18.15'
		},
		{
			time:'23:36',
			status:'已支付',
			a:'張三哈哈哈',
			b:'李四哈哈哈',
			to:'高德渠道',
			money:'18.15'
		}
	]
},{
	time:"07月25日",
	listevery:[
		{
			time:'23:36',
			status:'已支付',
			a:'張三哈哈哈',
			b:'李四哈哈哈',
			to:'高德渠道',
			money:'18.15'
		},
		{
			time:'23:36',
			status:'已支付',
			a:'張三哈哈哈',
			b:'李四哈哈哈',
			to:'高德渠道',
			money:'18.15'
		}
	]
},{
	time:"07月26日",
	listevery:[
		{
			time:'23:36',
			status:'已支付',
			a:'張三哈哈哈',
			b:'李四哈哈哈',
			to:'高德渠道',
			money:'18.15'
		}
	]
}]