vue实现左右布局,拖动尺寸线控制面板距离调节,点击按钮可展开收起左侧区域的resizeLayout公共组件

本文实例讲述了JS实现左右布局的resizeLayout公共组件,供大家参考,具体如下:
特点：
① 拖动尺寸线可以调节左右区域的大小；
② 点击按钮可以对左边区域展开和收起；
③ 限制拖动的最小宽度；
④ 使用vue插槽,可复用的组件

1. html部分

使用插槽也非常简单,

<template v-slot:left>这里面写用到的子组件</template>

 <!-- 可调节左右宽带布局,点击按钮可隐藏左侧 -->
  <div class="box" ref="box">
    <!-- 左侧 -->
    <div class="box-left">
      <slot name="left"></slot>
    </div>
    <!-- 可调节尺寸线 -->
    <div class="resize">
      <img :src="boxLeftOff?miniLeft:miniRight" class="resize-btn"></img>
    </div>
    <!-- 右侧 -->
    <div class="box-right">
      <slot name="right"></slot>
    </div>
  </div>

2. css部分

$color_border: #d9d9d9;
.box