Vue 自定义指令

Vue.directive("resize", {
  //只调用一次，指令第一次绑定元素时调用
  //在这里可以进行一次性的初始化设置
  bind: function(el, binding, value){},
  //被绑定元素插入父节点时调用
  //（仅保证父节点存在，但不一定已被插入文档中）
  inserted: function(el, binding, vnode){},
  //所在组件的 Vnode 更新时调用
  //但是可能发生在其子 VNode 更新之前
  //指令的值可能发生了变化，也可能没有
  //但是可以通过比较更新前后的值来忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode){},
  //指令所在的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function(el, binding, vnode, oldVnode){},
  //只调用一次，指令与元素解绑时调用
  unbind: function(el, binding, vnode){},
});

function(
  // 指令所绑定的元素，可以用来直接操作 DOM
  el,
  // binding 一个对象，包含以下属性
  {
    // 指令名，不包括 -v 前缀
    name,
    // 指令的绑定值，例如：v-my-directive="1+1"中，绑定值为 2
    value,
    // 指令绑定的前一个值
    // 仅在 update 和 componentUpdated 钩子中可用
    oldValue,
    //字符串形式的指令表达式
    //例如 v-my-directive="1+1" 中，表达式为 "1+1"
    expression,
    //例如指令的参数，可选。
    //例如 v-my-directive:foo 中，参数为 "foo"
    arg,
    //一个包含修饰符的对象
    //例如：v-my-directive.foo.bar 中，
    //修饰符对象为 {foo: true, bar: true}
    modifiers
  },
  //Vue 编译生成的虚拟节点
  vnode,
  //上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
  oldVnode
)

<template>
    <div>
        <s-directive-page />
    </div>
</template>

<script>
import SDirectivePage from "./components/SDirectivePage"
export default{
    components: {
        "s-directive-page": SDirectivePage
    }
}
</script>

import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.directive("resize", {
  inserted(el, binding){
    //将回调函数从参数 binding 中取出来
    const callback = binding.value;
    //监听浏览器的 resize 事件
    window.addEventListener("resize", ()=>{callback(window.innerWidth)});
    //可以把共享的数据放到 el 上，因为 el 外的参数都是只读的
    el._onResize = callback;
  },
  //绑定事件的话必须将其销毁，在 unbind 函数内销毁
  unbind(el){
    if(!el._onResize) return;
    window.removeEventListener("resize", el._onResize);
    delete el._onResize;
  }
});

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

<template>
    <div v-resize="onResize">window width is: {{ length }}</div>
</template>

<script>
export default {
    data(){
        return{
            direction: "vertical",
            length: 0
        };
    },
    methods:{
        onResize(length) {
            this.length = length;
        }
    }
}
</script>>

import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.directive("resize", {
  inserted(el, binding){
    const callback = binding.value;
    // 从参数 binding 中取出指令的参数
    const direction = binding.arg;
    // 定义一个函数判断 direction 是不是 vertical ，如果是 direction 就是
    // window.innerHeight, 否则是 window.innerWidth
    const result = () => {
      return direction === "vertical" ? window.innerHeight : window.innerWidth;
    }
    const onResize = () => callback(result());
    window.addEventListener("resize", onResize);
    el._onResize = onResize;
  },
  unbind(el){
    if(!el._onResize) return;
    window.removeEventListener("resize", el._onResize);
    delete el._onResize;
  }
});

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

<template>
    <div v-resize:[direction].quiet="onResize">window height is:{{ length }}</div>
</template>

<script>
export default {
    data(){
        return{
            direction: "vertical",
            length: 0
        };
    },
    methods:{
        onResize(length) {
            this.length = length;
        }
    }
}
</script>

import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.directive("resize", {
  inserted(el, binding){
    const callback = binding.value;
    const direction = binding.arg;
    // 从参数 binding 中取出一个包含修饰符的对象 modifiers
    const modifiers = binding.modifiers;
    const result = () => {
      return direction === "vertical" ? window.innerHeight : window.innerWidth;
    }
    const onResize = () => callback(result());
    window.addEventListener("resize", onResize);
    if(!modifiers || !modifiers.quiet){
      onResize();
    }
    el._onResize = onResize;
  },
  unbind(el){
    if(!el._onResize) return;
    window.removeEventListener("resize", el._onResize);
    delete el._onResize;
  }
});

new Vue({
  render: h => h(App),
}).$mount(‘#app‘)

<template>
    <div v-resize:[direction].quiet="onResize">window height is: {{ length }}</div>
    <!-- <div v-resize:[direction]="onResize">window height is: {{ length }}</div> -->
</template>

<script>
export default {
    data(){
        return{
            direction: "vertical",
            length: 0
        };
    },
    methods:{
        onResize(length) {
            this.length = length;
        }
    }
}
</script>