标签:LcCity city lc City selector 联动 选择器 三级
本文转载于:猿2048网站➝https://www.mk2048.com/blog/blog.php?id=i0kcb1ij2j
效果
演示地址:https://licong96.github.io/work/lc-city-selector/index.html
无依赖
纯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
show()
,打开选择器close()
,关闭选择器getSelect()
,获取当前选中的区域,已拼接成了一个字符串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地址: https://github.com/licong96/lc-city-selector
标签:LcCity,city,lc,City,selector,联动,选择器,三级 来源: https://www.cnblogs.com/qianduanwriter/p/11788413.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。