update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-region",
   "description": "A simple region selector, provide Chinese administrative division data",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "author": "TerryZ <[email protected]>",
   "license": "MIT",
   "main": "dist/v-region.js",

src/Column.vue

@@ -0,0 +1,107 @@
+<template>
+    <ul v-if="list.length" class="rg-column">
+        <li v-for="col in list"
+            :class="{ selected: picked && col.key === picked.key }"
+            @click="click(col)">
+            <span v-text="col.value"></span>
+            <span class="rg-iconfont icon-right rg-caret-right" v-if="haveChild"></span>
+            <!--<span class="rg-caret-right" v-if="haveChild"></span>-->
+        </li>
+    </ul>
+</template>
+
+<script>
+    export default {
+        props: {
+            list:{
+                type: Array,
+                required: true
+            },
+            haveChild:{
+                type: Boolean,
+                default: true
+            },
+            value: Object
+        },
+        data(){
+            return {
+                picked: this.value
+            };
+        },
+        watch:{
+            value(val){
+                this.picked = val;
+            }
+        },
+        methods: {
+            click(col){
+                //console.dir(col)
+                this.picked = col;
+                this.$emit('input', col);
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+.rg-column{
+    padding: 5px 0;
+    margin: 0;
+    list-style:none;
+
+    height: 300px;
+    display: inline-block;
+    vertical-align: top;
+    overflow-y: auto;
+    box-sizing: border-box;
+    min-width: 160px;
+    font-size: 0;
+    float: left;
+
+    li{
+        /*list-style: none;*/
+        /*list-style-type: none;*/
+        font-size: 14px;
+        padding: 5px 30px 5px 10px;
+        color: #777;
+        position: relative;
+        box-sizing: border-box;
+        outline: none;
+        list-style:none;
+        overflow: hidden;
+
+        &:hover{
+            background-color: #F5F5F5;
+            color: black;
+            cursor: pointer;
+        }
+        &.selected{
+            background-color: #55A2E6;
+            color: white;
+        }
+    }
+}
+.rg-caret-right {
+    position: absolute;
+    top: 6px;
+    right: 5px;
+    font-size: 12px;
+}
+/*.rg-caret-right {*/
+    /*display: inline-block;*/
+    /*width: 0;*/
+    /*height: 0;*/
+    /*margin-left: 5px;*/
+    /*border-top: 4px solid transparent;*/
+    /*border-left: 4px solid;*/
+    /*border-bottom: 4px solid transparent;*/
+    /*!*float: right;*!*/
+    /*!*margin-top: 3px;*!*/
+    /*vertical-align: middle;*/
+    /*content: "";*/
+
+    /*position: absolute;*/
+    /*top: 11px;*/
+    /*right: 7px;*/
+/*}*/
+</style>

src/ColumnGroup.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <!-- selector mode -->
+        <div class="rg-caller-container" @click.stop.prevent="open" ref="caller">
+            <slot>
+                <!-- default region selector caller button -->
+                <button type="button" :class="['rg-default-btn', {'rg-opened': show}]">
+                    {{selectedText?selectedText:lang.pleaseSelect}}
+                    <span class="rg-iconfont icon-clear rg-clear-btn" :title="lang.clear" v-if="selectedText" @click.stop="clear"></span>
+                    <span class="rg-caret-down" v-else></span>
+                </button>
+            </slot>
+        </div>
+        <v-drop-down ref="drop" @show-change="showChange">
+            <div class="rg-column-container">
+                <v-column @click.native="operLevel=con.PROVINCE_LEVEL"
+                          :list="listProvince" :have-child="city" v-model="dProvince"></v-column>
+                <v-column @click.native="operLevel=con.CITY_LEVEL"
+                          :list="listCity" :have-child="area" v-model="dCity"></v-column>
+                <v-column @click.native="operLevel=con.AREA_LEVEL"
+                          :list="listArea" :have-child="town && haveTown" v-model="dArea"></v-column>
+                <v-column @click.native="operLevel=con.TOWN_LEVEL"
+                          :list="listTown" :have-child="false" v-model="dTown"></v-column>
+            </div>
+        </v-drop-down>
+    </div>
+</template>
+
+<script>
+    import dropDown from 'v-dropdown';
+    import mixins from './mixins';
+    import selector from './mixins/selector';
+    import * as constants from './constants';
+    import column from './Column';
+
+    const {PROVINCE_LEVEL, CITY_LEVEL, AREA_LEVEL, TOWN_LEVEL} = constants;
+
+    export default {
+        name: "ColumnGroup",
+        mixins: [mixins, selector],
+        inheritAttrs: false,
+        components: {
+            'v-drop-down': dropDown,
+            'v-column': column
+        },
+        data(){
+            return {
+                operLevel: -1,
+                con : constants
+            }
+        },
+        methods: {
+            open(){
+                this.$refs.drop.$emit('show', true, this.$refs.caller);
+            },
+            provinceChange(newVal, oldVal){
+                this.baseProvinceChange(newVal, oldVal);
+                this.checkLevel(PROVINCE_LEVEL);
+            },
+            cityChange(newVal, oldVal){
+                this.baseCityChange(newVal, oldVal);
+                this.checkLevel(CITY_LEVEL);
+            },
+            areaChange(newVal, oldVal){
+                this.baseAreaChange(newVal, oldVal);
+                this.checkLevel(AREA_LEVEL);
+            },
+            townChange(newVal, oldVal){
+                this.baseTownChange(newVal, oldVal);
+                this.checkLevel(TOWN_LEVEL);
+            },
+            checkLevel(level){
+                if(this.operLevel === -1 || this.operLevel !== level) return;
+                let close = false;
+                switch(this.operLevel){
+                    case PROVINCE_LEVEL:
+                        if(!this.city) close = true;
+                        break;
+                    case CITY_LEVEL:
+                        if(!this.area) close = true;
+                        break;
+                    case AREA_LEVEL:
+                        if(!this.town || (this.town && !this.haveTown)) close = true;
+                        break;
+                    case TOWN_LEVEL:
+                        close = true;
+                        break;
+                }
+                if(close) {
+                    this.operLevel = -1;
+                    this.close();
+                }
+            },
+            clear(){
+                this.dProvince = null;
+            }
+        }
+    }
+</script>