代码拉取完成,页面将自动刷新
同步操作将从 FeCoder/iPicker 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
iPicker 是一个轻量级的地区选择组件,可以简单快速的对 “省市区” 进行选择
专门针对桌面端的现代高级浏览器,提供了两种版本供开发者根据项目需求自由选择
数据来源 area-data
<!-- 要求 jquery 1.9.0+ -->
<script src="jquery.min.js"></script>
<script src="ipicker.min.js"></script>
<div id="container"></div>
$( "#container" ).iPicker({
data: "area.json",
onSelect: function ( value, text, set ) {
console.log( value );
console.log( text );
console.log( set );
}
});
$( elem ).iPicker( {} ); // 设置组件
$( elem ).iPicker( "clear" ); // 清空选择的结果
$( elem ).iPicker( "reset" ); // 重置组件
$( elem ).iPicker( "destroy" ); // 销毁组件
$( elem ).iPicker( "enabled" ); // 启用设置了 disabled 的选择框
$( elem ).iPicker(); // 获取选中结果
npm install vue-ipicker -S
// main.js
import iPicker from "vue-ipicker";
Vue.use( iPicker );
<template>
<div id="app">
<iPicker :options="options" @onSelect="select"></iPicker>
</div>
</template>
<script>
// 假设 area.json 文件放在了 static 里
import AreaJSON from "../static/area.json";
export default {
name: "app",
data () {
return {
options: {
data: AreaJSON
}
}
},
methods: {
select ( value, text, set ) {
console.log( value );
console.log( text );
console.log( set );
}
}
}
</script>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 地区的 json 数据,可传入三种形式的数据: 1. 直接传入 json 数据 2. 传入 Promise ( 仅限 jQuery 插件版!自动执行 then 方法来得到数据 ) 3. json 文件地址( 仅限 jQuery 插件版!当传入 json 文件的地址时,程序会自动调用 $.getJSON() 请求数据 ) |
Object / String | {} |
level | 显示的层级,范围 1-3,对应:省-市-区 | Number | 3 |
defautValue | 默认选中值 | Array | [] |
disabled | 禁用指定的选择框,true 表示全部禁用,传入数组可禁用指定层级,如:[ 1,2 ] 表示禁用第 2,3 级选择框 | Boolean / Array | false |
width | 选择框宽度,单位:px | Number | 200 |
maxHeight | 下拉列表的最大高度,单位:px | Number | 300 |
placeholder | 选择框占位文字 | Array | ["省", "市", "区"] |
onSelect | 选中列表中某一项后执行的回调函数,回调参数有三个: 1. 所有选中项的 value 2. 所有选中项的 text 3. 所有选中项的 value 和 text 集合 以上参数均返回数组形式 |
Function | 空函数 |
Chrome | Firefox | Opera | Edge | Safari | IE |
---|---|---|---|---|---|
60+ | 60+ | 60+ | 17+ | 12+ | 11+ |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。