eightfeet / addresspick Goto Github PK

import AddressPicker from './modules/AddressPicker';

// 省市区数据源
const regions = [
  {
    "id": "10",
    "value": "安徽",
    "childs": [
      {
        "id": "1010",
        "value": "安庆",
        "childs": [
          {
            "id": "101010",
            "value": "迎江区"
          },
          {
            "id": "101011",
            "value": "大观区"
          },
          {
            "id": "101012",
			"value": ...
		  }
		]
	  }
	]
  }
  ...
]

// 热门城市
const popularCities = [
    {name: '北京', id: ['12', '1210']},
    {name: '上海', id: ['34', '3410']},
    {name: '广州', id: ['15', '1513']},
    {name: '深圳', id: ['15', '1524']},
    {name: '杭州', id: ['43', '4311']},
    {name: '南京', id: ['26', '2613']},
    {name: '天津', id: ['37', '3710']},
    {name: '苏州', id: ['26', '2616']},
    {name: '长沙', id: ['24', '2411']},
    {name: '重庆', id: ['13', '1310']},
    {name: '成都', id: ['32', '3212']}
];

const newPicker = new AddressPicker({
    id: '555666',
    trigger: '#example', // 触发Dom
    title: '请选择省市区', // 设置标题
    // defaultValue: ['15', '1513', '151315'], // 默认选择的地址
    triggerDisplayData: true, // 是否在"触发Dom"中显示已选数据 默认false
    regions: regions, // 原始数据
    popularCities: popularCities,
    //确定后的回调，返回两个参数值，indexArr, data (分别代表当前选中wheels的位置和值)。
    onConfirm: function(indexArr, data){
        console.log('callback', indexArr, data);
    },
    // 取消后的回调
    onCancel: function(indexArr, data){
        console.log('取消', indexArr, data);
    },
    // 控制样式
    style: {
        // 确定按钮
        confirmBtn: {
            backgroundColor: '#7fb581',
            color: '#fff',
            padding: '5px 10px',
            borderRadius: '5px'
        },
        // 取消按钮
        cancelBtn: {
            backgroundColor: '#eee',
            padding: '5px 10px',
            borderRadius: '5px'
        },
        // 半透明覆盖层
        overlay: {
        },
        // 热门城市
        popularCities: {
            backgroundColor: '#efefef',
        },
        popularCitiesTitle: {
        },
        popularCitiesItem: {
        }
    }
});

document.getElementById('exampleshow').onclick = function(){
		// 更新省市区位置 arguments:([省id, 市id, 区id], callback)
		window.newPicker.upDatePicker(['19', '1922', '192215'], () => {
			// 显示AddressPicker
			window.newPicker.showPicker();
		})
	};