Skip to content

Commit

Permalink
fix: 可调整容器组件 (#20)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chunhuili12138
chunhuili12138 authored Aug 25, 2022
1 parent 555013a commit 14a5c45
Show file tree
Hide file tree
Showing 19 changed files with 1,870 additions and 48 deletions.
20 changes: 15 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,35 @@
"@bytemd/plugin-medium-zoom": "^1.17.2",
"@bytemd/plugin-mermaid": "^1.17.2",
"@bytemd/vue-next": "^1.17.2",
"@tiptap/extension-code-block-lowlight": "^2.0.0-beta.73",
"@tiptap/extension-highlight": "^2.0.0-beta.35",
"@tiptap/extension-image": "^2.0.0-beta.30",
"@tiptap/extension-table": "^2.0.0-beta.54",
"@tiptap/extension-table-cell": "^2.0.0-beta.23",
"@tiptap/extension-table-header": "^2.0.0-beta.25",
"@tiptap/extension-table-row": "^2.0.0-beta.22",
"@tiptap/starter-kit": "^2.0.0-beta.191",
"@tiptap/vue-3": "^2.0.0-beta.96",
"@vicons/ionicons5": "^0.12.0",
"@vueuse/core": "^8.0.1",
"animate.css": "^4.1.1",
"axios": "^0.26.1",
"cropperjs": "^1.5.12",
"echarts": "^5.3.1",
"github-markdown-css": "^5.1.0",
"happykit": "^2.0.1",
"highlight.js": "^11.6.0",
"jszip": "^3.10.0",
"katex": "^0.16.0",
"lowlight": "^2.7.0",
"naive-ui": "^2.32.2",
"print-js": "^1.6.0",
"qrcode": "^1.5.0",
"qs": "^6.10.5",
"remixicon": "^2.5.0",
"vue": "^3.2.25",
"vue-router": "^4.0.13",
"xgplayer": "^2.31.6",
"github-markdown-css": "^5.1.0",
"highlight.js": "^11.6.0",
"katex": "^0.16.0",
"naive-ui": "^2.32.2"
"xgplayer": "^2.31.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
Expand Down
112 changes: 88 additions & 24 deletions src/components/HbAdminAdjustableContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@ import {onMounted, ref, watch} from "vue";
const props = defineProps({
height: {
type: Number,
default: 250
default: 200
},
width: {
type: Number,
default: 500
default: 200
}
})
const cHeight = ref(250)
const cWidth = ref(500)
const cHeight = ref(0)
const cWidth = ref(0)
const iHeight = ref(250)
const iWidth = ref(500)
const equalRatio = ref(false)
let canDrag = false //是否允许拖拽
const showDrag = ref(false) //是否显示拖动框
let mouseDownState = false //鼠标是否按下
let moveTemp = [0, 0] //上一次拖拽位置的缓存
const ACWrap = ref()
Expand Down Expand Up @@ -55,63 +56,112 @@ function handleWidthChange() {
}
onMounted(() => {
cHeight.value = props.height
cWidth.value = props.width
iHeight.value = props.height
iWidth.value = props.width
const offsetHeight = AdjustableContainer.value.offsetHeight
const offsetWidth = AdjustableContainer.value.offsetWidth
if (offsetHeight === 0 || offsetWidth === 0) {
cHeight.value = props.height
cWidth.value = props.width
iHeight.value = props.height
iWidth.value = props.width
} else {
cHeight.value = offsetHeight
cWidth.value = offsetWidth
iHeight.value = offsetHeight
iWidth.value = offsetWidth
}
AdjustableContainer.value.style.height = cHeight.value + 'px'
AdjustableContainer.value.style.width = cWidth.value + 'px'
ACWrap.value.addEventListener('mousemove', e => {
const diffX = ACWrap.value.offsetWidth - e.offsetX
const diffY = ACWrap.value.offsetHeight - e.offsetY
if (diffX <= 20 && diffX >= -20 && diffY <= 20 && diffY >= -20) {
if (diffX <= 10 && diffX > 1 && diffY <= 10 && diffY > 1) {
ACWrap.value.style.cursor = 'nw-resize'
canDrag = true
} else {
ACWrap.value.style.cursor = 'default'
if (!mouseDownState) {
ACWrap.value.style.cursor = 'default'
canDrag = false
}
}
showDrag.value = true
ACWrap.value.style.border = '2px solid #2080F0'
})
ACWrap.value.addEventListener('mouseenter', e => {
showDrag.value = true
ACWrap.value.style.border = '2px solid #2080F0'
})
ACWrap.value.addEventListener('mouseleave', e => {
if (!mouseDownState) {
showDrag.value = false
ACWrap.value.style.border = '2px solid #fff'
}
})
ACWrap.value.addEventListener('mousedown', e => {
mouseDownState = true
moveTemp = [e.offsetX, e.offsetY]
if (canDrag) {
mouseDownState = true
moveTemp = [e.pageX, e.pageY]
ACWrap.value.style.userSelect = 'none'
}
})
document.body.addEventListener('mousemove', e => {
document.onkeydown = function (e) {
if (e.ctrlKey) {
equalRatio.value = true
}
}
document.onkeyup = function (e) {
if (!e.ctrlKey) {
equalRatio.value = false
}
}
document.addEventListener('mousemove', e => {
if (canDrag && mouseDownState) {
const diffX = e.offsetX - moveTemp[0]
const diffY = e.offsetY - moveTemp[1]
moveTemp = [e.offsetX, e.offsetY]
let diffX = e.pageX - moveTemp[0]
let diffY = e.pageY - moveTemp[1]
moveTemp = [e.pageX, e.pageY]
if (equalRatio.value) {
const ratio = iWidth.value / iHeight.value
cWidth.value = cWidth.value + diffX
cHeight.value = cWidth.value / ratio
} else {
cHeight.value = cHeight.value + diffY
cWidth.value = cWidth.value + diffX
const calcH = cHeight.value + diffY
const calcW = cWidth.value + diffX
cHeight.value = calcH > 15 ? calcH : 15
cWidth.value = calcW > 15 ? calcW : 15
}
document.body.style.userSelect = 'none'
AdjustableContainer.value.style.height = cHeight.value + 'px'
AdjustableContainer.value.style.width = cWidth.value + 'px'
}
})
document.body.addEventListener('mouseup', e => {
document.addEventListener('mouseup', e => {
canDrag = false
mouseDownState = false
ACWrap.value.style.cursor = 'default'
ACWrap.value.style.userSelect = 'default'
ACWrap.value.style.border = '2px solid #fff'
document.body.style.userSelect = 'default'
showDrag.value = false
})
})
</script>

<template>
<div class="hb-ac-wrap" ref="ACWrap">
<div ref="AdjustableContainer">
<div ref="AdjustableContainer" class="hb-ac-content">
<slot/>
</div>
<div class="hb-ac-bar">
<div class="hb-ac-drag-block" v-show="showDrag"></div>
<div class="hb-ac-bar" v-show="false">
<div>
<div>高度(px)</div>
<div>
Expand All @@ -131,10 +181,14 @@ onMounted(() => {

<style scoped>
.hb-ac-wrap{
max-width: 100%;
width:auto;
display:inline-block !important;
padding: 5px;
border: 1px solid #aaa;
margin: 10px;
border: 2px solid #fff;
position: relative;
}
.hb-ac-content{
position: relative;
}
.hb-ac-bar{
Expand All @@ -147,4 +201,14 @@ onMounted(() => {
.hb-ac-input{
width: 50px;
}
.hb-ac-drag-block{
height: 8px;
width: 8px;
position: absolute;
right: -4px;
bottom: -4px;
pointer-events: none;
background-color: #2080F0;
border: 2px solid #fff;
}
</style>
Loading

0 comments on commit 14a5c45

Please sign in to comment.