soc_web/src/components/layoutContainer/index.vue

<template>
  <div>
    <div class="big_box">
      <div class="leftBar">
        <slot name="leftBar"></slot>
      </div>
      <div class="dragonet" v-move></div>
      <div class="rightBar">
        <slot name="rightBar"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SocWebIndex",

  data() {
    return {
        leftWith:0
    };
  },
  directives: {
    move(el, bindings, that) {
       
      that = that.context;
    

      el.onmousedown = function (e) {
        var init = e.clientX;

        var parent = document.querySelector(".leftBar");
        // var searchInput = document.querySelector(".input-with-select");
        // var parentelement = document.querySelector("#form");
        // var formBox = document.querySelector(".formBox");
        var initWidth = parent.offsetWidth;
        

        document.onmousemove = function (e) {
            var end = e.clientX;
           
          if (end > that.leftWith) {
              var newWidth = end - init + initWidth;
              parent.style.width = newWidth + "px";
              console.log(parent);
          
          } else {
            end = that.leftWith + "px";
            parent.style.width = that.leftWith + "px";
           
          }
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    },
  },
  mounted() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
.big_box {
  width: 100%;
  display: flex;
  .leftBar {
    min-width: 200px;
  }
  .rightBar {
    width: 85%;
  }
  .dragonet {
    width: 10px;
    min-width: 10px;
    cursor: col-resize;
    background-color: #fff;
    z-index: 5;
  }
}
</style>