active

功能说明

active是EvadeBehavior中的一种行为，它用于触发元素的活跃状态。当鼠标移动到元素上时，active会为元素添加一个活跃状态的class，移出鼠标时则会移除该class。

使用方法

import { EvadeBehavior } from 'yuka';

const behavior = new EvadeBehavior();
behavior.active();

参数说明

active方法不需要传递任何参数。

配置属性

在EvadeBehavior中可使用以下配置属性来扩展active的功能：

• activeClass：活跃状态的class名称，可以自定义。默认名称为active。

import { EvadeBehavior } from 'yuka';

const behavior = new EvadeBehavior({
  activeClass: 'my-active-class'
});
behavior.active();

示例代码

<div class="button"></div>

.button {
  width: 100px;
  height: 50px;
  border: 1px solid gray;
}

.button.active {
  background-color: rgb(210, 210, 210);
}

import { EvadeBehavior } from 'yuka';

const behavior = new EvadeBehavior({
  activeClass: 'active'
});

const buttonElement = document.querySelector('.button');

buttonElement.addEventListener('mouseenter', () => behavior.active(buttonElement));
buttonElement.addEventListener('mouseleave', () => behavior.active(buttonElement));

运行以上代码，鼠标移动到按钮上时，按钮颜色会变为灰色，移出鼠标时，则恢复原来的颜色。