vue-editify 0.2.8 → 0.2.10

package/src/components/layer/layer.vue

@@ -1,12 +1,14 @@
 <template>
-	<Transition :name="animation ? 'editify-layer-' + animation : 'editify-layer'" @enter="handleEnter" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
-		<div v-if="modelValue" class="editify-layer" :data-editify-placement="realPlacement || null" :style="{ zIndex: zIndex }" ref="elRef">
-			<Triangle v-if="showTriangle" :color="border && borderColor ? borderColor : background" :background="background" :placement="triPlacement" ref="triangleRef" />
-			<div ref="wrapRef" class="editify-layer-wrap" :class="{ 'editify-border': border }" :style="wrapStyle">
-				<slot></slot>
+	<Teleport to="body">
+		<Transition :name="animation ? 'editify-layer-' + animation : 'editify-layer'" @enter="handleEnter" @after-enter="el => emits('shown', el)" @after-leave="el => emits('hidden', el)">
+			<div v-if="modelValue" class="editify-layer" :data-editify-placement="realPlacement || null" :style="{ zIndex: zIndex }" ref="elRef">
+				<Triangle v-if="showTriangle" :color="border && borderColor ? borderColor : background" :background="background" :placement="triPlacement" ref="triangleRef" />
+				<div ref="wrapRef" class="editify-layer-wrap" :class="{ 'editify-border': border }" :style="wrapStyle">
+					<slot></slot>
+				</div>
 			</div>
-		</div>
-	</Transition>
+		</Transition>
+	</Teleport>
 </template>
 <script setup lang="ts">
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
@@ -27,6 +29,8 @@ const realPlacement = ref<LayerPlacementType | null>(null)
 const wrapRef = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | null>(null)
 const triangleRef = ref<InstanceType<typeof Triangle> | null>(null)
+const MOUSEDOWN = ref<boolean>(false)
+const MOUSEMOVE = ref<boolean>(false)
 
 //三角形位置
 const triPlacement = computed<TrianglePlacementType>(() => {
@@ -44,6 +48,7 @@ const triPlacement = computed<TrianglePlacementType>(() => {
 	}
 	return 'top'
 })
+//浮层主体样式
 const wrapStyle = computed<ObjectType>(() => {
 	return {
 		borderColor: props.border ? props.borderColor || '' : '',
@@ -58,9 +63,19 @@ const getNode = () => {
 		return null
 	}
 	if (DapElement.isElement(props.node)) {
-		return <HTMLElement>props.node
+		return props.node as HTMLElement
 	}
-	return <HTMLElement>document.body.querySelector(<string>props.node)
+	return document.body.querySelector(props.node as string) as HTMLElement
+}
+//获取滚动容器元素
+const getScrollNode = () => {
+	if (!props.scrollNode) {
+		return null
+	}
+	if (DapElement.isElement(props.scrollNode)) {
+		return props.scrollNode as HTMLElement
+	}
+	return document.body.querySelector(props.scrollNode as string) as HTMLElement
 }
 //根据range设置三角形位置
 const setTrianglePositionByRange = () => {
@@ -168,23 +183,23 @@ const setPositionByRange = () => {
 			const firstRect = rects[0]
 			//range的最后一个位置
 			const lastRect = rects[rects.length - 1]
-			//定位父元素的位置
-			const parentRect = DapElement.getElementBounding(<HTMLElement>elRef.value!.offsetParent)
 			//可视窗口高度
 			const documentHeight = document.documentElement.clientHeight || window.innerHeight
 			//可视窗口宽度
 			const documentWidth = document.documentElement.clientWidth || window.innerWidth
+			//滚动容器位置
+			const scrollRect = DapElement.getElementBounding(getScrollNode() || document.documentElement)
 
 			if (props.placement == 'top' || props.placement == 'top-start' || props.placement == 'top-end') {
-				if (firstRect.top >= 0 && firstRect.top >= parentRect.top && firstRect.top >= elRef.value!.offsetHeight) {
+				if (firstRect.top >= scrollRect.top && firstRect.top >= elRef.value!.offsetHeight) {
 					realPlacement.value = props.placement
-				} else if (documentHeight - lastRect.bottom >= 0 && documentHeight - lastRect.bottom >= parentRect.bottom && documentHeight - lastRect.bottom >= elRef.value!.offsetHeight) {
+				} else if (documentHeight - lastRect.bottom >= scrollRect.bottom && documentHeight - lastRect.bottom >= elRef.value!.offsetHeight) {
 					realPlacement.value = props.placement == 'top' ? 'bottom' : props.placement == 'top-start' ? 'bottom-start' : 'bottom-end'
 				}
 			} else if (props.placement == 'bottom' || props.placement == 'bottom-start' || props.placement == 'bottom-end') {
-				if (documentHeight - lastRect.bottom >= 0 && documentHeight - lastRect.bottom >= parentRect.bottom && documentHeight - lastRect.bottom >= elRef.value!.offsetHeight) {
+				if (documentHeight - lastRect.bottom >= scrollRect.bottom && documentHeight - lastRect.bottom >= elRef.value!.offsetHeight) {
 					realPlacement.value = props.placement
-				} else if (firstRect.top >= 0 && firstRect.top >= parentRect.top && firstRect.top >= elRef.value!.offsetHeight) {
+				} else if (firstRect.top >= scrollRect.top && firstRect.top >= elRef.value!.offsetHeight) {
 					realPlacement.value = props.placement == 'bottom' ? 'top' : props.placement == 'bottom-start' ? 'top-start' : 'top-end'
 				}
 			}
@@ -238,141 +253,141 @@ const setPositionByRange = () => {
 			nextTick(() => {
 				//设置位置对应的样式
 				if (realPlacement.value == 'top') {
-					elRef.value!.style.left = firstRect.left - parentRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+					elRef.value!.style.left = firstRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 					elRef.value!.style.right = 'auto'
-					elRef.value!.style.top = firstRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.top = firstRect.top - elRef.value!.offsetHeight + 'px'
 					elRef.value!.style.bottom = 'auto'
 				} else if (realPlacement.value == 'top-start') {
-					elRef.value!.style.left = firstRect.left - parentRect.left + 'px'
+					elRef.value!.style.left = firstRect.left + 'px'
 					elRef.value!.style.right = 'auto'
-					elRef.value!.style.top = firstRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.top = firstRect.top - elRef.value!.offsetHeight + 'px'
 					elRef.value!.style.bottom = 'auto'
 				} else if (realPlacement.value == 'top-end') {
 					elRef.value!.style.left = 'auto'
-					elRef.value!.style.right = documentWidth - firstRect.right - parentRect.right + 'px'
-					elRef.value!.style.top = firstRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.right = documentWidth - firstRect.right + 'px'
+					elRef.value!.style.top = firstRect.top - elRef.value!.offsetHeight + 'px'
 					elRef.value!.style.bottom = 'auto'
 				} else if (realPlacement.value == 'bottom') {
-					elRef.value!.style.left = lastRect.left - parentRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+					elRef.value!.style.left = lastRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 					elRef.value!.style.right = 'auto'
 					elRef.value!.style.top = 'auto'
-					elRef.value!.style.bottom = documentHeight - lastRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.bottom = documentHeight - lastRect.bottom - elRef.value!.offsetHeight + 'px'
 				} else if (realPlacement.value == 'bottom-start') {
-					elRef.value!.style.left = lastRect.left - parentRect.left + 'px'
+					elRef.value!.style.left = lastRect.left + 'px'
 					elRef.value!.style.right = 'auto'
 					elRef.value!.style.top = 'auto'
-					elRef.value!.style.bottom = documentHeight - lastRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.bottom = documentHeight - lastRect.bottom - elRef.value!.offsetHeight + 'px'
 				} else if (realPlacement.value == 'bottom-end') {
 					elRef.value!.style.left = 'auto'
-					elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+					elRef.value!.style.right = documentWidth - lastRect.right + 'px'
 					elRef.value!.style.top = 'auto'
-					elRef.value!.style.bottom = documentHeight - lastRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+					elRef.value!.style.bottom = documentHeight - lastRect.bottom - elRef.value!.offsetHeight + 'px'
 				} else {
 					elRef.value!.style.top = 'auto'
-					elRef.value!.style.bottom = (parentRect.bottom < 0 ? -parentRect.bottom : 0) + 'px'
+					elRef.value!.style.bottom = Math.max(scrollRect.bottom, 0) + 'px'
 					if (props.placement == 'top') {
 						//top-end
 						if (documentWidth - firstRect.right + firstRect.width / 2 < elRef.value!.offsetWidth / 2) {
 							elRef.value!.style.left = 'auto'
-							elRef.value!.style.right = documentWidth - firstRect.right - parentRect.right + 'px'
+							elRef.value!.style.right = documentWidth - firstRect.right + 'px'
 						}
 						//top-start
 						else if (firstRect.left + firstRect.width / 2 < elRef.value!.offsetWidth / 2) {
-							elRef.value!.style.left = firstRect.left - parentRect.left + 'px'
+							elRef.value!.style.left = firstRect.left + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 						//top
 						else {
-							elRef.value!.style.left = firstRect.left - parentRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+							elRef.value!.style.left = firstRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 					} else if (props.placement == 'bottom') {
 						//bottom-end
 						if (documentWidth - lastRect.right + lastRect.width / 2 < elRef.value!.offsetWidth / 2) {
 							elRef.value!.style.left = 'auto'
-							elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+							elRef.value!.style.right = documentWidth - lastRect.right + 'px'
 						}
 						//bottom-start
 						else if (lastRect.left + lastRect.width / 2 < elRef.value!.offsetWidth / 2) {
-							elRef.value!.style.left = lastRect.left - parentRect.left + 'px'
+							elRef.value!.style.left = lastRect.left + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 						//bottom
 						else {
-							elRef.value!.style.left = lastRect.left - parentRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+							elRef.value!.style.left = lastRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 					} else if (props.placement == 'top-start') {
 						if (documentWidth - firstRect.right + firstRect.width < elRef.value!.offsetWidth) {
 							//top
 							if (documentWidth - firstRect.right + firstRect.width / 2 >= elRef.value!.offsetWidth / 2) {
-								elRef.value!.style.left = firstRect.left - parentRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+								elRef.value!.style.left = firstRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 							//top-end
 							else {
 								elRef.value!.style.left = 'auto'
-								elRef.value!.style.right = documentWidth - firstRect.right - parentRect.right + 'px'
+								elRef.value!.style.right = documentWidth - firstRect.right + 'px'
 							}
 						}
 						//top-start
 						else {
-							elRef.value!.style.left = firstRect.left - parentRect.left + 'px'
+							elRef.value!.style.left = firstRect.left + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 					} else if (props.placement == 'bottom-start') {
 						if (documentWidth - lastRect.right + lastRect.width < elRef.value!.offsetWidth) {
 							//bottom
 							if (documentWidth - lastRect.right + lastRect.width / 2 >= elRef.value!.offsetWidth / 2) {
-								elRef.value!.style.left = lastRect.left - parentRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+								elRef.value!.style.left = lastRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 							//bottom-end
 							else {
 								elRef.value!.style.left = 'auto'
-								elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+								elRef.value!.style.right = documentWidth - lastRect.right + 'px'
 							}
 						}
 						//bottom-start
 						else {
-							elRef.value!.style.left = lastRect.left - parentRect.left + 'px'
+							elRef.value!.style.left = lastRect.left + 'px'
 							elRef.value!.style.right = 'auto'
 						}
 					} else if (props.placement == 'top-end') {
 						if (firstRect.left + firstRect.width < elRef.value!.offsetWidth) {
 							//top
 							if (firstRect.left + firstRect.width / 2 >= elRef.value!.offsetWidth / 2) {
-								elRef.value!.style.left = firstRect.left - parentRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+								elRef.value!.style.left = firstRect.left + firstRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 							//top-start
 							else {
-								elRef.value!.style.left = firstRect.left - parentRect.left + 'px'
+								elRef.value!.style.left = firstRect.left + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 						}
 						//top-end
 						else {
 							elRef.value!.style.left = 'auto'
-							elRef.value!.style.right = documentWidth - firstRect.right - parentRect.right + 'px'
+							elRef.value!.style.right = documentWidth - firstRect.right + 'px'
 						}
 					} else if (props.placement == 'bottom-end') {
 						if (lastRect.left + lastRect.width < elRef.value!.offsetWidth) {
 							//bottom
 							if (lastRect.left + lastRect.width / 2 >= elRef.value!.offsetWidth / 2) {
-								elRef.value!.style.left = lastRect.left - parentRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
+								elRef.value!.style.left = lastRect.left + lastRect.width / 2 - elRef.value!.offsetWidth / 2 + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 							//bottom-start
 							else {
-								elRef.value!.style.left = lastRect.left - parentRect.left + 'px'
+								elRef.value!.style.left = lastRect.left + 'px'
 								elRef.value!.style.right = 'auto'
 							}
 						}
 						//bottom-end
 						else {
 							elRef.value!.style.left = 'auto'
-							elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+							elRef.value!.style.right = documentWidth - lastRect.right + 'px'
 						}
 					}
 				}
@@ -394,19 +409,19 @@ const setPositionByNode = () => {
 	realPlacement.value = null
 	//关联元素位置
 	const nodeRect = DapElement.getElementBounding(node)
-	//定位父元素位置
-	const parentRect = DapElement.getElementBounding(<HTMLElement>elRef.value!.offsetParent)
+	//滚动容器位置
+	const scrollRect = DapElement.getElementBounding(getScrollNode() || document.documentElement)
 	//设置真实的位置
 	if (props.placement == 'top' || props.placement == 'top-start' || props.placement == 'top-end') {
-		if (nodeRect.top >= 0 && nodeRect.top >= parentRect.top && nodeRect.top >= elRef.value!.offsetHeight) {
+		if (nodeRect.top >= scrollRect.top && nodeRect.top >= elRef.value!.offsetHeight) {
 			realPlacement.value = props.placement
-		} else if (nodeRect.bottom >= 0 && nodeRect.bottom >= parentRect.bottom && nodeRect.bottom >= elRef.value!.offsetHeight) {
+		} else if (nodeRect.bottom >= scrollRect.bottom && nodeRect.bottom >= elRef.value!.offsetHeight) {
 			realPlacement.value = props.placement == 'top' ? 'bottom' : props.placement == 'top-start' ? 'bottom-start' : 'bottom-end'
 		}
 	} else if (props.placement == 'bottom' || props.placement == 'bottom-start' || props.placement == 'bottom-end') {
-		if (nodeRect.bottom >= 0 && nodeRect.bottom >= parentRect.bottom && nodeRect.bottom >= elRef.value!.offsetHeight) {
+		if (nodeRect.bottom >= scrollRect.bottom && nodeRect.bottom >= elRef.value!.offsetHeight) {
 			realPlacement.value = props.placement
-		} else if (nodeRect.top >= 0 && nodeRect.top >= parentRect.top && nodeRect.top >= elRef.value!.offsetHeight) {
+		} else if (nodeRect.top >= scrollRect.top && nodeRect.top >= elRef.value!.offsetHeight) {
 			realPlacement.value = props.placement == 'bottom' ? 'top' : props.placement == 'bottom-start' ? 'top-start' : 'top-end'
 		}
 	}
@@ -460,74 +475,74 @@ const setPositionByNode = () => {
 	nextTick(() => {
 		//设置位置对应的样式
 		if (realPlacement.value == 'top') {
-			elRef.value!.style.left = nodeRect.left - parentRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
+			elRef.value!.style.left = nodeRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
 			elRef.value!.style.right = 'auto'
-			elRef.value!.style.top = nodeRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.top = nodeRect.top - elRef.value!.offsetHeight + 'px'
 			elRef.value!.style.bottom = 'auto'
 		} else if (realPlacement.value == 'top-start') {
-			elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+			elRef.value!.style.left = nodeRect.left + 'px'
 			elRef.value!.style.right = 'auto'
-			elRef.value!.style.top = nodeRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.top = nodeRect.top - elRef.value!.offsetHeight + 'px'
 			elRef.value!.style.bottom = 'auto'
 		} else if (realPlacement.value == 'top-end') {
 			elRef.value!.style.left = 'auto'
-			elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
-			elRef.value!.style.top = nodeRect.top - parentRect.top - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.right = nodeRect.right + 'px'
+			elRef.value!.style.top = nodeRect.top - elRef.value!.offsetHeight + 'px'
 			elRef.value!.style.bottom = 'auto'
 		} else if (realPlacement.value == 'bottom') {
-			elRef.value!.style.left = nodeRect.left - parentRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
+			elRef.value!.style.left = nodeRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
 			elRef.value!.style.right = 'auto'
 			elRef.value!.style.top = 'auto'
-			elRef.value!.style.bottom = nodeRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.bottom = nodeRect.bottom - elRef.value!.offsetHeight + 'px'
 		} else if (realPlacement.value == 'bottom-start') {
-			elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+			elRef.value!.style.left = nodeRect.left + 'px'
 			elRef.value!.style.right = 'auto'
 			elRef.value!.style.top = 'auto'
-			elRef.value!.style.bottom = nodeRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.bottom = nodeRect.bottom - elRef.value!.offsetHeight + 'px'
 		} else if (realPlacement.value == 'bottom-end') {
 			elRef.value!.style.left = 'auto'
-			elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+			elRef.value!.style.right = nodeRect.right + 'px'
 			elRef.value!.style.top = 'auto'
-			elRef.value!.style.bottom = nodeRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+			elRef.value!.style.bottom = nodeRect.bottom - elRef.value!.offsetHeight + 'px'
 		} else {
 			elRef.value!.style.top = 'auto'
-			elRef.value!.style.bottom = (parentRect.bottom < 0 ? -parentRect.bottom : 0) + 'px'
+			elRef.value!.style.bottom = Math.max(scrollRect.bottom, 0) + 'px'
 			if (props.placement == 'top' || props.placement == 'bottom') {
 				if (nodeRect.right + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
 					elRef.value!.style.left = 'auto'
-					elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+					elRef.value!.style.right = nodeRect.right + 'px'
 				} else if (nodeRect.left + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
-					elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+					elRef.value!.style.left = nodeRect.left + 'px'
 					elRef.value!.style.right = 'auto'
 				} else {
-					elRef.value!.style.left = nodeRect.left - parentRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
+					elRef.value!.style.left = nodeRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
 					elRef.value!.style.right = 'auto'
 				}
 			} else if (props.placement == 'top-start' || props.placement == 'bottom-start') {
 				if (nodeRect.right + node.offsetWidth < elRef.value!.offsetWidth) {
 					if (nodeRect.right + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
-						elRef.value!.style.left = nodeRect.left - parentRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
+						elRef.value!.style.left = nodeRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
 						elRef.value!.style.right = 'auto'
 					} else {
 						elRef.value!.style.left = 'auto'
-						elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+						elRef.value!.style.right = nodeRect.right + 'px'
 					}
 				} else {
-					elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+					elRef.value!.style.left = nodeRect.left + 'px'
 					elRef.value!.style.right = 'auto'
 				}
 			} else if (props.placement == 'top-end' || props.placement == 'bottom-end') {
 				if (nodeRect.left + node.offsetWidth < elRef.value!.offsetWidth) {
 					if (nodeRect.left + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
-						elRef.value!.style.left = nodeRect.left - parentRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
+						elRef.value!.style.left = nodeRect.left + node.offsetWidth / 2 - elRef.value!.offsetWidth / 2 + 'px'
 						elRef.value!.style.right = 'auto'
 					} else {
-						elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+						elRef.value!.style.left = nodeRect.left + 'px'
 						elRef.value!.style.right = 'auto'
 					}
 				} else {
 					elRef.value!.style.left = 'auto'
-					elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+					elRef.value!.style.right = nodeRect.right + 'px'
 				}
 			}
 		}
@@ -553,26 +568,25 @@ const handleEnter = (el: Element) => {
 	setPosition()
 	emits('show', el)
 }
-//完全显示后
-const handleAfterEnter = (el: Element) => {
-	emits('shown', el)
-}
-//完全隐藏后
-const handleAfterLeave = (el: Element) => {
-	emits('hidden', el)
-}
 //窗口尺寸改动
 const handleResize = () => {
 	if (props.modelValue) {
 		emits('update:modelValue', false)
 	}
 }
-//点击定位父元素外的元素关闭浮层
+//点击定位元素和自身以外的元素关闭浮层
 const handleClick = (e: Event) => {
+	//如果鼠标移动了则不是点击事件
+	if (MOUSEMOVE.value) {
+		return
+	}
 	if (!DapElement.isElement(elRef.value)) {
 		return
 	}
-	if (DapElement.isContains(<HTMLElement>elRef.value!.offsetParent, <HTMLElement>e.target)) {
+	if (DapElement.isContains(elRef.value!, e.target as HTMLElement)) {
+		return
+	}
+	if (!props.useRange && getNode()! && DapElement.isContains(getNode()!, e.target as HTMLElement)) {
 		return
 	}
 	if (props.modelValue) {
@@ -584,6 +598,19 @@ onMounted(() => {
 	if (props.modelValue) {
 		setPosition()
 	}
+	DapEvent.on(window, `mousedown.editify_layer_${instance.uid} mousemove.editify_layer_${instance.uid} mouseup.editify_layer_${instance.uid}`, e => {
+		if (e.type == 'mousedown') {
+			MOUSEDOWN.value = true
+			MOUSEMOVE.value = false
+		} else if (e.type == 'mousemove') {
+			if (MOUSEDOWN.value) {
+				MOUSEMOVE.value = true
+			}
+		} else if (e.type == 'mouseup') {
+			MOUSEDOWN.value = false
+		}
+	})
+
 	DapEvent.on(window, `click.editify_layer_${instance.uid}`, handleClick)
 	DapEvent.on(window, `resize.editify_layer_${instance.uid}`, handleResize)
 })

package/src/components/layer/props.ts

@@ -15,6 +15,11 @@ export const LayerProps = {
 		type: [String, HTMLElement] as PropType<string | HTMLElement | null>,
 		default: null
 	},
+	//关联滚动容器元素,为toolbar设计使用的属性
+	scrollNode: {
+		type: [String, HTMLElement] as PropType<string | HTMLElement | null>,
+		default: null
+	},
 	//是否显示边框
 	border: {
 		type: Boolean,
@@ -51,7 +56,7 @@ export const LayerProps = {
 	//层级
 	zIndex: {
 		type: Number,
-		default: 10
+		default: 1
 	},
 	//动画
 	animation: {

package/src/components/menu/menu.less

@@ -5,7 +5,6 @@
 	width: 100%;
 	background-color: var(--editify-background);
 	position: relative;
-	z-index: 2;
 
 	//默认菜单模式
 	&[data-editify-mode='default'] {