vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > uniapp页面水印添加功能

uniapp页面完成水印添加功能代码示例(自定义文字)

作者:苦逼的猿宝

这篇文章主要介绍了uniapp页面完成水印添加功能(自定义文字)的相关资料,包括如何编写页面代码、数据代码以及如何展示效果图,通过代码介绍的非常详细,需要的朋友可以参考下

页面代码

<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);
		/* 顺时针旋转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>

数据代码

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'
		}
	]
}]

效果图

总结 

到此这篇关于uniapp页面完成水印添加功能(自定义文字)的文章就介绍到这了,更多相关uniapp页面水印添加功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文