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
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
pnpm commitlint --edit "$1"
|
||||
npx --no -- 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 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