VueJS + Jquery 用户界面

Question

基本上我想要处理的是当我使用 jquery ui 的 resizable() 并将其保存在我的 vue 数据中时获取元素的宽度。

<div class="draggable"></div> 
$(".draggable").draggable().resizable();

当我现在用处理程序拖动元素时，我想在我的 vue js 组件脚本中获得实际宽度...我能以某种方式在每个刻度上使用 ref 获取它吗？

所以每当我的 div 在渲染版本中看起来像这样：

<div style="width: 100px;" class="draggable" />

我想以某种方式在 Vue 中访问该宽度。

代码示例将不胜感激。

Answer 1

您可以使用 VueJS 的 $data API ：

HTML

<div id="my-app">
  My width is: {{ mywidth }}
  <div class="draggable"></div>
</div>

并让 Jquery 将您的宽度发送到 vuejs：

var app = new Vue({
    el: '#my-app',
    data: {
      mywidth: 100,
    }
});

和：

$(".draggable").draggable().resizable({
   stop: function(event, ui) {
     var width = ui.size.width;
     app.$data.mywidth = width;
}
});

您可以替换为stop(event, ui)，resize这样您就可以在调整大小时跟踪宽度，并且在“调整大小完成”后无法使用

阅读更多：