# @duskmoon-dev/el-cascader 中文文档

规范地址：https://npmcn.com/package/%40duskmoon-dev/el-cascader/

版本：1\.10\.3
npm 元数据更新时间：2026-11-11T10:48:54.991Z
中文译文更新时间：2026-11-13T01:57:46.508Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/el-cascader
原文对照：https://npmcn.com/package/%40duskmoon-dev/el-cascader/?lang=original
项目主页：https://github.com/duskmoon-dev/duskmoon-elements#readme
源码仓库：https://github.com/duskmoon-dev/duskmoon-elements

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：398 kB，22 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-01-19T08:31:19.899Z
- 最新版本发布：2026-11-11T10:48:54.482Z
- 近 30 天下载量：2492（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 50 个）

## 中文简介

DuskMoon Cascader 自定义元素,用于多级串联选择

## 安装

```sh
npm install @duskmoon-dev/el-cascader
```

也可以使用：`pnpm add @duskmoon-dev/el-cascader`、`yarn add @duskmoon-dev/el-cascader`、`bun add @duskmoon-dev/el-cascader`

## README

# @duskmoon-dev/el-cascader(日语:克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克

用于分级数据的多板块串联选择组件.

## 安装

```bash
npm install @duskmoon-dev/el-cascader
```

## 使用量

```javascript
// Auto-register the element
import '@duskmoon-dev/el-cascader/register';

// Or manually register
import { register } from '@duskmoon-dev/el-cascader';
register();
```

```html
<el-dm-cascader placeholder="Select location..."></el-dm-cascader>
```

## 特征

-   **多小组布局**: 具有相邻面板的视觉分级
-   **点击或 Hover 扩展**: 选择面板的扩展方式
-   **多个选择**: 选择多条路径
-   **可搜索**: 过滤到所有级别
-   **同步装入**: 按要求装入儿童
-   **可清除**: 用按钮清除选择
-   **键盘导航**: 完整的键盘支持

## 设置选项

```javascript
const cascader = document.querySelector('el-dm-cascader');

cascader.setOptions([
  {
    value: 'usa',
    label: 'United States',
    children: [
      {
        value: 'california',
        label: 'California',
        children: [
          { value: 'sf', label: 'San Francisco' },
          { value: 'la', label: 'Los Angeles' }
        ]
      }
    ]
  }
]);
```

## 同步装入

```javascript
// Set initial options with leaf: false
cascader.setOptions([
  { value: 'category1', label: 'Category 1', leaf: false }
]);

// Set async loader
cascader.setLoadData(async (option) => {
  const response = await fetch(`/api/children/${option.value}`);
  return response.json();
});
```

## 属性

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `value` | `string` | `''` | 选中路径( JSON 阵列) |
| `placeholder` | `string` | `''` | 占位符文本 |
| `disabled` | `boolean` | `false` | 禁用级联 |
| `multiple` | `boolean` | `false` | 启用多选择 |
| `searchable` | `boolean` | `false` | 启用搜索 |
| `clearable` | `boolean` | `false` | 显示清晰的按钮 |
| `change-on-select` | `boolean` | `false` | 允许非叶选择 |
| `expand-trigger` | `'click' | 'hover'` | `'click'` | 扩大面板触发器 |
| `separator` | `string` | `' / '` | 显示路径分隔符 |
| `show-all-levels` | `boolean` | `true` | 只显示完整路径或叶片 |
| `size` | `'sm' | 'md' | 'lg'` | `'md'` | 大小变量 |

## 活动

| 活动 | 细节 | 说明 |
| --- | --- | --- |
| `change` | `{ value, selectedOptions, path }` | 选择已更改 |
| `expand` | `{ option, level }` | 扩大小组 |
| `search` | `{ searchValue }` | 搜索文本已更改 |

## 许可证

麻省理工学院

## 常见问题

### @duskmoon-dev/el-cascader 是什么？

DuskMoon Cascader 自定义元素,用于多级串联选择

### 如何安装 @duskmoon-dev/el-cascader？

在项目目录运行 npm install @duskmoon-dev/el-cascader，或使用 pnpm add / yarn add / bun add。

### @duskmoon-dev/el-cascader 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @duskmoon-dev/el-cascader 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @duskmoon-dev/el-cascader 可以商用吗？

@duskmoon-dev/el-cascader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @duskmoon-dev/el-cascader 的下载量有多少？

根据 npm 官方下载统计，@duskmoon-dev/el-cascader 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,492 次，日均约 83 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @duskmoon-dev/el-cascader 还在维护吗？

最新版本 1\.10\.3 发布于 2026/11/11（2 天前）；至今共发布 50 个版本，其中过去 12 个月发布了 50 个；首次发布于 2026/01/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。