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

亦凉 2022-09-15 03:29 387阅读 0赞

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

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

### 效果如下 ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16][]

实现过程

首先下载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\} 这样式也是不能少

即可实现

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3e9a01dbbeb64ea2b1825108b60b32f9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5oqA5pyv56uZ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/524ef6a1d9f9455d89600b6798458d1c.png