VUEはStudio管理バックグラウンドのマウスドラッグ＆ドロップを実現し、ウィンドウのサイズを変更します。

最近はRXEditorを改版して、改版の過程を使った技術点を記録します。昨日静的なページの制作を完成しました。制作過程は詳しく記録していません。後期はもう補いたくなくなりました。少し残念です。しかし、仕事の成果はそのままgithbに残しています。住所はhttps://github.com/vularsoft/studio-uiです。
このプロジェクトの下のhtml-demoは静的なファイルです。
話は多くなくて、今日は昨日のHTMLをVUEに変えます。
先に効果を見ます

レイアウトの原理
ページは純弾性箱flex boxレイアウト、float postionなどを採用しています。ページは次のような領域に分けられています。

細い実線はそれぞれのDIVの間の入れ子の関係を述べて、太い黒い線は独立したDIVで、私はそれらを取っ手（HADLE）と呼んで、主にマウスを使って事件をドラッグして、ドラッグ操作を完成します。handleは非2種類で、横のx-handle、縦のy-handle、cssの中でx-handle幅を定義するのは3 pxで、高さは100%で、y-handle高さは3 pxで、幅は100%で、マウスカーソルも相応に設定します。

.vular-studio .x-handle{
 width: 3px;
 cursor: w-resize;
 z-index: 10;
}

.vular-studio .y-handle{
 height: 3px;
 cursor: s-resize;
 z-index: 10;
}

ドラッグの原理
グリップ付きのエリア固定サイズ（固定幅または高さ）は、グリップを持たない部分が弾性箱に従って変化します。取っ手ハンドルは独立したVUEコンポーネントであり、それはドラッグ情報を親ウィンドウに伝達し、親ウィンドウが自分のサイズを変更する。bottom-araを例にとって、これは自分のサイズを変えることができるDIVです。

<template>
 <div class="bottom-area" :style="{height:height + 'px'}">
 <YHandle @heightChange="heightChange"></YHandle>
 <div class="bottom-inner">
  <slot></slot>
 </div>
 </div>
</template>

<script>
import YHandle from './YHandle.vue'
export default {
 name: 'BottomArea',
 components:{
 YHandle,
 },
 data () {
 return {
  height:220,
 }
 },
 methods: {
 heightChange(movement){
  this.height += movement
  if(this.height < 30){
  this.height = 30
  }
  if(this.height > 600){
  this.height = 600
  }
 },
 },
}
</script>

それはハンドルコードに対応しています。

<template>
 <div class="y-handle" 
 @mousedown="mouseDown" 
 ></div>
</template>

<script>
export default {
 name: 'YHandle',
 data () {
 return {
  lastY:''
 }
 },

 created () {
 document.addEventListener('mouseup', this.mouseUp)
 },

 destroyed() {
 document.removeEventListener('mouseup', this.mouseUp)
 },


 methods: {
 mouseDown(event){
  document.addEventListener('mousemove', this.mouseMove)
  this.lastY = event.screenY
 },
 mouseMove(event){
  console.log('move')
  this.$emit('heightChange', this.lastY - event.screenY)
  this.lastY = event.screenY
 },
 mouseUp(event){
  this.lastY = ''
  document.removeEventListener('mousemove', this.mouseMove)
 },
 },
}
</script>

作成手順
まずVUE項目を構築する：
1、nodeをインストールする
2、webpackを取り付ける
3、VUEの取り付け
4、VUE新規プロジェクト：vue init webpack-simple
5、対応するレイアウトに基づいてVUEコンポーネントを作成する
具体的なコードについては、https://github.com/vularsoft/studio-uiを参照してください。
ここでは、VUEがStudio管理のバックグラウンドを実現するためのマウスのドラッグ＆ドロップについて、ウィンドウのサイズを変更する記事を紹介します。ウィンドウのサイズを変更するには、vueマウスのドラッグ＆ドロップに関する詳細な関連記事を紹介します。