vue，jsx里自定义指令的写法

Posted 2021-09-13 ever

用原生vnode的数据格式使用自定义指令：

注意属性名一定是directives！！！不能改！

// 格式
const directives = [
    { name: \'permission\', value: [\'hangup\'], modifiers: {} }
]
return <div ...{ { directives }}></div>

// 实例
render: (h: any, scope: any) => {
    let directives, comp = \'\'
    if(scope.row.payment_status === \'付款成功\') {
        if(scope.row.is_hang === 1) {
            directives = [
                { name: \'permission\', value: [\'hangup\'], modifiers: {} }
            ]
            comp = <el-button type="text" on-click={() => this.handleEvent(\'hangup\', scope.row)} {...{ directives }}>挂起</el-button>
        } else {
            directives = [
                { name: \'permission\', value: [\'cancelHangup\'], modifiers: {} }
            ]
            comp = <el-button type="text" on-click={() => this.handleEvent(\'cancelHangup\', scope.row)} {...{ directives }}>取消挂起</el-button>
        }
    }
    return (
        {comp}
    )
}