vue中多组件调用，实现上下分屏，上下拖动

上下屏幕分两屏，中间横向是可以拖动

多个页面调用互不影响滑动流畅 

效果如下

 

实现过程

首先下载directives  然后在main中引入js文件

directives可以再  在  miss55776   公众号 发送 【vue拖拽】即可获取

import directives from './utils/directives.js'

new Vue({
  el: '#app',
  directives,
  template: '<App/>',
  components: { App }
})

然后再需要用的页面调用

调用例子可以参考以下方法

<template>
  <div>
    <div class="vh100 w100" style="height: calc(100vh - 90px);">
      <div class="p-10">
        <el-card class="filter-container" shadow="never">
          <div style="margin-top: 10px">
            <el-form :inline="true" size="small">
              <el-form-item label="">
                <el-input v-model="orderCode" class="input-width" placeholder="订单编号" clearable></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker v-model="Times" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

      </div>

      <div v-dialogDragWidth>
        <div class="p-10">
          <template>
            <el-table class="movetable" :data="tableData" style="width: 100%" height="300">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址">
              </el-table-column>
            </el-table>
          </template>
        </div>

        <div class="cursor"><hr></div>
        <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  export default {

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
        ]
      }
    },
  }
</script>

<style>
  hr {cursor: n-resize}
</style>

 必要条件 class="movetable"  这类不能少  

 hr {cursor: n-resize} 这样式也是不能少  

即可实现 

如有不懂的地方请联系我哟   扫码关注