本文实例讲述了JS实现左右布局的resizeLayout公共组件,供大家参考,具体如下:
特点:
① 拖动尺寸线可以调节左右区域的大小;
② 点击按钮可以对左边区域展开和收起;
③ 限制拖动的最小宽度;
④ 使用vue插槽,可复用的组件
- 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>
- css部分
$color_border: #d9d9d9;
.box