vue 自定义指令

时间：2020-01-06 18:58:34 阅读：90 评论：0 收藏：0 [点我收藏+]

/**

* 指令

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

* 给当前菜单添加 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

}

})

vue 自定义指令

原文：https://www.cnblogs.com/bm20131123/p/12157426.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)