vue实现边框线拖拽效果（拖动元素边框改变宽度）

1.封装组件

实现的效果：

自定义组件代码

<template>
  <div class="x-handle" :style="divStyle" @mousedown="mouseDown">
    <el-header
      style="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-tooltip
          v-if="showTooltip"
          class="item"
          effect="dark"
          content="点击展开/隐藏"
          placement="bottom-end"
        >
          <el-button
            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>
        </el-tooltip>
        <el-button
          v-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-tooltip
          v-if="showTooltip"
          class="item"
          effect="dark"
          content="点击展开/隐藏"
          placement="bottom-end"
        >
          <el-button
            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>
        </el-tooltip>
        <el-button
          v-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 -= movement
      if (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 -= movement
      if (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>