vue 自定义指令

/**

 * 指令 

 * 判断当前菜单项是否显示

 * 给当前菜单添加 a标签 并添加href属性值

 */

Vue.directive('menushow', {

  inserted: function(el, binding){

    el.style.display = binding.value === true ? 'block' : 'none'

    var link = el.attributes['to'].nodeValue

    var parent_node = document.createElement(binding.arg)

    parent_node.href = link

    el.parentNode.replaceChild(parent_node, el)

    parent_node.appendChild(el)

  }

})

 

/**

 * 只能输入数字 

 * 可以通过修饰符输入不同的条件 chart 数字+英文

  后续有要求继续添加。。

 */

Vue.directive('only-num', function(el, binding){

  el = el || window.event

  var input = el.getElementsByTagName('input')[0]

  input.onkeyup = function() {

    var val = input.value

    var modifiersObj = binding.modifiers

    if(modifiersObj.chart){

      input.value = val.replace(/[^0-9a-zA-Z]/g, '')

      return

    }

    input.value = val.replace(/[^0-9]/g, '')

  }

})

 

//强制刷新指令 解决输入框偶现输入不进值的问题

Vue.directive('forceUpdate', {

  inserted: function(el,binding,vnode,oldVnode) {

    var element

    if(el.getElementsByTagName('input')[0]){

      element = el.getElementsByTagName('input')[0]

    }else if(el.getElementsByTagName('textarea')[0]){

      element = el.getElementsByTagName('textarea')[0]

    }

    element.onblur = function(){

      vnode.context.$forceUpdate

    }

  }

})