Vue implements the V-resize instruction

When the window resize event occurs, execute the v-resize binding function in the component.

// Add the following js to the vue entry
var resizeKey = 0;
var resizeEvent = {};
Vue.directive('resize', {
  // When the bound element is inserted into the DOM...
  inserted: function (el, binding) {
    resizeKey++
    el.setAttribute("resizeKey", resizeKey)
    if (typeof binding.value === "function") resizeEvent[resizeKey] = binding.value;
  },
  unbind: function (el) {// Remove the event when the component is destroyed
    var key = el.getAttribute("resizeKey");
    delete resizeEvent[key]
  }
})

window.addEventListener('resize'.function () {
  console.log(resizeEvent);

  for (const i in resizeEvent) {
    if (resizeEvent.hasOwnProperty(i)) {
      const fn = resizeEvent[i];
      if (typeof fn === "function") fn(); }}})Copy the code

    <! -- resize is a method in vUE components -->
<div v-resize="resize">
    <div class="bar" ref="bar"></div>
</div>
Copy the code

Before using museui, the result is not updated, so I implemented v-resize by myself. If Jane doesn’t want to send it, send it here