1、使用 CSS :hover 状态和伪类冻结元素。

在Element-ui的Button组件中,当鼠标移入时,会根据hover状态改变按钮背景颜色,你可以在这里尝试,

  • 鼠标移入前:image.png
  • 鼠标移入后:image.png
    当我们想要修改hover状态的按钮背景时,可以通过Chrome devtools来模拟hover状态。
    image.png

2、模拟表单元素的聚焦。

对于Select表单组件,当元素获取焦点后会展示下拉菜单,丢失焦点后就会消失,如果你想通过Chrome devtools选中它,往往是选择不到的。

  • 获取焦点时:
    image.png
  • 丢失焦点时:
    image.png

首先,我们需要选中元素,并勾选Emulate a focused page选项,
image.png
随后,点击Select组件,并通过Chrome devtools选中该下拉框。
image.png

3、通过移除鼠标事件监听器来冻结元素。

4、使用断点冻结元素。

5、使用代码段设置超时。

最后修改:2025 年 04 月 22 日
如果觉得我的文章对你有用,请随意赞赏