vue-editify 0.1.10 → 0.1.13

package/src/components/layer/layer.vue

@@ -0,0 +1,598 @@
+<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="{ border: border }" :style="wrapStyle">
+				<slot></slot>
+			</div>
+		</div>
+	</Transition>
+</template>
+<script setup lang="ts">
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { element as DapElement, event as DapEvent } from 'dap-util'
+import Triangle from '../triangle/triangle.vue'
+import { LayerPlacementType, LayerProps } from './props'
+import { TrianglePlacementType } from '../triangle/props'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'Layer'
+})
+const instance = getCurrentInstance()!
+const props = defineProps(LayerProps)
+const emits = defineEmits(['update:modelValue', 'show', 'shown', 'hidden'])
+
+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 triPlacement = computed<TrianglePlacementType>(() => {
+	if (realPlacement.value == 'bottom-start' || realPlacement.value == 'bottom' || realPlacement.value == 'bottom-end') {
+		return 'top'
+	}
+	if (realPlacement.value == 'top-start' || realPlacement.value == 'top' || realPlacement.value == 'top-end') {
+		return 'bottom'
+	}
+	if (realPlacement.value == 'left-start' || realPlacement.value == 'left' || realPlacement.value == 'left-end') {
+		return 'right'
+	}
+	if (realPlacement.value == 'right-start' || realPlacement.value == 'right' || realPlacement.value == 'right-end') {
+		return 'left'
+	}
+	return 'top'
+})
+const wrapStyle = computed<ObjectType>(() => {
+	return {
+		borderColor: props.border ? props.borderColor || '' : '',
+		background: props.background || '',
+		color: props.color || ''
+	}
+})
+
+//获取目标元素
+const getNode = () => {
+	if (!props.node) {
+		return null
+	}
+	if (DapElement.isElement(props.node)) {
+		return <HTMLElement>props.node
+	}
+	return <HTMLElement>document.body.querySelector(<string>props.node)
+}
+//根据range设置三角形位置
+const setTrianglePositionByRange = () => {
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount) {
+		const range = selection.getRangeAt(0)
+		const rects = range.getClientRects()
+		if (rects.length) {
+			//range的第一个位置
+			const firstRect = rects[0]
+			//range的最后一个位置
+			const lastRect = rects[rects.length - 1]
+			if (realPlacement.value == 'top') {
+				triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.right = 'auto'
+				triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+				triangleRef.value!.$el.style.bottom = 'auto'
+			} else if (realPlacement.value == 'top-start') {
+				triangleRef.value!.$el.style.left = (wrapRef.value!.offsetWidth > firstRect.width ? firstRect.width : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.right = 'auto'
+				triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+				triangleRef.value!.$el.style.bottom = 'auto'
+			} else if (realPlacement.value == 'top-end') {
+				triangleRef.value!.$el.style.left = 'auto'
+				triangleRef.value!.$el.style.right = (wrapRef.value!.offsetWidth > firstRect.width ? firstRect.width : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+				triangleRef.value!.$el.style.bottom = 'auto'
+			} else if (realPlacement.value == 'bottom') {
+				triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.right = 'auto'
+				triangleRef.value!.$el.style.top = 'auto'
+				triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+			} else if (realPlacement.value == 'bottom-start') {
+				triangleRef.value!.$el.style.left = (wrapRef.value!.offsetWidth > lastRect.width ? lastRect.width : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.right = 'auto'
+				triangleRef.value!.$el.style.top = 'auto'
+				triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+			} else if (realPlacement.value == 'bottom-end') {
+				triangleRef.value!.$el.style.left = 'auto'
+				triangleRef.value!.$el.style.right = (wrapRef.value!.offsetWidth > lastRect.width ? lastRect.width : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.top = 'auto'
+				triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+			} else {
+				triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+				triangleRef.value!.$el.style.right = 'auto'
+				triangleRef.value!.$el.style.top = -triangleRef.value!.$el.offsetHeight + 1 + 'px'
+				triangleRef.value!.$el.style.bottom = 'auto'
+			}
+		}
+	}
+}
+//根据node设置三角形位置
+const setTrianglePositionByNode = () => {
+	const node = getNode()!
+	if (!DapElement.isElement(node)) {
+		return
+	}
+	if (realPlacement.value == 'top') {
+		triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.right = 'auto'
+		triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+		triangleRef.value!.$el.style.bottom = 'auto'
+	} else if (realPlacement.value == 'top-start') {
+		triangleRef.value!.$el.style.left = (wrapRef.value!.offsetWidth > node.offsetWidth ? node.offsetWidth : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.right = 'auto'
+		triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+		triangleRef.value!.$el.style.bottom = 'auto'
+	} else if (realPlacement.value == 'top-end') {
+		triangleRef.value!.$el.style.left = 'auto'
+		triangleRef.value!.$el.style.right = (wrapRef.value!.offsetWidth > node.offsetWidth ? node.offsetWidth : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.top = wrapRef.value!.offsetHeight - 1 + 'px'
+		triangleRef.value!.$el.style.bottom = 'auto'
+	} else if (realPlacement.value == 'bottom') {
+		triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.right = 'auto'
+		triangleRef.value!.$el.style.top = 'auto'
+		triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+	} else if (realPlacement.value == 'bottom-start') {
+		triangleRef.value!.$el.style.left = (wrapRef.value!.offsetWidth > node.offsetWidth ? node.offsetWidth : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.right = 'auto'
+		triangleRef.value!.$el.style.top = 'auto'
+		triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+	} else if (realPlacement.value == 'bottom-end') {
+		triangleRef.value!.$el.style.left = 'auto'
+		triangleRef.value!.$el.style.right = (wrapRef.value!.offsetWidth > node.offsetWidth ? node.offsetWidth : wrapRef.value!.offsetWidth) / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.top = 'auto'
+		triangleRef.value!.$el.style.bottom = wrapRef.value!.offsetHeight - 1 + 'px'
+	} else {
+		triangleRef.value!.$el.style.left = wrapRef.value!.offsetWidth / 2 - triangleRef.value!.$el.offsetWidth / 2 + 'px'
+		triangleRef.value!.$el.style.right = 'auto'
+		triangleRef.value!.$el.style.top = -triangleRef.value!.$el.offsetHeight + 1 + 'px'
+		triangleRef.value!.$el.style.bottom = 'auto'
+	}
+}
+//根据range设置位置
+const setPositionByRange = () => {
+	//重置
+	realPlacement.value = null
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount) {
+		const range = selection.getRangeAt(0)
+		const rects = range.getClientRects()
+		if (rects.length) {
+			//range的第一个位置
+			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
+
+			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) {
+					realPlacement.value = props.placement
+				} else if (documentHeight - lastRect.bottom >= 0 && documentHeight - lastRect.bottom >= parentRect.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) {
+					realPlacement.value = props.placement
+				} else if (firstRect.top >= 0 && firstRect.top >= parentRect.top && firstRect.top >= elRef.value!.offsetHeight) {
+					realPlacement.value = props.placement == 'bottom' ? 'top' : props.placement == 'bottom-start' ? 'top-start' : 'top-end'
+				}
+			}
+
+			//判断左右是否足够空间显示
+			if (realPlacement.value == 'top') {
+				if (documentWidth - firstRect.right + firstRect.width / 2 < elRef.value!.offsetWidth / 2) {
+					realPlacement.value = 'top-end'
+				} else if (firstRect.left + firstRect.width / 2 < elRef.value!.offsetWidth / 2) {
+					realPlacement.value = 'top-start'
+				}
+			} else if (realPlacement.value == 'bottom') {
+				if (documentWidth - lastRect.right + lastRect.width / 2 < elRef.value!.offsetWidth / 2) {
+					realPlacement.value = 'bottom-end'
+				} else if (lastRect.left + lastRect.width / 2 < elRef.value!.offsetWidth / 2) {
+					realPlacement.value = 'bottom-start'
+				}
+			} else if (realPlacement.value == 'top-start') {
+				if (documentWidth - firstRect.right + firstRect.width < elRef.value!.offsetWidth) {
+					if (documentWidth - firstRect.right + firstRect.width / 2 >= elRef.value!.offsetWidth / 2) {
+						realPlacement.value = 'top'
+					} else {
+						realPlacement.value = 'top-end'
+					}
+				}
+			} else if (realPlacement.value == 'bottom-start') {
+				if (documentWidth - lastRect.right + lastRect.width < elRef.value!.offsetWidth) {
+					if (documentWidth - lastRect.right + lastRect.width / 2 >= elRef.value!.offsetWidth / 2) {
+						realPlacement.value = 'bottom'
+					} else {
+						realPlacement.value = 'bottom-end'
+					}
+				}
+			} else if (realPlacement.value == 'top-end') {
+				if (firstRect.left + firstRect.width < elRef.value!.offsetWidth) {
+					if (firstRect.left + firstRect.width / 2 >= elRef.value!.offsetWidth / 2) {
+						realPlacement.value = 'top'
+					} else {
+						realPlacement.value = 'top-start'
+					}
+				}
+			} else if (realPlacement.value == 'bottom-end') {
+				if (lastRect.left + lastRect.width < elRef.value!.offsetWidth) {
+					if (lastRect.left + lastRect.width / 2 >= elRef.value!.offsetWidth / 2) {
+						realPlacement.value = 'bottom'
+					} else {
+						realPlacement.value = 'bottom-start'
+					}
+				}
+			}
+			nextTick(() => {
+				//设置位置对应的样式
+				if (realPlacement.value == 'top') {
+					elRef.value!.style.left = firstRect.left - parentRect.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.bottom = 'auto'
+				} else if (realPlacement.value == 'top-start') {
+					elRef.value!.style.left = firstRect.left - parentRect.left + 'px'
+					elRef.value!.style.right = 'auto'
+					elRef.value!.style.top = firstRect.top - parentRect.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.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.right = 'auto'
+					elRef.value!.style.top = 'auto'
+					elRef.value!.style.bottom = documentHeight - lastRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+				} else if (realPlacement.value == 'bottom-start') {
+					elRef.value!.style.left = lastRect.left - parentRect.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'
+				} else if (realPlacement.value == 'bottom-end') {
+					elRef.value!.style.left = 'auto'
+					elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+					elRef.value!.style.top = 'auto'
+					elRef.value!.style.bottom = documentHeight - lastRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+				} else {
+					elRef.value!.style.top = 'auto'
+					elRef.value!.style.bottom = (parentRect.bottom < 0 ? -parentRect.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'
+						}
+						//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.right = 'auto'
+						}
+						//top
+						else {
+							elRef.value!.style.left = firstRect.left - parentRect.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'
+						}
+						//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.right = 'auto'
+						}
+						//bottom
+						else {
+							elRef.value!.style.left = lastRect.left - parentRect.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.right = 'auto'
+							}
+							//top-end
+							else {
+								elRef.value!.style.left = 'auto'
+								elRef.value!.style.right = documentWidth - firstRect.right - parentRect.right + 'px'
+							}
+						}
+						//top-start
+						else {
+							elRef.value!.style.left = firstRect.left - parentRect.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.right = 'auto'
+							}
+							//bottom-end
+							else {
+								elRef.value!.style.left = 'auto'
+								elRef.value!.style.right = documentWidth - lastRect.right - parentRect.right + 'px'
+							}
+						}
+						//bottom-start
+						else {
+							elRef.value!.style.left = lastRect.left - parentRect.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.right = 'auto'
+							}
+							//top-start
+							else {
+								elRef.value!.style.left = firstRect.left - parentRect.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'
+						}
+					} 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.right = 'auto'
+							}
+							//bottom-start
+							else {
+								elRef.value!.style.left = lastRect.left - parentRect.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'
+						}
+					}
+				}
+				//三角形位置
+				if (props.showTriangle) {
+					setTrianglePositionByRange()
+				}
+			})
+		}
+	}
+}
+//根据node设置位置
+const setPositionByNode = () => {
+	const node = getNode()!
+	if (!DapElement.isElement(node)) {
+		return
+	}
+	//重置
+	realPlacement.value = null
+	//关联元素位置
+	const nodeRect = DapElement.getElementBounding(node)
+	//定位父元素位置
+	const parentRect = DapElement.getElementBounding(<HTMLElement>elRef.value!.offsetParent)
+	//设置真实的位置
+	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) {
+			realPlacement.value = props.placement
+		} else if (nodeRect.bottom >= 0 && nodeRect.bottom >= parentRect.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) {
+			realPlacement.value = props.placement
+		} else if (nodeRect.top >= 0 && nodeRect.top >= parentRect.top && nodeRect.top >= elRef.value!.offsetHeight) {
+			realPlacement.value = props.placement == 'bottom' ? 'top' : props.placement == 'bottom-start' ? 'top-start' : 'top-end'
+		}
+	}
+	//判断左右是否足够空间显示
+	if (realPlacement.value == 'top') {
+		if (nodeRect.right + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
+			realPlacement.value = 'top-end'
+		} else if (nodeRect.left + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
+			realPlacement.value = 'top-start'
+		}
+	} else if (realPlacement.value == 'top-start') {
+		if (nodeRect.right + node.offsetWidth < elRef.value!.offsetWidth) {
+			if (nodeRect.right + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
+				realPlacement.value = 'top'
+			} else {
+				realPlacement.value = 'top-end'
+			}
+		}
+	} else if (realPlacement.value == 'top-end') {
+		if (nodeRect.left + node.offsetWidth < elRef.value!.offsetWidth) {
+			if (nodeRect.left + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
+				realPlacement.value = 'top'
+			} else {
+				realPlacement.value = 'top-start'
+			}
+		}
+	} else if (realPlacement.value == 'bottom') {
+		if (nodeRect.right + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
+			realPlacement.value = 'bottom-end'
+		} else if (nodeRect.left + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
+			realPlacement.value = 'bottom-start'
+		}
+	} else if (realPlacement.value == 'bottom-start') {
+		if (nodeRect.right + node.offsetWidth < elRef.value!.offsetWidth) {
+			if (nodeRect.right + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
+				realPlacement.value = 'bottom'
+			} else {
+				realPlacement.value = 'bottom-end'
+			}
+		}
+	} else if (realPlacement.value == 'bottom-end') {
+		if (nodeRect.left + node.offsetWidth < elRef.value!.offsetWidth) {
+			if (nodeRect.left + node.offsetWidth / 2 >= elRef.value!.offsetWidth / 2) {
+				realPlacement.value = 'bottom'
+			} else {
+				realPlacement.value = 'bottom-start'
+			}
+		}
+	}
+
+	nextTick(() => {
+		//设置位置对应的样式
+		if (realPlacement.value == 'top') {
+			elRef.value!.style.left = nodeRect.left - parentRect.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.bottom = 'auto'
+		} else if (realPlacement.value == 'top-start') {
+			elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+			elRef.value!.style.right = 'auto'
+			elRef.value!.style.top = nodeRect.top - parentRect.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.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.right = 'auto'
+			elRef.value!.style.top = 'auto'
+			elRef.value!.style.bottom = nodeRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+		} else if (realPlacement.value == 'bottom-start') {
+			elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+			elRef.value!.style.right = 'auto'
+			elRef.value!.style.top = 'auto'
+			elRef.value!.style.bottom = nodeRect.bottom - parentRect.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.top = 'auto'
+			elRef.value!.style.bottom = nodeRect.bottom - parentRect.bottom - elRef.value!.offsetHeight + 'px'
+		} else {
+			elRef.value!.style.top = 'auto'
+			elRef.value!.style.bottom = (parentRect.bottom < 0 ? -parentRect.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'
+				} else if (nodeRect.left + node.offsetWidth / 2 < elRef.value!.offsetWidth / 2) {
+					elRef.value!.style.left = nodeRect.left - parentRect.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.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.right = 'auto'
+					} else {
+						elRef.value!.style.left = 'auto'
+						elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+					}
+				} else {
+					elRef.value!.style.left = nodeRect.left - parentRect.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.right = 'auto'
+					} else {
+						elRef.value!.style.left = nodeRect.left - parentRect.left + 'px'
+						elRef.value!.style.right = 'auto'
+					}
+				} else {
+					elRef.value!.style.left = 'auto'
+					elRef.value!.style.right = nodeRect.right - parentRect.right + 'px'
+				}
+			}
+		}
+		//三角形位置
+		if (props.showTriangle) {
+			setTrianglePositionByNode()
+		}
+	})
+}
+//设置位置
+const setPosition = () => {
+	//如果根据range来定位
+	if (props.useRange) {
+		setPositionByRange()
+	}
+	//根据传入的node来定位
+	else {
+		setPositionByNode()
+	}
+}
+//显示时
+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 (!DapElement.isElement(elRef.value)) {
+		return
+	}
+	if (DapElement.isContains(<HTMLElement>elRef.value!.offsetParent, <HTMLElement>e.target)) {
+		return
+	}
+	if (props.modelValue) {
+		emits('update:modelValue', false)
+	}
+}
+
+onMounted(() => {
+	if (props.modelValue) {
+		setPosition()
+	}
+	DapEvent.on(window, `click.editify_layer_${instance.uid}`, handleClick)
+	DapEvent.on(window, `resize.editify_layer_${instance.uid}`, handleResize)
+})
+onBeforeUnmount(() => {
+	DapEvent.off(window, `click.editify_layer_${instance.uid} resize.editify_layer_${instance.uid}`)
+})
+
+defineExpose({
+	setPosition
+})
+</script>
+<style scoped src="./layer.less"></style>

package/src/components/layer/props.ts

@@ -0,0 +1,71 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+
+export type LayerPlacementType = 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+
+export type LayerAnimationType = 'translate' | 'fade' | null
+
+export const LayerProps = {
+	//是否显示
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	//关联元素
+	node: {
+		type: [String, HTMLElement] as PropType<string | HTMLElement | null>,
+		default: null
+	},
+	//是否显示边框
+	border: {
+		type: Boolean,
+		default: false
+	},
+	//边框颜色
+	borderColor: {
+		type: String,
+		default: null
+	},
+	//背景色
+	background: {
+		type: String,
+		default: null
+	},
+	//字体颜色
+	color: {
+		type: String,
+		default: null
+	},
+	//位置
+	placement: {
+		type: String as PropType<LayerPlacementType>,
+		default: 'bottom',
+		validator(value: any) {
+			return ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'].includes(value)
+		}
+	},
+	//是否显示三角形
+	showTriangle: {
+		type: Boolean,
+		default: false
+	},
+	//层级
+	zIndex: {
+		type: Number,
+		default: 10
+	},
+	//动画
+	animation: {
+		type: String as PropType<LayerAnimationType>,
+		default: null,
+		validator(value: any) {
+			return ['translate', 'fade', null].includes(value)
+		}
+	},
+	//是否根据range对象来定位，此时不需要传入node
+	useRange: {
+		type: Boolean,
+		default: false
+	}
+}
+
+export type LayerPropsType = ExtractPublicPropTypes<typeof LayerProps>