uniap 微信小程序 多层签章功能

<template>
	<view class="ps-r">
		<image src="/static/image/bg.jpg" mode="widthFix" class="w-full"></image>
		<movable-area class="movable-area" v-for="(item,index) in autographList" :key="item.id">
			<movable-view :class="SelectedIndex == index ? `boxShadow autographId-${index}` : `autographId-${index}`"
				class="movable-view" :inertia="false" :out-of-bounds="true" :x="item.relativeX" :y="item.relativeY"
				direction="all" @change="onChange($event,item)" @touchstart="onTouchStart(index)">
				<view class="movable-text">
					<image @click.stop="deleteTag(index)" class="movable-image" src="/static/image/close.png"
						mode="widthFix"></image>
					张三
				</view>
			</movable-view>
		</movable-area>

		<view @click.stop="createTag">新增</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'

	const autographList = ref<any>([])
	const SelectedIndex = ref<number>(0) // 选中index

	// 长按开始 -- 替换高亮显示
	const onTouchStart = (index : number) => {
		SelectedIndex.value = index
	}

	// 删除标签
	const deleteTag = (index : any) => {
		// 删除前,继续重新x,y坐标更新,以防dom更新渲染时,x,y回到创建位置
		for (var i = 0; i < autographList.value.length; i++) {
			if (autographList.value[i].relativeX != autographList.value[i].copyX) {
				autographList.value[i].relativeX = autographList.value[i].copyX
				autographList.value[i].relativeY = autographList.value[i].copyY
			}
		}
		autographList.value.splice(index, 1)
	}

	// 标签滑动组件
	const onChange = (e : any, item : any) => {
		item.copyX = e.detail.x
		item.copyY = e.detail.y
	}

	// 创建标签
	const createTag = (subject : any) => {
		autographList.value.push({
			relativeX: 0,
			relativeY: 0, // scrollTop
			// 有滚动区域设置
			// relativeY: scrollTop.value,
			copyX: 0,
			copyY: 0, 
			// copyY: scrollTop.value,
			id: "movable" + new Date().getTime() // 添加唯一值 key标签,防止刷新
		})
		SelectedIndex.value = autographList.value.length - 1
		console.log(autographList.value);
	};

	// 滚动控制相关 -- 滚动区域设置
	const scrollTop = ref(0);
	const onScroll = (e : any) => {
		scrollTop.value = e.detail.scrollTop
		console.log("onScroll", scrollTop.value);
	}
</script>

<style scoped lang="scss">
	.view {
		display: v-bind(useScss);
	}

	.movable-area {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// height: calc(100vh - 340rpx - 40rpx - env(safe-area-inset-bottom));
		// width: 100vw;
		pointer-events: none;
		z-index: 999;

		.movable-view {
			width: fit-content;
			height: fit-content;
			pointer-events: auto;
			background-color: #e2e2e2;
			/* 底纹浅色背景 */
			background-image: linear-gradient(-45deg, transparent 60%, #c7c7c7 60%, #c7c7c7 75%, transparent 75%);
			background-size: 30rpx 30rpx;
			/* 控制斜线密度 */
		}

		.movable-text {
			position: relative;
			line-height: 40rpx;
			border: 1rpx dashed red;
		}

		.boxShadow {
			box-shadow: 0rpx 0rpx 10rpx 6rpx rgba(188, 188, 188, 0.5);
		}

		.movable-image {
			position: absolute;
			top: -14rpx;
			right: -16rpx;
			width: 24rpx;
			height: 24rpx;

		}

		.movable-x {
			width: 20rpx;
			height: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background: red;
			line-height: 1;
			font-size: 16rpx;
			color: #fff;
		}
	}
</style>
	

实现效果

可以根据自己的需要替换层印章/签名等,图片替换pdf或者多张图片,容器赋值需要自己获取dom