npm 包 distpicker 使用教程

在前端开发中，地区选择是一个常见的需求。本文介绍一款 npm 包 distpicker，它可以帮助我们快速构建一个省市区三级联动的地区选择器。

安装和使用

首先，在项目目录下使用 npm 安装 distpicker：

npm install distpicker --save

然后，在需要使用地区选择器的页面或组件中，引入 distpicker：

import Distpicker from 'distpicker';

接下来，在页面或组件的 HTML 中添加对应的 DOM 结构：

<div data-toggle="distpicker">
  <select data-province></select>
  <select data-city></select>
  <select data-district></select>
</div>

最后，使用如下代码初始化 distpicker：

const distpicker = new Distpicker('[data-toggle="distpicker"]');

这样就完成了一个简单的地区选择器的构建。

配置选项

distpicker 提供了一些配置选项，可以用于定制地区选择器的行为。

省市区数据源

默认情况下，distpicker 使用内置的省市区数据源。如果需要使用自定义数据源，可以通过 options 参数传递进去：

const options = {
  province: 'provinceData',
  city: 'cityData',
  district: 'districtData'
};
const distpicker = new Distpicker('[data-toggle="distpicker"]', options);

其中，provinceData、cityData、districtData 分别是包含省市区数据的 JavaScript 对象。例如：

const provinceData = [
  { value: '110000', text: '北京市' },
  { value: '120000', text: '天津市' },
  // ...
];

默认值

可以通过 defaultValue 选项设置地区选择器的默认值：

const defaultValue = {
  province: '广东省',
  city: '深圳市',
  district: '南山区'
};
const distpicker = new Distpicker('[data-toggle="distpicker"]', { defaultValue });

自定义标签属性名

如果页面中已经有了一些不同于 data-province、data-city、data-district 的标签，可以通过 provinceName、cityName、districtName 选项来指定它们的属性名：

<div data-toggle="distpicker">
  <select data-province></select>
  <select data-city></select>
  <select data-area></select>
</div>

const options = {
  provinceName: 'provice',
  cityName: 'city',
  districtName: 'area'
};
const distpicker = new Distpicker('[data-toggle="distpicker"]', options);

语言

distpicker 提供了多语言支持。可以通过 lang 参数来指定语言：

const distpicker = new Distpicker('[data-toggle="distpicker"]', { lang: 'en' });

目前支持的语言包括：中文简体（zh-CN）、中文繁体（zh-TW）、英语（en）。

事件

distpicker 提供了多个事件，可以用于处理地区选择器的各种状态。

change 事件

当省、市、区其中一个下拉框的值改变时，会触发 change 事件。可以通过以下代码监听该事件：

distpicker.on('change', function (picker) {
  console.log(picker.getProvince(), picker.getCity(), picker.getDistrict());
});

province.change 事件和 city.change 事件

当省下拉框或市下拉框的值改变时，会依次触发 province.change 和 city.change 事件。可以通过以下代码分别监听这两个事件：

distpicker.on('province.change', function (picker) {
  console.log(picker.getProvince());
});

distpicker.on('city.change', function (picker) {
  console.log(picker.getCity());
});

示例代码

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

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35454) ，转载请注明来源
[https://www.javascriptcn.com/post/35454](https://www.javascriptcn.com/post/35454)