Vue自定义指令及指令的传参和修饰符

1,982 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

vue本身提供了很多的指令,但是有的时候,我们需要一些特殊的指令来实现我们特定的功能,那就需要自定义指令,来丰富组件的功能和特性;

如何自定义指令:

Vue.directive("指令名",fn);

第一个参数:指令的名称; 第二个参数:是一个方法,定义指令的相关功能。 注意: fn函数中,第一个参数是该指令所在的整个元素,vue会自动传进来; 第二个参数是指令对应的对象;该指令对象里面包含了指令的基本信息; 如下定义一个定住的指令:

	Vue.directive('pin',function(el,obj){
		var pinned = obj.value;//在html该指令中传入的值
		if (pinned) {
			el.style.position = 'fixed';
			el.style.top="20px";
			el.style.left="20px";
		}else{
			el.style.position = 'static';
		}
	});

#指令的传参及修饰符 在定义指令时,可以通过fn函数的第二个参数获取指令对应的值(obj.value) 也能获得指令的参数obj.arg 以及指令的修饰符obj.modifiers 通过获取的指令参数和修饰符来操作元素

  1. 通过obj.modifiers获取指令修饰符来操作元素样式
	Vue.directive('pin',function(el,obj){
		var pinned = obj.value;
		var position = obj.modifiers;//指令的修饰符
		if (pinned) {
			el.style.position = 'fixed';
			for(var val in position){				
				if (position[val]) {
					el.style[val]='10px';					
				}
			}
		
	
		}else{
			el.style.position = 'static';
		}
	});
  1. 通过obj.arg获取指令的参数,根据参数来操作元素样式 参数位置:
指令:参数名
<div  v-pin:warning="xxx">
	Vue.directive('pin',function(el,obj){
		var pinned = obj.value;
		var position = obj.modifiers;
		var args = obj.arg;
		if (pinned) {
			el.style.position = 'fixed';
			if (args=="warning") {
				el.style.backgroundColor="red";
			}
			for(var val in position){				
				if (position[val]) {
					el.style[val]='10px';					
				}
			}	
		}else{
			el.style.position = 'static';
			el.style.backgroundColor="";
		}
	});