50行のコードでVueを使ってドラッグ可能な調整可能な分割レイアウトを実現

分割線の比率を調整する

実現は難しくありませんが、他のオンラインの記事は本当に簡単なことを複雑にしています
今日教える方法は超シンプル！！！！たった 50 行のコードだけ！！

マウスが分割線の位置で押されたとき
triggerDragging 変数が true に変わります

この時、split-pane-wrapper の mousemove で triggerDragging を判断します
true であれば leftOffset を変更し、pane-left の width もそれに応じて変更されます

pane-trigger-con の width は固定されています
pane-right は弾力レイアウトの flex: 1; を使用して
残りの部分を埋め、埋められた部分はウェブページのコンテンツ表示部分に適しています

<template>
  <div class="split-pane-wrapper" @mousemove="mouseMoveTrigger">
    <div class="pane-left" :style="{ width: leftOffset + 'px' }"></div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger"></div>
    <div class="pane-right"></div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      leftOffset: 300,
      triggerDragging: false,
    };
  },
  methods: {
    mouseMoveTrigger(event) {
      if (!event.which) this.triggerDragging = false;
      if (this.triggerDragging) {
        this.leftOffset = event.clientX;
      }
    },
    mouseDownTrigger(event) {
      this.triggerDragging = true;
    },
  },
};
</script>
<style scoped>
.split-pane-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.pane-left {
  background: brown;
}
.pane-right {
  flex: 1;
  background: chartreuse;
}
.pane-trigger-con {
  width: 8px;
  background: red;
  cursor: ew-resize;
}
</style>

2022-8-24
フォローを忘れずに⬇️