vue使用Split封裝通用拖拽滑動分隔面板組件

更新時間：2021年03月23日 09:54:04 作者：我和我的貓都很想你

這篇文章主要介紹了vue使用Split封裝通用拖拽滑動分隔面板組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

手動封裝一個類似Iview中的Split組件，可將一片區(qū)域，分割為可以拖拽調(diào)整寬度或高度的兩部分區(qū)域，最終效果如下：

開始

基礎(chǔ)布局

在vue工程中創(chuàng)建SplitPane組件，引入頁面使用。

<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>

SplitPane組件由三部分組成：區(qū)域1，區(qū)域2，以及滑動器。添加這三個元素，并分別添加class名，注意.pane為區(qū)域1和區(qū)域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>

將容器設(shè)置為flex布局，區(qū)域2的flex屬性設(shè)為1，則區(qū)域2會根據(jù)區(qū)域1的寬度變化自適應(yīng)。

<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>

可以看到設(shè)置區(qū)域1的寬度變化就是實(shí)現(xiàn)該組件的核心點(diǎn)。

除了橫向還要支持縱向布局，所以給組件添加一個direction屬性，該屬性由外部傳入，值為row 或 column，與父元素的flex-direction屬性綁定。

<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>

在橫向布局中，區(qū)域1設(shè)置width：50%，滑動器設(shè)置width：10px，而變?yōu)榭v向布局后這兩個width應(yīng)該變?yōu)閔eight。所以刪除style中這兩個width設(shè)置，添加一個lengthType計(jì)算屬性，根據(jù)不同的direction在行內(nèi)樣式中給這兩個元素分別設(shè)置寬高。

<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' 
 } 
}

同時在橫向布局中，區(qū)域1,區(qū)域2，滑動器的height都為100%，在縱向布局下都應(yīng)該改為width: 100%。所以刪除原本的height設(shè)置，將direction綁定為容器的一個class，根據(jù)該class設(shè)置三個子元素兩種情況下100%的屬性。

<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>

此時如果在頁面中給組件傳入direction="column"，可以看到已經(jīng)變?yōu)榭v向

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

數(shù)據(jù)綁定

當(dāng)前區(qū)域1的寬（高）度和滑動器的寬（高）度都是在樣式中寫死的，需要變?yōu)樵趈s中綁定才能進(jìn)行操作，首先將能用于計(jì)算的數(shù)字放在data中

data() {
 return {
  paneLengthPercent: 50, // 區(qū)域1寬度 (%)
  triggerLength: 10 // 滑動器寬度 （px）
 }
}

然后通過computed返回兩個樣式中需要的字符串，同時為了保證滑動器在區(qū)域1和區(qū)域2的正中間，區(qū)域1的寬度應(yīng)該減去滑動器寬度的一半。

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

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

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

最后綁定在模板中

<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>

事件綁定

想象一下拖拽滑動器的過程，第一步是在滑動器上按下鼠標(biāo)，給滑動器添加mousedown事件

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

按下鼠標(biāo)后開始滑動，應(yīng)該監(jiān)聽mousemove事件，但注意不是在滑動器上，而是在整個文檔上監(jiān)聽，因?yàn)槭髽?biāo)有可能滑動到頁面任何位置。當(dāng)用戶松開鼠標(biāo)時，應(yīng)該取消對整個文檔mousemove的監(jiān)聽，所以在鼠標(biāo)按下的那一刻，應(yīng)該對document添加兩個事件：鼠標(biāo)移動和鼠標(biāo)松開

 methods: {
  // 按下滑動器
 handleMouseDown(e) {
  document.addEventListener('mousemove', this.handleMouseMove)
  document.addEventListener('mouseup', this.handleMouseUp)
 },

 // 按下滑動器后移動鼠標(biāo)
 handleMouseMove(e) {
  console.log('拖動中')
 },

 // 松開滑動器
 handleMouseUp() {
  document.removeEventListener('mousemove', this.handleMouseMove)
 }
 }

我們實(shí)際要控制的是區(qū)域1的寬度，讓區(qū)域1的寬度等于當(dāng)前鼠標(biāo)距容器左邊的距離，也就是如果鼠標(biāo)移動到下圖的圓圈位置，讓區(qū)域1的寬度等于中間的長度：

這個長度可以根據(jù)當(dāng)前鼠標(biāo)距頁面最左邊的距離減去容器距頁面最左邊的距離算出，也就是綠色長度等于紅色減藍(lán)色：

給容器添加ref為了獲取容器的dom信息

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

如果打印ref的getBoundingClientRect()可以看到如下信息：

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

其中l(wèi)eft代表容器距離頁面左側(cè)的距離，width代表容器的寬度。
通過鼠標(biāo)事件對象event的pageX可以獲得當(dāng)前鼠標(biāo)距頁面左側(cè)的距離，則我們要求的鼠標(biāo)距容器左側(cè)距離就可以算出來了。
最后用這個距離除以容器寬度乘上100，就得到了這個距離的百分比數(shù)值，賦值給paneLengthPercent。

 // 按下滑動器后移動鼠標(biāo)
 handleMouseMove(e) {
  const clientRect = this.$refs.splitPane.getBoundingClientRect()
  const offset = e.pageX - clientRect.left
  const paneLengthPercent = (offset / clientRect.width) * 100

  this.paneLengthPercent = paneLengthPercent
 },

兼容縱向布局。

 // 按下滑動器后移動鼠標(biāo)
 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
 },

優(yōu)化

此時看上去需求已經(jīng)完成，但作為一個通用組件還有幾個要優(yōu)化的地方。

優(yōu)化一抖動問題

把滑動器寬度設(shè)置大一些后可以發(fā)現(xiàn)一個抖動問題如下：

在滑動器兩側(cè)按下后輕輕移動就會出現(xiàn)大幅偏移，因?yàn)楝F(xiàn)在的計(jì)算邏輯始終認(rèn)為鼠標(biāo)在滑動器的正中間，沒有把滑動器寬度考慮進(jìn)去。

在dota中定義一個當(dāng)前鼠標(biāo)距滑動器左(頂)側(cè)偏移量

 data() {
 return {
  paneLengthPercent: 50, // 區(qū)域1寬度 (%)
  triggerLength: 100, // 滑動器寬度 （px）
  triggerLeftOffset: 0 // 鼠標(biāo)距滑動器左(頂)側(cè)偏移量
 }
 }

這個值等于鼠標(biāo)距頁面左側(cè)距離減去滑動器距頁面左側(cè)距離（通過e.srcElement.getBoundingClientRect()），在每次滑動器被按下時進(jìn)行賦值，也要區(qū)分橫向/縱向布局：紅 - 藍(lán) = 綠

 // 按下滑動器
 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
  }
 },

有了這個triggerLeftOffset，設(shè)置區(qū)域1的寬度時就應(yīng)該變成：鼠標(biāo)距容器左側(cè)距離減去鼠標(biāo)距滑動器左側(cè)的距離（triggerLeftOffset）再加上滑動器寬度的一半。
這樣就相當(dāng)于把鼠標(biāo)又定位回了滑動器正中間。

 // 按下滑動器后移動鼠標(biāo)
 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
 },

此時不再有抖動問題

優(yōu)化二鼠標(biāo)樣式

鼠標(biāo)在滑動器上經(jīng)過時應(yīng)該改變樣式告訴用戶可以拖動，分別在橫向布局與縱向布局的滑動器css中添加鼠標(biāo)樣式變化。

<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 {
 background: palegoldenrod;
 }
 .pane-two {
 flex: 1;
 background: turquoise;
 }
}
</style>

優(yōu)化三滑動限制

作為一個通用組件，應(yīng)該向外部提供設(shè)置滑動最小與最大距離的限制功能，接收min與max兩個props。

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

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

在handleMouseMove加入判斷：

 // 按下滑動器后移動鼠標(biāo)
 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
 }

優(yōu)化四面板默認(rèn)寬度和滑動器寬度

還是作為一個通用組件，面板初始化比例與滑動器寬度應(yīng)該也由外部使用者決定。
將data中的paneLengthPercent 和 triggerLength轉(zhuǎn)移到props中，從外部接收。

 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 // 鼠標(biāo)距滑動器左(頂)側(cè)偏移量
 }
 },

在頁面中則需傳入paneLengthPercent，注意paneLengthPercent必須是一個定義在data中的數(shù)據(jù)，并且要加上.sync修飾符，因?yàn)檫@個值要動態(tài)修改。

// page.vue

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

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

然后在組件中handleMouseMove中通過this.$emit觸發(fā)事件的方式修改paneLengthPercent值。

 // 按下滑動器后移動鼠標(biāo)
 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) // 這里
 },

此時組件的要素信息都可以通過外部的props控制了。

優(yōu)化五插槽

作為一個容器組件不能添加內(nèi)容不是等于白費(fèi)，分別給兩個區(qū)域添加兩個具名插槽。

<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>

優(yōu)化六禁止選中

在拖動過程中，如果區(qū)域中有文字內(nèi)容可能會出現(xiàn)選中文字的情況，給滑動器添加禁止選中效果。

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

結(jié)束

組件完整代碼

保留各背景色僅為了文章展示需要，實(shí)際使用中刪除

<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 // 鼠標(biāo)距滑動器左(頂)側(cè)偏移量
 }
 },
 computed: {
 lengthType() {
  return this.direction === 'row' ? 'width' : 'height'
 },

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

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

 methods: {
 // 按下滑動器
 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
  }
 },

 // 按下滑動器后移動鼠標(biāo)
 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)
 },

 // 松開滑動器
 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>

組件使用示例

保留各背景色僅為了文章展示需要，實(shí)際使用中刪除

<template>
 <div class="page">
 <SplitPane 
  direction="column" 
  :min="20" 
  :max="80" 
  :triggerLength="20" 
  :paneLengthPercent.sync="paneLengthPercent" 
 >
  <template v-slot:one>
  <div>
   區(qū)域一
  </div>
  </template>

  <template v-slot:two>
  <div>
   區(qū)域二
  </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>

到此這篇關(guān)于vue使用Split封裝通用拖拽滑動分隔面板組件的文章就介紹到這了,更多相關(guān)vue 拖拽滑動分隔面板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用Split封裝通用拖拽滑動分隔面板組件

目錄

前言

開始

基礎(chǔ)布局

數(shù)據(jù)綁定

事件綁定

優(yōu)化

優(yōu)化一抖動問題

優(yōu)化二鼠標(biāo)樣式

優(yōu)化三滑動限制

優(yōu)化四面板默認(rèn)寬度和滑動器寬度

優(yōu)化五插槽

優(yōu)化六禁止選中

結(jié)束

組件完整代碼

組件使用示例

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用Split封裝通用拖拽滑動分隔面板組件

目錄

前言

開始

基礎(chǔ)布局

數(shù)據(jù)綁定

事件綁定

優(yōu)化

優(yōu)化一 抖動問題

優(yōu)化二 鼠標(biāo)樣式

優(yōu)化三 滑動限制

優(yōu)化四 面板默認(rèn)寬度和滑動器寬度

優(yōu)化五 插槽

優(yōu)化六 禁止選中

結(jié)束

組件完整代碼

組件使用示例

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

優(yōu)化一抖動問題

優(yōu)化二鼠標(biāo)樣式

優(yōu)化三滑動限制

優(yōu)化四面板默認(rèn)寬度和滑動器寬度

優(yōu)化五插槽

優(yōu)化六禁止選中