1.封装组件
实现的效果：
自定义组件代码
<template><div class="x-handle" :style="divStyle" @mousedown="mouseDown"><el-headerstyle="height: 21px;border-bottom: 1px solid rgb(235, 238, 245);padding: 0px;text-align: center;position:absolute;top:50%; transform:translate(-0%,-0%)"><div v-if="shouldCloseWindow=='left'"><el-tooltipv-if="showTooltip"class="item"effect="dark"content="点击展开/隐藏"placement="bottom-end"><el-buttontype="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-right" v-if="visible"></i><i class="el-icon-arrow-left" v-else></i></el-button></el-tooltip><el-buttonv-if="!showTooltip"type="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-right" v-if="visible"></i><i class="el-icon-arrow-left" v-else></i></el-button></div><div v-if="shouldCloseWindow=='right'"><el-tooltipv-if="showTooltip"class="item"effect="dark"content="点击展开/隐藏"placement="bottom-end"><el-buttontype="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-left" v-if="visible"></i><i class="el-icon-arrow-right" v-else></i></el-button></el-tooltip><el-buttonv-if="!showTooltip"type="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-left" v-if="visible"></i><i class="el-icon-arrow-right" v-else></i></el-button></div></el-header></div></template><script>export default {name: "XHandle",props: ["isShowTooltip", "isCanMove", "closeWindow"],data() {return {lastX: "",visible: false,canMove: false,showTooltip: false,shouldCloseWindow: "left"};},created() {document.addEventListener("mouseup", this.mouseUp);if (this.isShowTooltip != undefined && this.isShowTooltip != "undefined")this.showTooltip = this.isShowTooltip;if (this.isCanMove != undefined && this.isCanMove != "undefined")this.canMove = this.isCanMove;if (this.closeWindow != undefined && this.closeWindow != "undefined")this.shouldCloseWindow = this.closeWindow;},destroyed() {document.removeEventListener("mouseup", this.mouseUp);},computed: {divStyle: function() {if (this.canMove)return {cursor: "w-resize"};}},methods: {visibleChange() {this.visible = !this.visible;this.$emit("visibleChange");},mouseDown(event) {document.addEventListener("mousemove", this.mouseMove);this.lastX = event.screenX;},mouseMove(event) {if (this.canMove) {this.$emit("widthChange", this.lastX - event.screenX);this.lastX = event.screenX;}},mouseUp() {this.lastX = "";document.removeEventListener("mousemove", this.mouseMove);}}};</script><style lang="less">.x-handle {width: 7px;z-index: 10;background: #ccc;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}</style>
2.使用步骤
a.引入并注册组件
<script>import XHandle from "@/components/Xhandle";//以你自己目录为准components: { XHandle },</script>
b.代码指定位置增加以下代码(左侧收起)
<template><!--左侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside v-show="!visible" :style="{ width: width + 'px' }"></el-aside><!--中间的拉动/收放的组件，用于实现拉动动态改变左右两侧的宽度-><!--showTooltip:是否显示展开/收起的提示内容--><!--isCanMove:是否允许拖动改变大小--><!--closeWindow:默认左侧的窗口收起，设置为right时，右侧的窗口收起--><div class="xHandle"><XHandle :showTooltip="false" :isCanMove="true" @widthChange="widthChange" @visibleChange="visibleChange" /></div><!--右边侧界面，主要是定义 :style="divStyle"用于动态改变右侧宽度--><el-aside :style="divStyle"></el-aside></template><script>data() {return {//定义两个变量width: 250,visible:false};},computed: {//右侧界面宽度的动态改变divStyle: function() {return {width: "calc(100% - " + this.width + "px)",height: "100%"};}},methods: {//相应XHandle子组件的两个方法visibleChange() {this.visible = !this.visible;if (this.visible) {this.width = 0;} else {this.width = 250;}},widthChange(movement) {this.visible = false;this.width -= movement;//右边收起时，this.width += movement 左边收起时this.width -= movementif (this.width < 0) {//这个值的作用为：限制左侧界面能允许接受的最小宽度，例：设为50时，左侧的界面不会被缩小到50px以下this.width = 0;}if (this.width > 250) {//设置为data 中width变量的宽度一致this.width = 250;}}}</script><style scoped>/*添加对应样式*/.xHandle {display: flex;}</style>
当需要右侧收起和展开时：
调换两处:style的绑定值；widthChange()方法中的this.width -= movement改为this.width += movement
<template><!--左侧界面，主要是定义 :style="divStyle"用于动态改变右侧宽度 --><el-aside :style="divStyle"></el-aside><!--中间的拉动/收放的组件，用于实现拉动动态改变左右两侧的宽度-><!--showTooltip:是否显示展开/收起的提示内容--><!--isCanMove:是否允许拖动改变大小--><!--closeWindow:默认左侧的窗口收起，设置为right时，右侧的窗口收起--><div class="xHandle"><XHandle :showTooltip="false" :isCanMove="true" @widthChange="widthChange" @visibleChange="visibleChange" /></div><!--右边侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside v-show="!visible" :style="{ width: width + 'px' }"></el-aside></template><script>methods: {widthChange(movement) {this.visible = false;this.width += movement;//右边收起时:this.width += movement 左边收起时this.width -= movementif (this.width < 0) {//这个值的作用为：限制左侧界面能允许接受的最小宽度，例：设为50时，左侧的界面不会被缩小到50px以下this.width = 0;}if (this.width > 250) {//设置为data 中width变量的宽度一致this.width = 250;}}}</script>
3.0拓展
为实现收起/展开的动画效果，建议将需要收起/展开的部分用transition包起来，并在对应的样式中增加自己想要的动画效果
例如：
<template><transition name="router-slid"><!--左侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside v-show="!visible" :style="{ width: width + 'px' }"></el-aside></transition></template><style scoped>/*添加对应样式*/.router-slid-enter-active,.router-slid-leave-active {transition: all 0.1s;}.router-slid-enter,.router-slid-leave-active {transform: translate3d(-3rem, 0, 0);opacity: 0;}</style>
