vue3中el-button添加自定义指令实现summit前再次确认密码

element-plus: "2.2.2"

vue: "3.2.36"

使用场景：在后台管理系统中，某些比较敏感的操作，比如删除角色、重置密码等，需要再一次让当前用户输入密码，确认身份，以免当用户离开时，其他用户擅自进行敏感操作。

整理了一下思路，因为el-button分布在不同view里，很难提前确定具体哪个views中的button需要使用此功能，比较愚蠢的方法自然是在每个view中，重复实现方法，当然不可取，这里就可以使用自定义指令来实现了，那就非常方便了。

先看一下最终实现效果，如下：

这里我曾经有两个方案

第一个方案就是给el-button添加一个没有参数的自定义指令，然后进行验证判断，成功后执行自身监听的click事件。

<el-button @click="handle" v-check></el-button>

但是经过反复测试，无法实现，因为自定义指令中也需要监听onclick事件，两个监听没办法做到先后顺序，如果能够通过这样实现，那应该是最完美的，但是自己没能力实现，如果有大神赐教，不胜感激。

第二个方案就是自定义指令传参数，传递本身@click监听的函数，然后指令内部再执行此函数，经过测试，实现，代码如下：

import { AJLogin } from "@/network/user"
import { Password } from "@/utils/regexp"
import { Session } from "@/utils/storage"
import { ElMessageBox } from "element-plus"
import md5 from "js-md5"
import { App, DirectiveBinding } from "vue"

/**
 * El_Button 自定义指令，按钮需要验证当前用户密码
 * 传递参数 {fn:function,arg:...arg}
 */
export default (app: App<Element>) => {
    app.directive('check', {
        mounted(el: HTMLElement, val: DirectiveBinding) {
        console.log(val.value)
        el.addEventListener('click', (e: Event) => {
            ElMessageBox.prompt('敏感操作需要再次确认密码', '警告', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                inputPattern: Password,
                inputErrorMessage: '密码错误',
                inputPlaceholder: '请输入当前已登录管理员密码',
                inputType: 'password',
                buttonSize: 'small'
        }).then(({
            value
        }) => {
            AJLogin(Session.get<string>('username')!, md5(value)).then(() => {
                const { fn, arg } = val.value
                    fn(arg)
                })
        })
        })
    }
    })
}

在需要使用的button使用以下指令即可：

<el-button v-loading="submitLoading" v-check="{fn:handleSubmit,arg:null}" 
    type="primary" size="default">提交</el-button>

如果函数有参数，则在arg传递参数即可。