简介
angular-miller-columns 是一个基于 Angular 框架的插件，用于实现树列表的 Miller Columns 布局。Miller Columns 布局早在 Mac OS X 10.3 的 Finder 中就应用了，一般用于文件管理等场景，优点是清晰易懂，占用空间小。
在前端开发中，我们有时候需要实现类似的树状结构，以方便用户快速理解与选择。angular-miller-columns 插件的出现，为我们带来了方便快捷的实现方式。
安装与使用
安装
使用 npm 安装：
npm install angular-miller-columns
引入
在需要使用的模块中，先引入 angular-miller-columns：
import { MillerColumnsModule } from 'angular-miller-columns';然后在 imports 中添加：
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MillerColumnsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}使用
在组件中使用 Miller Columns 插件，示例代码如下：
<mc-miller-columns [items]="treeData" (selected)="onSelected($event)" [config]="treeConfig"> </mc-miller-columns>
其中，[items] 表示展示的树形结构数据，[config] 表示 Miller Columns 的配置参数，(selected) 表示选中节点的事件。
API
items
必需。展示的树形结构数据。
config
可选。Miller Columns 的配置参数。
常用的配置参数有：
column_width，单列的宽度，默认为 200；column_padding，单列的内边距，默认为 0；font_size，字体大小，默认为 16；min_width，最小宽度，默认为 200；max_width，最大宽度，默认为 200。
完整的配置参数列表，请参考官方文档。
selected
必需。选中节点的事件。
选中的节点信息，以事件参数的形式传回调用者组件：
onSelected(event) {
console.log(event);
}示例代码
下面是一个示例的树形结构数据：
-- -------------------- ---- -------
-------- - -
-
------ ----------
--------- -
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
--
--
-
------ ---------
--------- -
-
------ --------------
--
--
--
--
--
-
------ ----------
--------- -
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
-
------ --------------
--------- -
-
------ ------ -------------
--
-
------ ------ -------------
--
--
--
--
--
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
--
--
--
--
--下面是完整的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------ ------------------ ------------------------------- ------------------------------------------
--
--
------ ----- ------------ -
-------- - -
-
------ ----------
--------- -
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
--
--
-
------ ---------
--------- -
-
------ --------------
--
--
--
--
--
-
------ ----------
--------- -
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
-
------ --------------
--------- -
-
------ ------ -------------
--
-
------ ------ -------------
--
--
--
--
--
-
------ ---------
--------- -
-
------ --------------
--
-
------ --------------
--
--
--
--
--
--
---------- - -
------------- ----
---------- ---
---------- ----
---------- ----
--
----------------- -
-------------------
-
-指导意义
angular-miller-columns 插件可以帮助我们快速实现 Miller Columns 布局。对于需要展示树形结构数据的场景，Miller Columns 布局可以提供更加清晰易懂的显示方式。该插件使用简单、易于配置，可以既满足基本使用需求，又可根据实际情况进行定制，具有较高的应用价值。
总结
angular-miller-columns 插件是一个好用的 Angular 插件，可以方便快捷地实现树形结构的 Miller Columns 布局。它的使用简单，灵活可配置，可以帮助我们提高开发效率，为用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd581e8991b448e577d