自定义指令

代码实现目的：使用自定义在某元素上，让某元素宽高变化时触发页面resize，特别是页面有图表元素，页面窗口大小不变，但是某些页面联动效果，页面一些元素大小改变，图表要resize一下，也可以延申一些其他的效果和自定义，记录一下。

vue部分

<div v-resize="resize"></div>

js部分

export default { directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令 的对象 let width = '', height = ''; function isReize() { const style=document.defaultView.getComputedStyle(el); if (width !== style.width || height !== style.height) { binding.value(); // 关键 } width = style.width; height = style.height; } el.__vueSetInterval__ = setInterval(isReize, 300); }, unbind(el) { clearInterval(el.__vueSetInterval__); } } }, methods: { resize() { // 当宽高变化时就会执行 //执行某些操作 我这里是某元素宽高让页面resize let resizeEvent = document.createEvent('Event'); resizeEvent.initEvent('resize', true, true); window.dispatchEvent(resizeEvent); this.filterIndex=null } } }