1,DragBox组件
<template>
<div ref='dragBoxRef' class="dragBox" >
<slot></slot>
</div>
</template>
<script>
export default {
name:"dragBox",
props:{
itemMinWidth:{
type:Number,
default:200
},//孩子盒子的最小宽度
resizeBoxBg:{
type:String,
default:'#818181'
},//长按拓展条背景色
},
componets:{
},
data(){
return{
fileUrl:'',
filename:''
}
},
methods:{
// 如果dragItem 没有定义宽度,则flex=1
setDragItemFlex () {
const dragBox = this.$refs.dragBoxRef
// console.log(dragBox);
// return
const childsLen = dragBox.children.length
for (let i = 0; i < childsLen; i++) {
const node = dragBox.children[i]
if (!node.style.width) {
// 如果没有定义宽度,则flex=1
node.style.flex = 1
}
}
},
dragControllerDiv () {
const resize = document.getElementsByClassName('resize') // 拖拽条
// 循环为每个拖拽条添加事件
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].addEventListener('mousedown', this.onMouseDown)
}
},
onMouseDown (e) {
this.resizeBox = e.target
this.currentBox = this.resizeBox.parentNode// 当前盒子
this.rightBox = this.getNextElement(this.currentBox)// 当前盒子的下个兄弟节点
if (!this.rightBox) return
this.curLen = this.currentBox.clientWidth
this.otherBoxWidth = this.$refs.dragBoxRef.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的宽度
// 颜色改变提醒
this.resizeBox.style.background = this.resizeBoxBg
this.startX = e.clientX
document.addEventListener('mousemove', this.onMousemove)
document.addEventListener('mouseup', this.onMouseup)
},
onMousemove (e) {
const endX = e.clientX
const moveLen = endX - this.startX // (endx-startx)= 移动的距离
const CurBoxLen = this.curLen + moveLen // resize[i].left+移动的距离=左边区域最后的宽度
const rightBoxLen = this.$refs.dragBoxRef.clientWidth - CurBoxLen - this.otherBoxWidth // 右侧宽度=总宽度-左侧宽度-其它盒子宽度
// 当最小宽度时,无法继续拖动
if (CurBoxLen <= this.itemMinWidth || rightBoxLen <= this.itemMinWidth) return
this.currentBox.style.width = CurBoxLen + 'px'// 当前盒子的宽度
this.resizeBox.style.left = CurBoxLen // 设置左侧区域的宽度
this.rightBox.style.width = rightBoxLen + 'px'
},
onMouseup () {
// 颜色恢复
this.resizeBox.style.background = '#d6d6d6'
document.removeEventListener('mousedown', this.onMouseDown)
document.removeEventListener('mousemove', this.onMousemove)
},
// 获取下一个兄弟元素的兼容函数
getNextElement (element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var next = element.nextSibling// 下一个兄弟节点
while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
next = next.nextSibling
}
return next
}
}
},
beforeCreate(){
},
created(){
},
beforeMount(){
},
mounted(){
this.setDragItemFlex()
this.dragControllerDiv()
}
}
</script>
<style scoped>
.dragBox{
display: flex;
width: 100%;
height: 100%;
}
</style>
2,DragItem组件
<template>
<div ref="container" class="d-flex" >
<div style="width: 100%; height: 100%;">
<slot>默认信息</slot>
</div>
<!-- 拖拽条 -->
<div v-if="resizeShow" :style="{'width':resizeWidth}" class="resize" />
</div>
</template>
<script>
export default {
props: {
// 控制拖拽条的是否显示,默认显示
resizeShow: {
type: Boolean,
default: true
},
//拖拽条默认宽度
resizeWidth:{
type:String,
default:"4px"
}
}
}
</script>
<style>
.resize {
position: absolute;
top: 0;
right: 0;
height: 100%;
cursor: col-resize;
background-color: #d6d6d6;
}
.resize:hover{
width: 4px !important;
}
.d-flex{
position: relative;
}
</style>
3,组件调用
<template>
<div id="dragDiv" class="dragDiv" >
<drag-box :itemMinWidth="100" style="width: 100%; height: 100%;">
<drag-item style="width: 20%;" resizeWidth="2px" >item1</drag-item>
<drag-item resizeWidth="2px" >item2</drag-item>
<drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item>
</drag-box>
</div>
</template>
<script>
import DragBox from './dragBox/index.vue'
import DragItem from './dragBox/dragItem.vue'
export default {
name: 'dragDiv',
components: {
DragBox,
DragItem
}
}
</script>
<style scoped>
.dragDiv{
width: 100%;
height: 100vh;
border:1px solid #ccc;
}
</style>