Vue2 混入与自定义指令

// 定义混入对象
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

// 使用混入
const Component = Vue.extend({
  mixins: [myMixin]
})

const mixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

Vue.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

// 全局注册
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

// 局部注册
directives: {
  focus: {
    inserted(el) {
      el.focus()
    }
  }
}

Vue.directive('demo', {
  bind(el, binding, vnode) {
    // 只调用一次，指令第一次绑定到元素时调用
  },
  inserted(el, binding, vnode) {
    // 被绑定元素插入父节点时调用
  },
  update(el, binding, vnode, oldVnode) {
    // 所在组件的 VNode 更新时调用
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  },
  unbind(el, binding, vnode) {
    // 只调用一次，指令与元素解绑时调用
  }
})

Vue.directive('demo', {
  bind(el, binding, vnode) {
    console.log(binding.value)    // 指令的绑定值
    console.log(binding.oldValue) // 指令绑定的前一个值
    console.log(binding.arg)      // 传给指令的参数
    console.log(binding.modifiers)// 修饰符对象
  }
})

Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const permissions = store.getters.permissions
    
    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

// 使用
<button v-permission="'admin'">删除</button>

Vue.directive('debounce', {
  inserted(el, binding) {
    let timer
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 1000)
    })
  }
})

// 使用
<button v-debounce="handleClick">提交</button>

Vue.directive('lazy', {
  inserted(el, binding) {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.src = binding.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
})

// 使用
<img v-lazy="imageUrl" />