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

 0 0条评论

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传递参数即可。

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客