uniapp/pages/test/test.vue

<template>
	<view>

		<ul>
			<li v-for="(item,index) in data1">
				<span @click.stop="toggle(index)"></span>
				<span>{{item.id}}</span>--
				<span>{{item.name}}</span>
				<div v-show="(cIndex == index) && dialog" class="modalDiaLog">dialog</div>
			</li>
		</ul>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				dialog: false,
				cIndex: -1,
				data1: [{
						id: 1,
						name: "a"
					},
					{
						id: 2,
						name: "b"
					},
					{
						id: 3,
						name: "c"
					},
					{
						id: 4,
						name: "d"
					},
				]

			}
		},
		mounted() {
			document.addEventListener('click', (e) => {
				if (e.target.className != 'modalDiaLog') {
					this.dialog = false;
				}
			})
		},
		methods: {
			toggle(index) {
				this.cIndex = index;
				this.dialog = !this.dialog;
			}

		}
	}
</script>

<style>
	ul,
	li {
		list-style: none;
	}

	li {
		position: relative;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #000;
	}

	li span:first-child {
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: #000;
	}

	li div {
		position: absolute;
		left: 20px;
		top: 0;
		z-index: 1000;
		width: 100px;
		height: 100px;
		border: 1px solid red;
		background-color: #fff;
	}
</style>