在前端开发中，下拉菜单是一个常见的 UI 组件。而相较于普通的文本下拉菜单，图片下拉菜单往往更加生动有趣，并能更好地吸引用户的注意力。本文将介绍一个名为 @tkrkt/react-image-dropdown 的 npm 包，它能够轻松地实现图片下拉菜单。
安装
使用 npm 安装：
npm install @tkrkt/react-image-dropdown
使用
首先引入我们的 ImageDropdown 组件：
import ImageDropdown from '@tkrkt/react-image-dropdown';
ImageDropdown 组件接受一个数组作为数据源，并按顺序自动渲染出下拉菜单。数组中的每个元素都包含两个属性，一个是 title，表示该项的名称，另一个是 imageUrl，表示该项对应的图片路径。下面是一个具体示例：
const options = [
{ title: '铅笔', imageUrl: 'https://picsum.photos/id/100/50' },
{ title: '橡皮', imageUrl: 'https://picsum.photos/id/101/50' },
{ title: '尺子', imageUrl: 'https://picsum.photos/id/102/50' },
];我们可以把这个数组作为参数传给 ImageDropdown 组件并渲染出下拉菜单。
<ImageDropdown options={options} />在使用中，我们还可以通过指定 activeIndex 属性来控制下拉菜单的初始选中项。比如我们想默认选中第二项：
<ImageDropdown options={options} activeIndex={1} />参数
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| options | 下拉菜单的数据源 | {title:string, imageUrl:string}[] | [] |
| activeIndex | 默认选中项的下标 | number | 0 |
| onOptionSelected | 切换选项时的回调函数 | (index:number) => void | - |
实现原理
@tkrkt/react-image-dropdown 通过在底部增加一个固定高度的遮罩层，并通过 z-index 属性将下拉菜单层级置于遮罩层之上的方式，实现了类似于浮出效果的下拉菜单。同时，该组件利用了 React 中的 Portal 特性，将下拉菜单渲染到距离页面顶部最近的未使用样式表的 div 中，从而避免了各种样式冲突。
总结
@tkrkt/react-image-dropdown 是一个轻量级、易用且功能强大的 npm 包，可以方便地实现图片下拉菜单的功能。通过本文的介绍，您已经可以开始试着在您的项目中使用这个组件了。希望这篇文章能对您有所帮助，如果您有任何问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552d081e8991b448d038d