vue搭配pure js+css之分割畫面

開發中..

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<body onload="onload()">
<div class="splitter">
	<div id="first">
    <div id="app">
        <!--<button type="button" v-on:click="getData">Get Data</button>
        <button type="button" v-on:click="clearData">Clear Data</button>-->
        選取頁碼：
        <select v-model = "page">
           <option v-for = "n in totalpage">{{n}}</option>
        </select>
        <ul >              
          <li v-for="(c,index) in pagedata">
            <button type="button" v-on:click="look(c.id)">Query</button>
            ({{c.id}}){{c.name}} - {{c.body}}
          </li>
        </ul>        
      </div>
  </div>
	<div id="seperator"></div>
	<div id="second">
    <div id="appdtl">
      <!--<button v-on:click="closesplit">Close</button>-->
      <ul>
        <li>【id】：{{singleone.id}}</li>
        <li>【name】：{{singleone.name}}</li>
        <li>【email】：{{singleone.email}}</li>
        <li>【body】：{{singleone.body}}</li>
      </ul>
    </div>
  </div>
</div>
</body>

<script>
function onload()
{
	dragElement( document.getElementById("seperator"), "H" );
}

// function is used for dragging and moving
function dragElement( element, direction, handler )
{
  // Two variables for tracking positions of the cursor
  const drag = { x : 0, y : 0 };
  const delta = { x : 0, y : 0 };
  /* if present, the handler is where you move the DIV from
     otherwise, move the DIV from anywhere inside the DIV */
  handler ? ( handler.onmousedown = dragMouseDown ): ( element.onmousedown = dragMouseDown );

  // function that will be called whenever the down event of the mouse is raised
  function dragMouseDown( e )
  {
    drag.x = e.clientX;
    drag.y = e.clientY;
    document.onmousemove = onMouseMove;
    document.onmouseup = () => { document.onmousemove = document.onmouseup = null; }
  }

  // function that will be...

CSS

.splitter {
	width: 100%;
	height: 600px;
  overflow: hidden;
}

#seperator {
	cursor: row-resize;
  background-color: black;
	height: 10px;
	min-height: 10px;
}

#first {
	background-color: green;
	height: 50%;
	min-height: 10px;
  overflow-y: scroll;
}

#second {
	background-color: red;
	height: 50%;
	min-height: 10px;
}

JavaScript

/*
ref:https://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html
Best way to do a split pane in html(answered Sep 27 '18 at 12:10 Reza)
關於js取得瀏覽器寬高度:
https://www.itread01.com/content/1552120805.html
*/