vue项目全局防抖, 点击后移除按钮焦点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目全局防抖, 点击后移除按钮焦点相关的知识,希望对你有一定的参考价值。

参考技术A 按钮防抖是个自古以来的老问题
以下可以解决所有vue的事件绑定防抖,
但是原生事件绑定不行,

点击后移除焦点是解决点击按钮后弹窗, 此时按回车或空格会继续触发按钮点击
造成不必要的困扰

材质 UI 按钮移除焦点框

【中文标题】材质 UI 按钮移除焦点框【英文标题】:Material UI Button remove focus frame 【发布时间】:2020-03-17 23:55:51 【问题描述】:

有没有办法移除 Material UI Button 的焦点框?

我尝试用box-shadow: none 添加一个CSS 类.focusframe,但这似乎并没有移除焦点框。单击时,该按钮将保留在此红色焦点框上。

带有 Button 渲染的 TypeScript 类:

export class App extends React.Component<AppProps, AppState> 
    public componentDidMount() 
        this.setState(sessionLoaded: true);
    

    public render() 
        if (this.state) 
            return <div>
                <Button className='focusframe' onClick=() => console.log("Material UI Button clicked!") color='primary' variant='contained'>Click Me!</Button>
            </div>;
         else 
            return <div>State not yet accessible.</div>;
        
    

SCSS 类:

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        box-shadow: none;
    

点击按钮前:

点击按钮后:

编辑 1:

按钮的 HTML:

<div>
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained focusframe MuiButton-containedPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">
      Click Me!
    </span>
    <span class="MuiTouchRipple-root">
    </span>
  </button>
</div>

SCSS 文件 _colors.scss:

$body-color-base: #343a40;
$body-color-font: #dddddd;

编辑 2:

如果我在全局范围内设置它会起作用:

*:focus 
    outline: none !important;

但如果我将它设置为.focusframe 类,它就不起作用:

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        :focus 
            outline: none;
        
    

【问题讨论】:

那个“焦点框”不是来自 Material-UI。我怀疑这是您正在导入的某些全局样式的副作用(例如“~bootstrap/scss/bootstrap”、“_colors.scss”)。您应该能够使用 Chrome 开发人员工具对其进行检查,以确定样式的来源。 【参考方案1】:

通过 CSS 禁用 outline

*:focus 
    outline: none;

根据您的编辑,您的 css 选择器是错误的:

body 
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe 
        &:focus  <--- & here
            outline: none;
        
    

【讨论】:

可能有一些更具体的规则。尝试使用 MuiButton-root:focus 或 button:focus 好的,与号“&”是缺失的部分。谢谢!您能解释一下“&”符号的确切含义吗? 在 Sass/Scss 中,它基本上意味着将当前选择器与外部选择器连接起来,因此 .focusframe &:focus ... 它在 .focusframe:focus ... 中编译.focusframe :focus ... 它编译在不同的 .focusframe :focus ... 中。 Extra info 您可能需要在第一个答案中添加!important【参考方案2】:

你可以使用 makeStyle 钩子如下

import  Button, makeStyles  from '@material-ui/core';
import clsx from 'clsx';

const useStyles = makeStyles(
    root: 
        position:"fixed",
        bottom:0,
        right:0,
        border:0,
        '&:focus': 
            outline:0,
            border:0,
        
    ,
);

function ChatBtn(onClick) 
    const classes = useStyles();
    return (
        <Button
            className=classes.root
            color="inherit"
            variant="outlined" 
            aria-label="open drawer"
            edge="start"
            
            onClick=onClick
        >
            LIVE CHAT
        </Button>
    );


export default ChatBtn;

【讨论】:

以上是关于vue项目全局防抖, 点击后移除按钮焦点的主要内容,如果未能解决你的问题,请参考以下文章

vue实现防抖函数节流函数,全局使用输入框按钮

vue项目中回车键登录登录密码是否可见以及登录功能做防抖处理

vue自定义防抖&节流指令的实现&全局指令定义和使用-案例

vue中使用防抖节流

vue键盘事件不生效

关于闭包 vue3 防抖 节流