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项目全局防抖, 点击后移除按钮焦点的主要内容,如果未能解决你的问题,请参考以下文章