VueJS + Jquery

Question

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

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

当我现在用处理程序拖动元素时，我想在vue js组件脚本中获得实际宽度.我能不能在每一个滴答上加上一个参考？

因此，每当我的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，这样您就可以在调整大小的同时跟踪宽度，并且在“调整大小完成”之后不再使用

Codepen.io上的实例

阅读更多信息：

• JqueryUI可调整大小的{stop(事件，ui )}
• Vuejs .$data