yicangzongtai_app_240321/pages/build/widget-shape.vue

<template>
	<view class="shape" :id="`module_${id}`" @click="page.EditModuleId = id">
		<!-- @click="page.setCurWidgetId(widget.id)" -->
		<view class="shape-solid" v-if="page.EditModuleId == id">
			<!--  -->

		</view>

		<view class="shape-dashed"></view>

		<slot></slot>
	</view>
</template>

<script>
	export default {
		inject: ["page"],
		props: ["id"],
	};
</script>

<style lang="scss" scoped>
	.shape {
		position: relative;

		&:hover {
			.shape-dashed {
				display: block;
			}
		}

		.shape-dashed {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: dashed 1px #155bd4;
			z-index: 100;
		}

		.shape-solid {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: solid 1px #155bd4;
			z-index: 100;
		}
	}
</style>