Vue uses Split to encapsulate the universal drag and slide partition panel component

Preface
start

Basic layout
Data Binding
Event Binding

optimization

Optimize a jitter problem
Optimize the second mouse style
Optimize the three-slide limit
Optimize the default width of four panels and the width of the slider
Optimize five slots
Optimize six prohibited selections

Finish

Component complete code
Component usage examples

Preface

Manually encapsulate a Split component similar to Iview to split an area into two areas that can be dragged to adjust the width or height. The final effect is as follows:

start

Basic layout

Create a SplitPane component in the Vue project and introduce it into the page for use.

<template>
 <div class="page">
 <SplitPane />
 </div>
</template>

<script>
import SplitPane from './components/split-pane'
export default { 
 components: 
 SplitPane 
 }, 
 data() { 
 return {} 
 }
}
</script>

<style scoped lang="scss">
.page { 
 height: 100%; 
 padding: 10px;
 background: #000;
}
</style>

// split-pane.vue

<template>
 <div class="split-pane">
 split
 </div>
</template>

<script>
export default { 
 data() { 
 return {} 
 }
}
</script>

<style scoped lang="scss">
.split-pane { 
 background: palegreen; 
 height: 100%;
}
</style>

The SplitPane component consists of three parts: Area 1, Area 2, and Sliders. Add these three elements and add class names respectively. Note that .pane is shared by area 1 and area 2.

<template>
<div class="split-pane">
 <div class="pane pane-one"></div> 
 <div class="pane-trigger"></div> 
 <div class="pane pane-two"></div> 
</div>
</template>

Set the container to flex layout and set the flex property of area 2 to 1. Then area 2 will adapt according to the width of area 1.

<style scoped lang="scss">
.split-pane { 
 background: palegreen;
 height: 100%;
 display: flex; 
 .pane-one { 
 width: 50%; 
 background: palevioletred; 
 } 
 .pane-trigger { 
 width: 10px; 
 height: 100%; 
 background: palegoldenrod; 
 } 
 .pane-two { 
 flex: 1; 
 background: turquoise; 
 }
}
</style>

It can be seen that setting the width change of area 1 is the core point of implementing this component.

In addition to horizontal layout, vertical layout is also supported, so a direction attribute is added to the component. This attribute is passed in from the outside, and its value is row or column, which is bound to the flex-direction attribute of the parent element.

<template> 
 <div class="split-pane" :style="{ flexDirection: direction }"> 
 <div class="pane pane-one"></div> 
 <div class="pane-trigger"></div> 
 <div class="pane pane-two"></div> 
 </div>
</template>

<script>
export default { 
 props: { 
 direction:  
  type: String,  
  default: 'row' 
 } 
 }, 
 data() { 
 return {} 
 }
}
</script>

In the horizontal layout, area 1 is set to width: 50% and the slider is set to width: 10px. After changing to the vertical layout, these two widths should become heights. So delete the two width settings in style, add a lengthType calculated attribute, and set the width and height of the two elements in the inline style according to different directions.

<template> 
 <div class="split-pane" :style="{ flexDirection: direction }"> 
 <div class="pane pane-one" :style="lengthType + ':50%'"></div>
 <div class="pane-trigger" :style="lengthType + ':10px'"></div>  
 <div class="pane pane-two"></div> 
</div>
</template>

computed: { 
 lengthType() {  
 return this.direction === 'row' ? 'width' : 'height' 
 } 
}

At the same time, in the horizontal layout, the height of area 1, area 2, and the slider are all 100%, and in the vertical layout they should all be changed to width: 100%. So delete the original height setting, bind direction to a class of the container, and set the attributes of the three child elements to 100% in both cases according to the class.

<template>
 <div class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div class="pane pane-one" :style="lengthType + ':50%'"></div>
 <div class="pane-trigger" :style="lengthType + ':10px'"></div>
 <div class="pane pane-two"></div>
 </div>
</template>

<script>
export default {
 props: {
 direction:
  type: String,
  default: 'row'
 }
 },
 data() {
 return {}
 },
 computed: {
 lengthType() {
  return this.direction === 'row' ? 'width' : 'height'
 }
 }
}
</script>

<style scoped lang="scss">
.split-pane {
 background: palegreen;
 height: 100%;
 display: flex;
 &.row {
 .pane {
  height: 100%;
 }
 .pane-trigger {
  height: 100%;
 }
 }
 &.column {
 .pane {
  width: 100%;
 }
 .pane-trigger {
  width: 100%;
 }
 }
 .pane-one {
 background: palevioletred;
 }
 .pane-trigger {
 background: palegoldenrod;
 }
 .pane-two {
 flex: 1;
 background: turquoise;
 }
}
</style>

At this point, if you pass direction="column" to the component on the page, you can see that it has changed to vertical

<template>
 <div class="page">
 <SplitPane direction="column" />
 </div>
</template>

Data Binding

The width (height) of the current area 1 and the width (height) of the slider are both hard-coded in the style and need to be bound in js to operate. First, put the numbers that can be used for calculation in data

data() {
 return {
  paneLengthPercent: 50, // Area 1 width (%)
  triggerLength: 10 // Slider width (px)
 }
}

Then computed returns the strings required in the two styles. At the same time, in order to ensure that the slider is in the middle of area 1 and area 2, the width of area 1 should be reduced by half of the width of the slider.

 computed: {
 lengthType() {
  return this.direction === 'row' ? 'width' : 'height'
 },

 paneLengthValue() {
  return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
 },

 triggerLengthValue() {
  return this.triggerLength + 'px'
 }
 }

Finally bind in the template

<template>
 <div class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div class="pane pane-one" :style="lengthType + ':' + paneLengthValue"></div>
 <div class="pane-trigger" :style="lengthType + ':' + triggerLengthValue"></div>
 <div class="pane pane-two"></div>
 </div>
</template>

Event Binding

Imagine the process of dragging a slider. The first step is to press the mouse on the slider and add a mousedown event to the slider.

<div class="pane-trigger" :style="lengthType + ':' + triggerLengthValue" @mousedown="handleMouseDown"></div>

After pressing the mouse and starting to slide, you should listen for the mousemove event, but note that you should listen not on the slider, but on the entire document, because the mouse may slide to any position on the page. When the user releases the mouse, the mousemove listener for the entire document should be canceled, so at the moment the mouse is pressed, two events should be added to the document: mouse move and mouse release

 methods: {
  // Press the slider handleMouseDown(e) {
  document.addEventListener('mousemove', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)
 },

 // Move the mouse after pressing the slider handleMouseMove(e) {
  console.log('dragging')
 },

 // Release the slider handleMouseUp() {
  document.removeEventListener('mousemove', this.handleMouseMove)
 }
 }

What we actually want to control is the width of area 1, making the width of area 1 equal to the distance between the current mouse and the left side of the container. That is, if the mouse moves to the circle position in the figure below, the width of area 1 equals the length in the middle:

This length can be calculated based on the distance between the current mouse and the leftmost side of the page minus the distance between the container and the leftmost side of the page, that is, the green length is equal to the red minus the blue:

Add ref to the container to get the container's DOM information

...
<div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
...

If you print the getBoundingClientRect() of ref, you can see the following information:

console.log(this.$refs.splitPane.getBoundingClientRect())

Where left represents the distance of the container from the left side of the page, and width represents the width of the container.
Through the pageX of the mouse event object event, we can get the current distance of the mouse from the left side of the page, so the required distance of the mouse from the left side of the container can be calculated.
Finally, divide this distance by the container width and multiply by 100 to get the percentage value of this distance and assign it to paneLengthPercent.

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  const offset = e.pageX - clientRect.left
  const paneLengthPercent = (offset / clientRect.width) * 100

  this.paneLengthPercent = paneLengthPercent
 },

Compatible with portrait layout.

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  if (this.direction === 'row') {
  const offset = e.pageX - clientRect.left
  paneLengthPercent = (offset / clientRect.width) * 100
  } else {
  const offset = e.pageY - clientRect.top
  paneLengthPercent = (offset / clientRect.height) * 100
  }

  this.paneLengthPercent = paneLengthPercent
 },

optimization

At this point it looks like the requirements have been met, but as a general component there are still a few areas that need to be optimized.

Optimize a jitter problem

After setting the slider width to a larger value, a jitter problem can be found as follows:

Pressing down on either side of the slider and moving it slightly will cause a large shift, because the current calculation logic always assumes that the mouse is in the middle of the slider, without taking the slider width into account.

Define the current mouse offset from the left (top) side of the slider in dota

 data() {
 return {
  paneLengthPercent: 50, // Area 1 width (%)
  triggerLength: 100, // Slider width (px)
  triggerLeftOffset: 0 // The mouse offset from the left (top) side of the slider}
 }

This value is equal to the distance from the mouse to the left side of the page minus the distance from the slider to the left side of the page (via e.srcElement.getBoundingClientRect()). It is assigned each time the slider is pressed, and it also distinguishes between horizontal/vertical layouts: red - blue = green

 // Press the slider handleMouseDown(e) {
  document.addEventListener('mousemove', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)

  if (this.direction === 'row') {
  this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
  } else {
  this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
  }
 },

With this triggerLeftOffset, setting the width of area 1 should become: the distance from the mouse to the left side of the container minus the distance from the mouse to the left side of the slider (triggerLeftOffset) plus half the width of the slider.
This is equivalent to positioning the mouse back to the center of the slider.

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  if (this.direction === 'row') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.width) * 100
  } else {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.height) * 100
  }

  this.paneLengthPercent = paneLengthPercent
 },

No more jitter issues

Optimize the second mouse style

When the mouse passes over the slider, the style should change to tell the user that it can be dragged. Add mouse style changes in the slider css of the horizontal and vertical layouts respectively.

<style scoped lang="scss">
.split-pane {
 background: palegreen;
 height: 100%;
 display: flex;
 &.row {
 .pane {
  height: 100%;
 }
 .pane-trigger {
  height: 100%;
  cursor: col-resize; // here}
 }
 &.column {
 .pane {
  width: 100%;
 }
 .pane-trigger {
  width: 100%;
  cursor: row-resize; // here}
 }
 .pane-one {
 background: palevioletred;
 }
 .pane-trigger {
 background: palegoldenrod;
 }
 .pane-two {
 flex: 1;
 background: turquoise;
 }
}
</style>

Optimize the three-slide limit

As a universal component, it should provide external functions for setting the minimum and maximum sliding distance limits, and receive two props, min and max.

 props: {
 direction:
  type: String,
  default: 'row'
 },
 
 min: {
  type: Number,
  default: 10
 },

 max: {
  type: Number,
  default: 90
 }
 },

Add judgment in handleMouseMove:

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  if (this.direction === 'row') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.width) * 100
  } else {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.height) * 100
  }

  if (paneLengthPercent < this.min) {
  paneLengthPercent = this.min
  }
  if (paneLengthPercent > this.max) {
  paneLengthPercent = this.max
  }

  this.paneLengthPercent = paneLengthPercent
 }

Optimize the default width of four panels and the width of the slider

As a general component, the panel initialization ratio and slider width should also be determined by external users.
Transfer paneLengthPercent and triggerLength in data to props and receive them from the outside.

 props: {
 direction:
  type: String,
  default: 'row'
 },
 
 min: {
  type: Number,
  default: 10
 },

 max: {
  type: Number,
  default: 90
 },

 paneLengthPercent: {
  type: Number,
  default: 50
 },

 triggerLength: {
  type: Number,
  default: 10
 }
 },
 data() {
 return {
  triggerLeftOffset: 0 // The mouse offset from the left (top) side of the slider}
 },

In the page, you need to pass in paneLengthPercent. Note that paneLengthPercent must be a data defined in data and must be marked with the .sync modifier because this value needs to be modified dynamically.

// page.vue

<template>
 <div class="page">
 <SplitPane direction="row" :paneLengthPercent.sync="paneLengthPercent" />
 </div>
</template>

...
 data() {
 return {
  paneLengthPercent: 30
 }
 }
...

Then modify the paneLengthPercent value in handleMouseMove of the component by triggering the event through this.$emit.

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  if (this.direction === 'row') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.width) * 100
  } else {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.height) * 100
  }

  if (paneLengthPercent < this.min) {
  paneLengthPercent = this.min
  }
  if (paneLengthPercent > this.max) {
  paneLengthPercent = this.max
  }

  this.$emit('update:paneLengthPercent', paneLengthPercent) // here},

At this point, the component's element information can be controlled by external props.

Optimize five slots

As a container component, it is not useless if you cannot add content. Add two named slots to the two areas respectively.

<template>
 <div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div class="pane pane-one" :style="lengthType + ':' + paneLengthValue">
  <slot name="one"></slot>
 </div>
 
 <div 
  class="pane-trigger"
  :style="lengthType + ':' + triggerLengthValue"
  @mousedown="handleMouseDown">
 </div>
 
 <div class="pane pane-two">
  <slot name="two"></slot>
 </div>
 </div>
</template>

Optimize six prohibited selections

During the dragging process, if there is text content in the area, the text may be selected, and a prohibition of selection effect is added to the slider.

...
 .pane-trigger {
 user-select: none;
 background: palegoldenrod;
 }
...

Finish

Component complete code

The background colors are only kept for article display purposes and will be deleted in actual use.

<template>
 <div ref="splitPane" class="split-pane" :class="direction" :style="{ flexDirection: direction }">
 <div class="pane pane-one" :style="lengthType + ':' + paneLengthValue">
  <slot name="one"></slot>
 </div>
 
 <div 
  class="pane-trigger" 
  :style="lengthType + ':' + triggerLengthValue" 
  @mousedown="handleMouseDown"
 ></div>
 
 <div class="pane pane-two">
  <slot name="two"></slot>
 </div>
 </div>
</template>

<script>
export default {
 props: {
 direction:
  type: String,
  default: 'row'
 },
 
 min: {
  type: Number,
  default: 10
 },

 max: {
  type: Number,
  default: 90
 },

 paneLengthPercent: {
  type: Number,
  default: 50
 },

 triggerLength: {
  type: Number,
  default: 10
 }
 },
 data() {
 return {
  triggerLeftOffset: 0 // The mouse offset from the left (top) side of the slider}
 },
 computed: {
 lengthType() {
  return this.direction === 'row' ? 'width' : 'height'
 },

 paneLengthValue() {
  return `calc(${this.paneLengthPercent}% - ${this.triggerLength / 2 + 'px'})`
 },

 triggerLengthValue() {
  return this.triggerLength + 'px'
 }
 },

 methods: {
 // Press the slider handleMouseDown(e) {
  document.addEventListener('mousemove', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)

  if (this.direction === 'row') {
  this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left
  } else {
  this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top
  }
 },

 // Move the mouse after pressing the slider handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  let paneLengthPercent = 0

  if (this.direction === 'row') {
  const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.width) * 100
  } else {
  const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerLength / 2
  paneLengthPercent = (offset / clientRect.height) * 100
  }

  if (paneLengthPercent < this.min) {
  paneLengthPercent = this.min
  }
  if (paneLengthPercent > this.max) {
  paneLengthPercent = this.max
  }

  this.$emit('update:paneLengthPercent', paneLengthPercent)
 },

 // Release the slider handleMouseUp() {
  document.removeEventListener('mousemove', this.handleMouseMove)
 }
 }
}
</script>

<style scoped lang="scss">
.split-pane {
 background: palegreen;
 height: 100%;
 display: flex;
 &.row {
 .pane {
  height: 100%;
 }
 .pane-trigger {
  height: 100%;
  cursor: col-resize;
 }
 }
 &.column {
 .pane {
  width: 100%;
 }
 .pane-trigger {
  width: 100%;
  cursor: row-resize;
 }
 }
 .pane-one {
 background: palevioletred;
 }
 .pane-trigger {
 user-select: none;
 background: palegoldenrod;
 }
 .pane-two {
 flex: 1;
 background: turquoise;
 }
}
</style>

Component usage examples

The background colors are only kept for article display purposes and will be deleted in actual use.

<template>
 <div class="page">
 <SplitPane 
  direction="column" 
  :min="20" 
  :max="80" 
  :triggerLength="20" 
  :paneLengthPercent.sync="paneLengthPercent" 
 >
  <template v-slot:one>
  <div>
   Area 1</div>
  </template>

  <template v-slot:two>
  <div>
   Area 2</div>
  </template>

 </SplitPane>
 </div>
</template>

<script>
import SplitPane from './components/split-pane'

export default {
 components:
 SplitPane
 },
 data() {
 return {
  paneLengthPercent: 30
 }
 }
}
</script>

<style scoped lang="scss">
.page {
 height: 100%;
 padding: 10px;
 background: #000;
}
</style>

This is the end of this article about how Vue uses Split to encapsulate a universal drag-and-slide split panel component. For more relevant Vue drag-and-slide split panel content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue
vue drag component vuedraggable API options to achieve mutual drag and sorting between boxes
Vue drag component list to realize dynamic page configuration function
Detailed explanation of how to use the Vue drag component
Detailed explanation of Vue drag component development example
Vue implements the requirement of dragging and dropping dynamically generated components
Vue develops drag progress bar sliding component
vue draggable resizable realizes the component function of draggable scaling
Use Vue-draggable component to implement drag and drop sorting of table contents in Vue project
Vue component Draggable implements drag function
How to implement draggable components in Vue

<<: Ubuntu MySQL 5.6 version removal/installation/encoding configuration file configuration

>>: Example of how to set up a third-level domain name in nginx