npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

multiple-cascader

v1.0.11

Published

multiple-cascader

Downloads

16

Readme

Multiple Cascader

基于antd的cascader级联菜单实现的多选级联功能

Purpose


由于项目中有基于多个级联选项来进行查询搜索的需求,基于此扩展了ant的级联菜单只能单选的功能; 目前multiple-cascader只能选中多个三级菜单,选中一、二级时为单选功能,若选到三级时,则无法选中一二级,但可选多个三级;

Useage


  • npm install multiple-cascader
<MultipleCascader {...props} />

Options


  • 与antd的cascader参数大部分相同, 以下详细列出当前支持与不支持(后期会迭代版本予以支持)的参数:

| 参数 | 说明 | 类型 | 默认值 | 是否支持 | | --- | --- | --- | --- | --- | | selectMax | 最大输入条数 | number | - | 新增 | | allowClear | 是否支持清除 | boolean | true | Y | | autoFocus | 自动获取焦点 | boolean | false | N | | changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 | boolean | false | Y | | selectChange | 选中完成后的回调 | (isCeil, notAllow) => void | - | 新增 | | className | 自定义类名 | string | - | Y | | defaultValue | 默认的选中项 | string[] | [] | N | | disabled | 禁用 | boolean | false | Y | | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(' / ') | N | | expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' | Y | | fieldNames | 自定义 options 中 label name children 的字段 | object | { label: 'label', value: 'value', children: 'children' } | N | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。示例 | Function(triggerNode) | () => document.body | Y | | loadData | 用于动态加载选项,无法与 showSearch 一起使用 | (selectedOptions) => void | - | N | | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | Y | | options | 可选项数据源 | Option[] | - | Y | | placeholder | 输入框占位文本 | string | '请选择' | Y | | popupClassName | 自定义浮层类名 | string | - | Y | | popupPlacement | 浮层预设位置:bottomLeft bottomRight topLeft topRight | Enum | bottomLeft | Y | | popupVisible | 控制浮层显隐 | boolean | - | Y | | showSearch | 在选择框中显示搜索框 | boolean | true | N | | size | 输入框大小,可选 large default small | string | default | N | | style | 自定义样式 | string | - | N | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | N | | value | 指定选中项 | string[] | - | N | | onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | Y | | onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | N |