如何使两个div只能通过vuejs中的宽度调整大小

Question

我想创建两个div并使它们在VueJS中相对于每个其他宽度重新调整大小

$(function() {
  var A = parseInt($('#A').width(), 10),
    B = parseInt($('#B').width(), 10),
    Z = parseInt($('#Z').width(), 10),
    minw = parseInt((A + B + Z) * 10 / 100, 10),
    offset = $('#container').offset(),
    splitter = function(event, ui) {
      var aw = parseInt(ui.position.left),
        bw = A + B - aw;
      //set widths and information...
      $('#A').css({
        width: aw
      }).children().text(aw);
      $('#B').css({
        width: bw
      }).children().text(bw);
    };
  $('#Z').draggable({
    axis: 'x',
    containment: [
      offset.left + minw,
      offset.top,
      offset.left + A + B - minw,
      offset.top + $('#container').height()
    ],
    drag: splitter
  });
  //information...
  $('#width').text(A + B + Z);
  $('#A div').text(A);
  $('#B div').text(B);
});

#container {
  width: 90%;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#A,
#B,
#Z {
  position: absolute;
  top: 0;
  height: 100%;
}

#A {
  left: 0;
  width: 39%;
  background-color: #ccffcc;
}

#B {
  right: 0;
  width: 59%;
  background-color: #ccccff;
}

#Z {
  left: 39%;
  width: 2%;
  background-color: #cc0000;
  cursor: move;
}

#A div,
#B div {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  text-align: center;
}

#info {
  text-align: center;
  line-height: 2em;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id='info'>container width : <span id='width'></span></div>
<div id='container'>
  <div id='A'>
    <div>a</div>
  </div>
  <div id='B'>
    <div>b</div>
  </div>
  <div id='Z'></div>
</div>

Answer 1

您正在将Vue与jQuery混合使用，因此当您的jQuery代码运行时，Vue应用程序可能尚未就绪。

解决方案可以是将可拖动库包装在<Draggable>组件中，并使用refs从Vue组件中的mounted挂钩访问DOM节点。