vue3自定义快捷键设置

如果项目页面上按钮需要配置快捷键，又不想引用第三方插件

那么就来看看vue的自定义命令吧

app为已创建好的Vue实例

 app.directive('dk',{
        mounted(el,{value}){
            let { dom, key, fn='', power='' } = value;
            dom = dom();
            dom.tabIndex = -1;
            let tsKey = document.createElement('span')
            tsKey.innerHTML = `（${key.toUpperCase()}）`;
            el.appendChild(tsKey);
            el.$_lsid = new AbortController();
            let that = {status:false,...value};
            dom.addEventListener('keydown',(e)=> {
                if(e.altKey && e.key.toLocaleLowerCase() == that.key.toLocaleLowerCase()){
                    e.preventDefault();
                    if(that.status === true) return;
                    that.status = true;
                    setTimeout(()=> that.status = false,200)
                    fn == '' && typeof fn != 'function' ? el.click() : fn();
                }
            },{signal:el.$_lsid.signal})
        },
        unmounted(el,{value}){
            el.$disStop();
            el.$_lsid.abort();
        }
    })

这里使用方式为

1.给最外层父元素设置ref,

2.再给按钮添加属性v-dk="{dom:()=>$refs.父元素ref,fn:()=>{执行方法}, key: '快捷键' }"

如果最外层父元素是弹窗，则v-dk="{dom:()=>$refs.父元素ref.d_o,fn:()=>{执行方法}, key: '快捷键' }"

当然也可以控制权限，此处power为该按钮权限,通过比对账号是否拥有该按钮权限，控制按钮是否禁用也是可以实现的。 tip：根据实际情况进行判断（前提在v-dk中传入power值，以及已知账号权限）

禁用el.classList.add('is-disabled');el.setAttribute('disabled',true);

解除禁用el.classList.remove('is-disabled');el.removeAttribute('disabled');

最后

使用快捷键Alt + （设置的快捷键）执行按下按钮。