select-ele

通过 CSS 选择器选取 DOM 元素，并为其绑定精美的点击（或其他事件）视觉效果。
内置 3 种效果，支持 自定义效果函数，完整 TypeScript 类型支持。

安装

npm install select-ele

快速开始

import { SelectEle } from 'select-ele';

// 使用 CSS 选择器 + 内置效果
const instance = new SelectEle('.card', {
  effect: 'border-flash',
});

// 清理（移除监听 & 样式）
instance.destroy();

内置效果

1. border-flash — 边框高亮闪缩

点击后元素出现发光边框，脉冲闪烁后收缩消失。

new SelectEle('.item', {
  effect: 'border-flash',
  effectOptions: {
    color: '#4f9eff',   // 边框颜色，默认 '#4f9eff'
    duration: 600,      // 动画时长(ms)，默认 600
    borderWidth: 2,     // 边框宽度(px)，默认 2
  },
});

2. ripple — 水波纹（水滴落水）

点击后同心环从元素中心向外扩散，不超出元素范围；边缘保留选中高亮，默认 1–2 圈。

new SelectEle('#hero', {
  effect: 'ripple',
  effectOptions: {
    color: '#a855f7',   // 波纹颜色，默认 '#4f9eff'
    duration: 1200,     // 单环动画时长(ms)，默认 1200
    rings: 2,           // 同心环数量(1–4)，默认 2
  },
});

3. glow — 光晕脉冲

点击后元素出现柔和的光晕扩散，渐亮再渐灭。

new SelectEle('button.primary', {
  effect: 'glow',
  effectOptions: {
    color: '#22c55e',   // 光晕颜色，默认 '#4f9eff'
    duration: 800,      // 动画时长(ms)，默认 800
    spread: 15,         // 扩散半径(px)，默认 15
  },
});

自定义效果

传入一个函数作为 effect，即可实现任意自定义效果：

new SelectEle('.shake-me', {
  effect: (el, done) => {
    el.style.animation = 'shake 0.4s ease-in-out';
    el.addEventListener('animationend', () => {
      el.style.animation = '';
      done();
    }, { once: true });
  },
});

也可以通过 SelectEle.registerEffect() 全局注册：

SelectEle.registerEffect('shake', (el, opts, done) => {
  // ...
  done();
});

new SelectEle('.btn', { effect: 'shake' as any });

配置项

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | effect | 'border-flash' \| 'ripple' \| 'glow' \| Function | 'border-flash' | 效果名称或自定义函数 | | effectOptions | EffectOptions | {} | 传递给效果的参数 | | trigger | 'click' \| 'mouseenter' \| 'dblclick' \| 'contextmenu' | 'click' | 触发效果的事件类型 | | once | boolean | false | 是否每个元素只触发一次 | | delegate | boolean | false | 是否使用事件委托（自动支持动态元素） | | root | HTMLElement \| Document | document | 查询/委托的根元素 |

API

new SelectEle(selector, options?)

创建实例，自动选取匹配的元素并绑定事件。

instance.refresh()

重新扫描 DOM，绑定新增匹配元素（仅 delegate: false 时需要）。

instance.destroy()

移除所有事件监听器和注入的样式表。

instance.getElements()

返回当前已绑定的元素数组。

SelectEle.registerEffect(name, fn)

全局注册自定义效果，注册后可通过名称引用。

便捷函数

import { selectEle } from 'select-ele';

const instance = selectEle('.card', { effect: 'ripple' });

导出内容

// 类
export { SelectEle } from 'select-ele';

// 便捷工厂函数
export { selectEle } from 'select-ele';

// 内置效果函数（可单独使用）
export { borderFlash, ripple, glow } from 'select-ele';

// TypeScript 类型
export type {
  SelectEleOptions,
  EffectOptions,
  BuiltInEffect,
  CustomEffectFn,
  EffectFunction,
} from 'select-ele';

浏览器兼容

• Chrome 69+
• Firefox 62+
• Safari 14.1+
• Edge 79+

开发

# 安装依赖
npm install

# 构建
npm run build

# 监听模式
npm run dev

发布到 npm

npm login
npm publish

License

MIT