first commit
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useResize = (props?: {
|
||||
minHeightPx?: number
|
||||
minWidthPx?: number
|
||||
initHeight?: number
|
||||
initWidth?: number
|
||||
}) => {
|
||||
const {
|
||||
minHeightPx = 400,
|
||||
minWidthPx = window.innerWidth / 2,
|
||||
initHeight = 400,
|
||||
initWidth = window.innerWidth / 2
|
||||
} = props || {}
|
||||
// 屏幕宽度的 50% 作为最小宽度
|
||||
// const minWidthPx = window.innerWidth / 2
|
||||
// 固定的最小高度 400px
|
||||
// const minHeightPx = 400
|
||||
// 初始高度限制为 400px
|
||||
const maxHeight = ref(initHeight + 'px')
|
||||
// 初始宽度限制为 50%
|
||||
const minWidth = ref(initWidth + 'px')
|
||||
const setupDrag = (elDialog: any, el: any) => {
|
||||
// 获取对话框元素
|
||||
// 是否正在调整大小的标志
|
||||
let isResizing = false
|
||||
// 当前调整的方向
|
||||
let currentResizeDirection = ''
|
||||
|
||||
// 鼠标移动时的事件处理器，用于检测鼠标位置并设置相应的光标样式
|
||||
const handleMouseMove = (e: any) => {
|
||||
const rect = elDialog.getBoundingClientRect()
|
||||
// 鼠标相对于对话框左侧的偏移量
|
||||
const offsetX = e.clientX - rect.left
|
||||
// 鼠标相对于对话框顶部的偏移量
|
||||
const offsetY = e.clientY - rect.top
|
||||
const width = elDialog.clientWidth
|
||||
const height = elDialog.clientHeight
|
||||
|
||||
// 获取对话框的内边距
|
||||
const computedStyle = window.getComputedStyle(elDialog)
|
||||
const paddingLeft = parseFloat(computedStyle.paddingLeft)
|
||||
const paddingRight = parseFloat(computedStyle.paddingRight)
|
||||
const paddingBottom = parseFloat(computedStyle.paddingBottom)
|
||||
const paddingTop = parseFloat(computedStyle.paddingTop)
|
||||
|
||||
// 根据鼠标位置设置相应的光标样式和调整方向
|
||||
if (!isResizing) {
|
||||
if (offsetX < paddingLeft && offsetY > paddingTop && offsetY < height - paddingBottom) {
|
||||
elDialog.style.cursor = 'ew-resize' // 左右箭头
|
||||
currentResizeDirection = 'left'
|
||||
} else if (
|
||||
offsetX > width - paddingRight &&
|
||||
offsetY > paddingTop &&
|
||||
offsetY < height - paddingBottom
|
||||
) {
|
||||
elDialog.style.cursor = 'ew-resize' // 左右箭头
|
||||
currentResizeDirection = 'right'
|
||||
} else if (
|
||||
offsetY < paddingTop &&
|
||||
offsetX > paddingLeft &&
|
||||
offsetX < width - paddingRight
|
||||
) {
|
||||
elDialog.style.cursor = 'ns-resize' // 上下箭头
|
||||
currentResizeDirection = 'top'
|
||||
} else if (
|
||||
offsetY > height - paddingBottom &&
|
||||
offsetX > paddingLeft &&
|
||||
offsetX < width - paddingRight
|
||||
) {
|
||||
elDialog.style.cursor = 'ns-resize' // 上下箭头
|
||||
currentResizeDirection = 'bottom'
|
||||
} else if (offsetX < paddingLeft && offsetY < paddingTop) {
|
||||
elDialog.style.cursor = 'nwse-resize' // 左上右下箭头
|
||||
currentResizeDirection = 'top-left'
|
||||
} else if (offsetX > width - paddingRight && offsetY < paddingTop) {
|
||||
elDialog.style.cursor = 'nesw-resize' // 右上左下箭头
|
||||
currentResizeDirection = 'top-right'
|
||||
} else if (offsetX < paddingLeft && offsetY > height - paddingBottom) {
|
||||
elDialog.style.cursor = 'nesw-resize' // 右上左下箭头
|
||||
currentResizeDirection = 'bottom-left'
|
||||
} else if (offsetX > width - paddingRight && offsetY > height - paddingBottom) {
|
||||
elDialog.style.cursor = 'nwse-resize' // 左上右下箭头
|
||||
currentResizeDirection = 'bottom-right'
|
||||
} else {
|
||||
elDialog.style.cursor = 'default'
|
||||
currentResizeDirection = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标按下时的事件处理器，开始调整对话框大小
|
||||
const handleMouseDown = (e) => {
|
||||
if (currentResizeDirection) {
|
||||
isResizing = true
|
||||
|
||||
const initialX = e.clientX
|
||||
const initialY = e.clientY
|
||||
const initialWidth = elDialog.clientWidth
|
||||
const initialHeight = el.querySelector('.el-dialog__body').clientHeight
|
||||
|
||||
// 调整大小的事件处理器
|
||||
const handleResizing = (e: any) => {
|
||||
if (!isResizing) return
|
||||
|
||||
let newWidth = initialWidth
|
||||
let newHeight = initialHeight
|
||||
|
||||
// 根据当前调整方向计算新的宽度和高度
|
||||
if (currentResizeDirection.includes('right')) {
|
||||
newWidth = Math.max(minWidthPx, initialWidth + (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection.includes('left')) {
|
||||
newWidth = Math.max(minWidthPx, initialWidth - (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection.includes('bottom')) {
|
||||
newHeight = Math.max(minHeightPx, initialHeight + (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection.includes('top')) {
|
||||
newHeight = Math.max(minHeightPx, initialHeight - (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection === 'top-left') {
|
||||
newWidth = Math.max(minWidthPx, initialWidth - (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
newHeight = Math.max(minHeightPx, initialHeight - (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection === 'top-right') {
|
||||
newWidth = Math.max(minWidthPx, initialWidth + (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
newHeight = Math.max(minHeightPx, initialHeight - (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection === 'bottom-left') {
|
||||
newWidth = Math.max(minWidthPx, initialWidth - (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
newHeight = Math.max(minHeightPx, initialHeight + (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
|
||||
if (currentResizeDirection === 'bottom-right') {
|
||||
newWidth = Math.max(minWidthPx, initialWidth + (e.clientX - initialX) * 2)
|
||||
minWidth.value = `${newWidth}px`
|
||||
newHeight = Math.max(minHeightPx, initialHeight + (e.clientY - initialY) * 2 - 20)
|
||||
maxHeight.value = `${Math.min(newHeight, window.innerHeight - 165)}px`
|
||||
}
|
||||
}
|
||||
// 停止调整大小的事件处理器
|
||||
const stopResizing = () => {
|
||||
isResizing = false
|
||||
document.removeEventListener('mousemove', handleResizing)
|
||||
document.removeEventListener('mouseup', stopResizing)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', handleResizing)
|
||||
document.addEventListener('mouseup', stopResizing)
|
||||
}
|
||||
}
|
||||
elDialog.addEventListener('mousemove', handleMouseMove)
|
||||
elDialog.addEventListener('mousedown', handleMouseDown)
|
||||
}
|
||||
|
||||
return {
|
||||
setupDrag,
|
||||
maxHeight,
|
||||
minWidth
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import Dialog from './src/Dialog.vue'
|
||||
|
||||
export { Dialog }
|
||||
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { ElDialog, ElScrollbar } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { computed, useAttrs, ref, unref, useSlots, watch, nextTick } from 'vue'
|
||||
import { isNumber } from '@/utils/is'
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.bool.def(false),
|
||||
title: propTypes.string.def('Dialog'),
|
||||
fullscreen: propTypes.bool.def(true),
|
||||
maxHeight: propTypes.oneOfType([String, Number]).def('400px')
|
||||
})
|
||||
|
||||
const getBindValue = computed(() => {
|
||||
const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
|
||||
const attrs = useAttrs()
|
||||
const obj = { ...attrs, ...props }
|
||||
for (const key in obj) {
|
||||
if (delArr.indexOf(key) !== -1) {
|
||||
delete obj[key]
|
||||
}
|
||||
}
|
||||
return obj
|
||||
})
|
||||
|
||||
const isFullscreen = ref(false)
|
||||
|
||||
const toggleFull = () => {
|
||||
isFullscreen.value = !unref(isFullscreen)
|
||||
}
|
||||
|
||||
const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
|
||||
|
||||
watch(
|
||||
() => isFullscreen.value,
|
||||
async (val: boolean) => {
|
||||
await nextTick()
|
||||
if (val) {
|
||||
const windowHeight = document.documentElement.offsetHeight
|
||||
dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
|
||||
} else {
|
||||
dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.maxHeight,
|
||||
(val) => {
|
||||
dialogHeight.value = isNumber(val) ? `${val}px` : val
|
||||
}
|
||||
)
|
||||
|
||||
const dialogStyle = computed(() => {
|
||||
return {
|
||||
height: unref(dialogHeight)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElDialog
|
||||
v-bind="getBindValue"
|
||||
:fullscreen="isFullscreen"
|
||||
destroy-on-close
|
||||
lock-scroll
|
||||
draggable
|
||||
top="0"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
>
|
||||
<template #header="{ close }">
|
||||
<div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
|
||||
<slot name="title">
|
||||
{{ title }}
|
||||
</slot>
|
||||
<div
|
||||
class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
|
||||
>
|
||||
<Icon
|
||||
v-if="fullscreen"
|
||||
class="cursor-pointer is-hover !h-54px mr-10px"
|
||||
:icon="
|
||||
isFullscreen ? 'vi-radix-icons:exit-full-screen' : 'vi-radix-icons:enter-full-screen'
|
||||
"
|
||||
color="var(--el-color-info)"
|
||||
hover-color="var(--el-color-primary)"
|
||||
@click="toggleFull"
|
||||
/>
|
||||
<Icon
|
||||
class="cursor-pointer is-hover !h-54px"
|
||||
icon="vi-ep:close"
|
||||
hover-color="var(--el-color-primary)"
|
||||
color="var(--el-color-info)"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElScrollbar :style="dialogStyle">
|
||||
<slot></slot>
|
||||
</ElScrollbar>
|
||||
|
||||
<template v-if="slots.footer" #footer>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.@{elNamespace}-overlay-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.@{elNamespace}-dialog {
|
||||
margin: 0 !important;
|
||||
|
||||
&__header {
|
||||
height: 54px;
|
||||
padding: 0;
|
||||
margin-right: 0 !important;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
&__headerbtn {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script lang="tsx" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { computed, getCurrentInstance, onMounted, unref, useAttrs, useSlots } from 'vue'
|
||||
import Dialog from './Dialog.vue'
|
||||
import { useResize } from '../hooks/useResize'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: propTypes.bool.def(false),
|
||||
title: propTypes.string.def('Dialog'),
|
||||
fullscreen: propTypes.bool.def(true),
|
||||
initWidth: propTypes.number.def(window.innerWidth / 2),
|
||||
initHeight: propTypes.number.def(200),
|
||||
minResizeWidth: propTypes.number.def(window.innerWidth / 2),
|
||||
minResizeHeight: propTypes.number.def(200)
|
||||
})
|
||||
const { maxHeight, minWidth, setupDrag } = useResize({
|
||||
minHeightPx: props.minResizeHeight,
|
||||
minWidthPx: props.minResizeWidth,
|
||||
initHeight: props.initHeight,
|
||||
initWidth: props.initWidth
|
||||
})
|
||||
|
||||
const vResize = {
|
||||
mounted(el) {
|
||||
const observer = new MutationObserver(() => {
|
||||
const elDialog = el.querySelector('.el-dialog')
|
||||
|
||||
if (elDialog) {
|
||||
// 在确认 `elDialog` 已渲染后进行处理
|
||||
setupDrag(elDialog, el)
|
||||
// observer.disconnect() // 一旦获取到元素，停止观察
|
||||
}
|
||||
})
|
||||
// 开始观察子节点的变化
|
||||
observer.observe(el, { childList: true, subtree: true })
|
||||
}
|
||||
}
|
||||
|
||||
const attrs = useAttrs()
|
||||
const slots = useSlots()
|
||||
const getBindValue = computed(() => {
|
||||
const delArr: string[] = ['maxHeight', 'width']
|
||||
const obj = Object.assign({}, { ...unref(attrs), ...props })
|
||||
for (const key in obj) {
|
||||
if (delArr.indexOf(key) !== -1) {
|
||||
delete obj[key]
|
||||
}
|
||||
}
|
||||
return obj
|
||||
})
|
||||
const instance = getCurrentInstance()
|
||||
const initDirective = () => {
|
||||
const directives = instance?.appContext?.app._context?.directives
|
||||
|
||||
// 检查指令是否已经注册
|
||||
if (!directives || !directives['resize']) {
|
||||
instance?.appContext?.app.directive('resize', vResize)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
initDirective()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div v-resize>
|
||||
<Dialog v-bind="getBindValue" :maxHeight="maxHeight" :width="minWidth">
|
||||
<slot></slot>
|
||||
<template v-if="slots.footer" #footer>
|
||||
<slot name="footer"></slot>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user