省-市-区三级联动城市地区选择器

效果

演示地址：licong96.github.io/work/lc-cit…

无依赖

纯js手写，不依赖任何插件

安装

npm安装或者cnpm：

    npm install lc-city-selector --save
复制代码

yarn安装：

    yarn add lc-city-selector
复制代码

使用

    import LcCity from 'lc-city-selector';

    var City = new LcCity();    // 创建实例化对象
    City.show();    // 执行show方法
复制代码

confirm

回调函数，可以在里面拿到选中的地区

    import LcCity from 'lc-city-selector';
    var City = new LcCity({
        confirm: function (data) {
            console.log(data);  // data就是选中的地区，一个拼接好的字符串
        }
    });
    
    ----------
    如果你不想用回调的方式
    可以用`City.getSelect()`方法直接获取当前选中的地区
复制代码

数据回填

如果你已经有了数据，想要回填进去，可以加一个data参数，但是要注意它的格式

    import LcCity from 'lc-city-selector';
    var City = new LcCity({
        data: {
            province: '江西省',
            city    : '南昌市',
            district: '青山湖区',
        }
    });
    
    注意：键要相同，值要完整，省、市、区这几个字不要省略
复制代码

参数

参数	类型	说明	默认值
data	Object	需要回填的数据	空
confirm	Function	触发确定按钮，返回选中的地区	空
cancel	Function	触发取消按钮，没有返回值	空

API

1. show()，打开选择器
2. close()，关闭选择器
3. getSelect()，获取当前选中的区域，已拼接成了一个字符串
4. getSelectObj()，获取当前选中的区域，返回的是一个对象

电脑端需要注意

虽然样式上已经做了兼容，但是选择器的位置有偏移，所以在电脑上打开需要传入一个元素，我会把元素距离屏幕的位置，赋值给选择器，让选择器和元素凑在一起

    import LcCity from 'lc-city-selector';

    var City = new LcCity();    // 创建实例化对象
    
    // 假设有一个id为input的元素，点击它来打开选择器
    
    var oInput =  document.getElementById('input');
    
    oInput.addEventListener('click', function() {
      City.show(this);  // 这里的this指向的是oInput
    });
复制代码

---

GitHub地址： github.com/licong96/lc…

转载于:https://juejin.im/post/5b0d34ba518825158c046d41