@eightfeet/addresspicker NPM

AddressPicker

地址选择器 AddressPicker extends MobileSelect demo

parame

参数	说明	是否必填	备注	类型
id	所创建AddressPicker的id	否	不传可自动生成id（AddressPicker + 时间戳 + 100以内的随机数）	String
trigger	触发显示地址选择器的trigger Node	是	建议使用id，如{ trigger: "#trigger"}	String
triggerDisplayData	是否在trigger Node中显示所选值	否	默认false(MobileSelect中默认true)	Boolean
title	设置标题，不填隐藏	否	默认不填	String
defaultValue	默认选择的地址	否	数组，省市区id组成'15', '1513', '151315'	Array
onConfirm	确认	否	确定后的回调，返回两个参数值，1、indexArr（选中值在wheels上的位置）, 2、data (所选省市区的value值)。	Function
onCancel	取消	否	取消后的回调，返回两个参数值，1、indexArr（上次选中值在wheels上的位置）, 2、data (上次所选省市区的value值)。	Function
popularCities	显示热门城市	否	默认不填隐藏数据结构[ { name: '北京', id: '12', '1210' }, { name: '上海', id: '34', '3410' },...]	Array
style	样式定义	否	定义AddressPicker样式 { overlay: 覆盖层, confirmBtn: 确定按钮, cancelBtn: 取消按钮， popularCities: 热门城市 popularCitiesTitle: 热门城市标题 popularCitiesItem: 热门城市项}	css

options

showPicker：f(data) 显示AddressPicker
data: Array 省市区id
如 '10','1010','101010'
upDatePicker: f(data, callback) 显示
data: Array 省市区id
如 '10','1010','101010'
callback: f() 更新选择地址后的回调

case

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();
		})
	};