vue3 jsx或tsx中使用自定义指令

vue3 jsx或tsx中使用自定义指令

直接使用

直接在元素中使用，只能传递 value 和 arg 值

function render(){ 
	return (<div v-permission="api:view">自定义指令</div>);
}

function render(){ 
	return (<div v-permission:hide="api:view">自定义指令</div>);
}

使用withDirectives函数

import { resolveDirective  ,withDirectives } from 'vue'
//......
//......
// 使用
function render(){
	// 查找注册的指令
	var permission = resolveDirective('permission');
	if(permission){
		 /**
	     * 传递 value
	     * 等同于    <div v-permission="api:view">自定义指令</div>
	     */
	    return withDirectives((<div>自定义指令</div>),[[permission,'api:view']]);
	}
	return "";
}

传递 arg 或 modifiers 值

/**
 * 传递 arg 值
 * 等同于   <div v-permission:hide="api:view">自定义指令</div>
 */
withDirectives((<div>自定义指令</div>),[[permission,'api:view','hide']]);

/**
 * 传递 modifiers 值
 * 等同于   <div v-permission.hide="api:view">自定义指令</div>
 */
withDirectives((<div>自定义指令</div>),[[permission,'api:view','',{hide:true}]]);

/**
 * 同时传递 arg 和 modifiers 值
 * 等同于   <div v-permission:ok.hide="api:view">自定义指令</div>
 */
withDirectives((<div>自定义指令</div>),[[permission,'api:view','ok',{hide:true}]]);