Score
0
Watch 12 Star 55 Fork 9

Dreamer365 / iPickerJavaScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
轻量级的地区选择组件 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

iPicker

地区选择组件  |  查看在线示例

iPicker 是一个轻量级的地区选择组件,可以简单快速的对 “省市区” 进行选择
专门针对桌面端的现代高级浏览器,提供了两种版本供开发者根据项目需求自由选择

jQuery 插件版  |  Vue 组件版

数据来源 area-data

jQuery 插件版

引入文件

<!-- 要求 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 );
    }
});

jQuery 插件版提供的方法

$( elem ).iPicker( {} );           // 设置组件
$( elem ).iPicker( "clear" );      // 清空选择的结果
$( elem ).iPicker( "reset" );      // 重置组件
$( elem ).iPicker( "destroy" );    // 销毁组件
$( elem ).iPicker( "enabled" );    // 启用设置了 disabled 的选择框
$( elem ).iPicker();               // 获取选中结果

Vue 组件版

安装

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>

API 参数

参数 说明 类型 默认值
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 空函数

开源协议

MIT License


浏览器支持

Chrome Firefox Opera Edge Safari IE
60+ 60+ 60+ 17+ 12+ 11+

Comments ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/dreamer365/iPicker.git
git@gitee.com:dreamer365/iPicker.git
dreamer365
iPicker
iPicker
master

Help Search