vue 自定义指令如何传参

一、可视区域加载指令

用来控制组件显隐的指令。当前组件到达可视区域后显示该元素。

import Vue from 'vue'

const waypoint = Vue.directive('waypoint', {
  inserted (el, binding, vnode) {
    const { showStr } = binding.value // 控制组件显隐的变量名称，注意，传字符串
    const scroll = () => {
      if (vnode.context[showStr]) {
        return // 已经为true，代表组件已显示，不需要再进行判断
      }
      const rect = el.getBoundingClientRect() // 获取元素位置
      // 判断当前元素是否在可视区域内
      const isCheck = window && (rect.top < window.innerHeight && rect.bottom > 0) && (rect.left < window.innerWidth && rect.right > 0)
      if (isCheck && showStr) { // 可视区域内
        vnode.context[showStr] = true // 组件内对应变量改为true，显示组件
      }
    }
    scroll()
    window.addEventListener('scroll', scroll, true)
  },
  unbind () {
    window.removeEventListener('scroll', scroll, true)
  }
})

export default waypoint

如何使用呢？在指令中传入控制组件显示还是隐藏的变量，不过是作为字符串传入。showBankPartners 初始化为 false，等到为

<div v-waypoint="{showStr: 'showBankPartners'}">
  <bank-partners v-if="showBankPartners" />
  <div class="skeleton" style="height: 324px;" v-else></div>
</div>

当然我们也可以通过指令传入的参数去限制输入小数保留几位小数的情况。