前端开发涉及到大量的页面布局和设计工作，而其中比较重要的一环就是城市与地区选择器。在很多网站、在线购物平台、社交媒体和移动应用程序中，经常需要提供城市选择服务。随着 JavaScript 相关技术的不断发展，越来越多的 npm 包被开发出来以帮助开发者更容易地实现这一功能。metropolitan 就是其中之一。

1. metropolitan 简介

metropolitan 是一个支持全球城市与地区选择器的 npm 包。它的设计理念是简单、实用和易于定制。metropolitan 支持多种语言，包括英语、法语、德语、西班牙语、日语等等。该 npm 包还支持无限级别的城市与地区选择器，可以让用户选择国家、省份、地区和城市等信息。metropolitan 还支持自定义样式和回调函数，以便于开发者可以更好地掌控选择器的外观和功能。

2. 安装 metropolitan

在安装 metropolitan 前，你需要先安装 Node.js 和 npm。安装 Node.js 是非常简单的，只需从官网下载并安装即可。

安装 Node.js 之后，在终端中运行以下命令：

npm install metropolitan --save

这将会下载并安装 metropolitan npm 包，并将它记录在你的 package.json 文件中。

3. 开始使用 metropolitan

使用 metropolitan 非常简单，只需按照以下步骤即可：

3.1 初始化 metropolitan

首先，在你的项目中引入 metropolitan：

import Metropolitan from 'metropolitan';

然后实例化 metropolitan：

const metropolitan = new Metropolitan(options);

options 是一个包含多种配置选项的对象，你可以在其中设置选择器的默认值和样式，以及指定回调函数等等。以下是一个示例选项配置：

-- -------------------- ---- -------
----- ------- - -
  --------- -----
  -------------- ---
  ------ -
    ----------- ----------
    ---------- -------
    ---------------- --------
    ------------ ----------
    ------------ ----------
    ------------- ------
    ---------- -- --- --- ------- -- -- -----
    ------ --------
    ------- -------
    -------- ----- ------
    ------- -------
  --
  ----------------- ------------------------
--

3.2 渲染 metropolitan

接下来，将 metropolitan 渲染到页面中：

metropolitan.render('#metropolitan');

这里将 metropolitan 渲染到了一个 ID 为 metropolitan 的元素中。

3.3 更新 metropolitan

当你需要更新 metropolitan 的配置或选择时，可以使用以下方法：

metropolitan.update(options);

这会更新 metropolitan 的选项和样式，并重新渲染选择器。

3.4 metropolitan 的回调函数

metropolitan 的回调函数可以帮助你处理选择器的变更。以下是一个示例回调函数：

function onSelectedChangeHandler(selectedItems) {
  console.log(selectedItems);
}

这个回调函数将在每次用户选择城市或地区时调用，并将所选项目传递给它。

4. metropolitan 示例代码

以下是一个完整的 metropolitan 示例代码：

4.1 HTML

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    ------------------- ------------
  -------
  ------
    ---- ------------------------
    ------- --------------------------
  -------
-------

4.2 CSS

#metropolitan {
  margin-top: 20px;
}

4.3 JavaScript

-- -------------------- ---- -------
------ ------------ ---- ---------------

----- ------- - -
  --------- -----
  -------------- ---
  ------ -
    ----------- ----------
    ---------- -------
    ---------------- --------
    ------------ ----------
    ------------ ----------
    ------------- ------
    ---------- -- --- --- ------- -- -- -----
    ------ --------
    ------- -------
    -------- ----- ------
    ------- -------
  --
  ----------------- ------------------------
--

----- ------------ - --- ----------------------
-------------------------------------

-------- -------------------------------------- -
  ---------------------------
-

---------------------
  --------- -----
  -------------- ------ ---------- ------
  ------ -
    ----------- ------
    ---------- -------
    ---------------- --------
    ------------ ------
    ------------ --------
  --
---

5. 总结

同样的，还有很多其他的 npm 包可以实现城市与地区选择器，如 city-picker 和 react-city。使用这些 npm 包可以大大提升开发效率，减少代码量。通过这篇文章，我们学习到了 npm 包 metropolitan 的使用方法，希望这能对你在前端开发中实现城市与地区选择器有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056d1381e8991b448e6d52

npm 包 metropolitan 使用教程