前言
vue使用自定义指令directives监听元素宽度和高度的变化
一、自定指令是什么?directives?
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
二、最简单的自定义指令
1.input框自动聚焦
只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。
代码如下:
和methods()放在同一层。
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
<input type="text" v-focus>
2.编写自动获取宽高的指令v-resize
代码如下:
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}); // 关键(这传入的是函数,所以执行此函数)
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
},
methods: {
monResize(data){
let {width, height} = data;
}
}
<div v-resize="monResize"></div>
总结
记录总没错