在前端开发中，地区选择是一个常见的需求。本文介绍一款 npm 包 distpicker，它可以帮助我们快速构建一个省市区三级联动的地区选择器。
安装和使用
首先，在项目目录下使用 npm 安装 distpicker：
--- ------- ---------- ------
然后，在需要使用地区选择器的页面或组件中，引入 distpicker：
------ ---------- ---- -------------
接下来，在页面或组件的 HTML 中添加对应的 DOM 结构：
---- ------------------------- ------- ----------------------- ------- ------------------- ------- ----------------------- ------
最后，使用如下代码初始化 distpicker：
----- ---------- - --- -----------------------------------------
这样就完成了一个简单的地区选择器的构建。
配置选项
distpicker 提供了一些配置选项，可以用于定制地区选择器的行为。
省市区数据源
默认情况下，distpicker 使用内置的省市区数据源。如果需要使用自定义数据源，可以通过 options 参数传递进去：
----- ------- - - --------- --------------- ----- ----------- --------- -------------- -- ----- ---------- - --- ---------------------------------------- ---------
其中，provinceData、cityData、districtData 分别是包含省市区数据的 JavaScript 对象。例如：
----- ------------ - - - ------ --------- ----- ----- -- - ------ --------- ----- ----- -- -- --- --
默认值
可以通过 defaultValue 选项设置地区选择器的默认值：
----- ------------ - - --------- ------ ----- ------ --------- ----- -- ----- ---------- - --- ---------------------------------------- - ------------ ---
自定义标签属性名
如果页面中已经有了一些不同于 data-province、data-city、data-district 的标签，可以通过 provinceName、cityName、districtName 选项来指定它们的属性名：
---- ------------------------- ------- ----------------------- ------- ------------------- ------- ------------------- ------
----- ------- - - ------------- ---------- --------- ------- ------------- ------ -- ----- ---------- - --- ---------------------------------------- ---------
语言
distpicker 提供了多语言支持。可以通过 lang 参数来指定语言：
----- ---------- - --- ---------------------------------------- - ----- ---- ---
目前支持的语言包括：中文简体（zh-CN）、中文繁体（zh-TW）、英语（en）。
事件
distpicker 提供了多个事件，可以用于处理地区选择器的各种状态。
change 事件
当省、市、区其中一个下拉框的值改变时，会触发 change 事件。可以通过以下代码监听该事件：
----------------------- -------- -------- - --------------------------------- ----------------- ---------------------- ---
province.change 事件和 city.change 事件
当省下拉框或市下拉框的值改变时，会依次触发 province.change 和 city.change 事件。可以通过以下代码分别监听这两个事件：
-------------------------------- -------- -------- - ---------------------------------- --- ---------------------------- -------- -------- - ------------------------------ ---
示例代码
以下是一个完整的示例代码：
----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------