Archer
1 year ago
committed by
GitHub
commit
f6c4022261
@ -1,8 +0,0 @@
|
|||||||
/build/
|
|
||||||
/config/
|
|
||||||
/dist/
|
|
||||||
/*.js
|
|
||||||
/test/unit/coverage/
|
|
||||||
/node_modules/*
|
|
||||||
/dist*
|
|
||||||
/src/main.ts
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
// @ts-check
|
|
||||||
const { defineConfig } = require('eslint-define-config')
|
|
||||||
module.exports = defineConfig({
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
browser: true,
|
|
||||||
node: true,
|
|
||||||
es6: true
|
|
||||||
},
|
|
||||||
parser: 'vue-eslint-parser',
|
|
||||||
parserOptions: {
|
|
||||||
parser: '@typescript-eslint/parser',
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
sourceType: 'module',
|
|
||||||
jsxPragma: 'React',
|
|
||||||
ecmaFeatures: {
|
|
||||||
jsx: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
'plugin:vue/vue3-recommended',
|
|
||||||
'plugin:@typescript-eslint/recommended',
|
|
||||||
'prettier',
|
|
||||||
'plugin:prettier/recommended'
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
'vue/no-setup-props-destructure': 'off',
|
|
||||||
'vue/script-setup-uses-vars': 'error',
|
|
||||||
'vue/no-reserved-component-names': 'off',
|
|
||||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
|
||||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
|
||||||
'@typescript-eslint/no-explicit-any': 'off',
|
|
||||||
'@typescript-eslint/no-var-requires': 'off',
|
|
||||||
'@typescript-eslint/no-empty-function': 'off',
|
|
||||||
'vue/custom-event-name-casing': 'off',
|
|
||||||
'no-use-before-define': 'off',
|
|
||||||
'@typescript-eslint/no-use-before-define': 'off',
|
|
||||||
'@typescript-eslint/ban-ts-comment': 'off',
|
|
||||||
'@typescript-eslint/ban-types': 'off',
|
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
|
||||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
|
||||||
'@typescript-eslint/no-unused-vars': 'off',
|
|
||||||
'no-unused-vars': 'off',
|
|
||||||
'space-before-function-paren': 'off',
|
|
||||||
|
|
||||||
'vue/attributes-order': 'off',
|
|
||||||
'vue/one-component-per-file': 'off',
|
|
||||||
'vue/html-closing-bracket-newline': 'off',
|
|
||||||
'vue/max-attributes-per-line': 'off',
|
|
||||||
'vue/multiline-html-element-content-newline': 'off',
|
|
||||||
'vue/singleline-html-element-content-newline': 'off',
|
|
||||||
'vue/attribute-hyphenation': 'off',
|
|
||||||
'vue/require-default-prop': 'off',
|
|
||||||
'vue/require-explicit-emits': 'off',
|
|
||||||
'vue/html-self-closing': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
html: {
|
|
||||||
void: 'always',
|
|
||||||
normal: 'never',
|
|
||||||
component: 'always'
|
|
||||||
},
|
|
||||||
svg: 'always',
|
|
||||||
math: 'always'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
'vue/multi-word-component-names': 'off',
|
|
||||||
'vue/no-v-html': 'off',
|
|
||||||
'vue/require-toggle-inside-transition': 'off'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@ -1,4 +1 @@
|
|||||||
#!/bin/sh
|
npx --no -- commitlint --edit $1
|
||||||
. "$(dirname "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
pnpm commitlint --edit "$1"
|
|
||||||
@ -1,8 +1,2 @@
|
|||||||
#!/bin/sh
|
|
||||||
. "$(dirname "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
[ -n "$CI" ] && exit 0
|
|
||||||
|
|
||||||
# Format and submit code according to lintstagedrc.js configuration
|
|
||||||
npm run ts:check
|
npm run ts:check
|
||||||
npm run lint:lint-staged
|
npm run lint:lint-staged
|
||||||
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue