小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
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 通过获取的指令参数和修饰符来操作元素
- 通过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';
}
});
- 通过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="";
}
});