技術標籤：前端vue.jshtml5cssjavascriptcss3

效果圖

程式碼

<template>
  <div class="root" ref="root">
    <div class="left" ref="left"></div>
    <div class="center" ref="center">
      <img
        src="../../assets/imgs/icons/拉伸.png"
 

        alt="拉伸"
        @mousedown="lashen"
        draggable="false"
        ref="img"
      />
    </div>
    <div class="right" ref="right"></div>
  </div>
</template>

<script>
export default {
  data
 
() {
    return {
      isDown: false,
    };
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    lashen(event) {
      var _this = this;
      // 獲取event物件，相容性寫法
      var ev = event || window.event;
      // 滑鼠按下時的位置
      var mouseDownX = ev.clientX;
      // 左邊位置
      var
 
 L0 = this.$refs.left.offsetLeft;
      // 左邊寬度
      var Wl = this.$refs.left.offsetWidth;

      window.onmousemove = function (event) {
        var e = event || window.event;
        // 滑鼠移動時的滑鼠位置
        var mouseMoveX = e.clientX;
        _this.$refs.left.style.width = mouseMoveX - mouseDownX + Wl + "px";
        _this.$refs.right.style.width =
          _this.$refs.root.offsetWidth -
          _this.$refs.left.offsetWidth -
          _this.$refs.center.offsetWidth +
          "px";
      };
      window.onmouseup = function () {
        window.onmousemove = null;
        return;
      };
    },
  },
};
</script>

<style scoped>
.root {
  width: 100%;
  min-width: 1300px;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.left {
  width: 37.5%;
  height: 100px;
  background-color: red;
}
.center {
  width: 20px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.center img {
  display: block;
  width: 20px;
  cursor: pointer;
}
.right {
  width: calc(62.5% - 30px);
  height: 100px;
  background: #0c84f5;
}