1

我有一些自定义的 JQuery 代码来监听事件并添加一些类来形成元素（焦点、模糊、奇数/偶数等）。没什么大不了的，但我不想在 VueJS 中重写所有这些逻辑，因为所有网站都只使用 JQuery，而 1 页使用 VueJS 来处理复杂的表单。

我编写了一个指令来在新的 VueJS 元素上启动 JQuery 代码并且它正在工作。但是一些 VueJS 代码（vee-validate在我的例子中是指令插件，但它可以是任何 VueJS 代码）使用v-bind:class. 所以它删除了 JQuery 设置的类，它没有添加它的类来替换它们......有没有办法很好地使用 VueJS 和 JQuery/Javascript 的类？让 JQuery 知道现有的类或其他东西。

谢谢

4

1 回答 1

2

您可以使用MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver完成此操作

以下示例将设置一个 vuejs 应用程序，当单击该应用程序时，将类从打开更改为关闭，然后通过 vue 修改类列表。然后它将设置一个突变观察者来查找类属性的更改并运行更多的 jquery 来检查一个makeBold类是否在类列表中，如果没有则添加它。

这表明 vue 正在控制元素类列表，并且观察者正在通过执行一些 jquery 对更改做出反应

另外我添加了一个复选框来禁用 oberserver 反应，以表明 vue 正在删除 makeBold 类

const app = new Vue({
  el: '#app',
  data() {
    return {
      on: true
    }
  }
})
const node = document.getElementById('app')
// add bold class with jQuery
$('#app').addClass('makeBold')

const observer = new MutationObserver(mutations => {
  if ($('#cbx').prop('checked')) return
  const changes = mutations
    .filter(({ attributeName }) => attributeName === 'class');
  if (changes.length && !$('#app').hasClass('makeBold')) {
    $('#app').addClass('makeBold')
  }
})

observer.observe(node, { attributes: true })
.on {
  background-color: orange;
}

.off {
  background-color: white;
}
.makeBold {
  font-weight: 600;
}
.appBody {
  height: 100px;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on">
  Click Me
</div>
<input type="checkbox" id="cbx"> Disable Observer reaction

于 2017-12-15T08:47:25.197 回答