Merge branch 'dev' of https://github.com/jdf2e/nutui into dev

src/demo/choose.vue

@@ -5,6 +5,7 @@
         ></nut-demoheader>
         <br>
         <div>
+            <span>申请地区：{{locationName}}</span>
             <a href="javascript:;" class="button button-primary" @click="showChoose = true">点我出现</a>
         </div>
         <nut-choose 
@@ -27,7 +28,12 @@ export default {
       return {
         showChoose: false,
         loading: false,
-        chooseData: []
+        chooseData: [],
+        locationName:'',
+        cityId:'',
+        cityName:'',
+        provinceName:'',
+        provinceId:'',
       }
     },
     methods:{
@@ -74,18 +80,45 @@ export default {
             console.log(item);
             let self = this;
             if(level == 1) {
-                self.chooseData = [
-                    {
-                    "id": 2816,
-                    "name": "密云区"
-                    },
-                    {
-                    "id": 72,
-                    "name": "朝阳区"
-                    }
-                ];
+                self.cityId = item.id;
+                self.cityName =item.name;
+                if(item.id == 1){
+                    self.chooseData = [
+                        {
+                        "id": 2816,
+                        "name": "密云区"
+                        },
+                        {
+                        "id": 72,
+                        "name": "朝阳区"
+                        }
+                    ];
+                }else if(item.id==2){
+                    self.chooseData = [
+                        {
+                        "id": 21,
+                        "name": "浦东新区"
+                        },
+                        {
+                        "id": 22,
+                        "name": "徐汇区"
+                        },
+                        {
+                        "id": 22,
+                        "name": "长宁"
+                        }
+                    ];
+                }else{
+                    self.locationName = self.cityName+' '+self.provinceName
+                    self.closeChoose();
+                }
+
+                
             }
             if(level == 2) {
+                self.provinceId = item.id;
+                self.provinceName = item.name;
+                self.locationName = self.cityName+' '+self.provinceName
                 self.closeChoose();
             }
             //以下注释的代码为地址数据的调用方式，注释打开即可使用，访问url可联系组件开发人员
@@ -102,6 +135,9 @@ export default {
                 }
             });*/
         }
+    },
+    mounted(){
+
     }
 }
 </script>

src/package/choose/src/choose.vue

@@ -2,10 +2,10 @@
 
     <div class="nut-choose" v-show="visibile">
         <transition name="maskfade">
-            <div class="mask" @click="maskClose" v-show="visibile"></div>
+            <div class="mask" @click="maskClose" v-show="areaShow"></div>
         </transition>
         <transition name="popup">
-            <div :class="{area:true,'short-area':short}" @click.stop v-show="visibile">
+            <div :class="{area:true,'short-area':short}" @click.stop v-show="areaShow">
                 <div class="area-title">
                      <span class="area-title-txt">{{ title }}</span>
                      <a href='javascript:;' class='area-close' @click="maskClose">
@@ -96,6 +96,7 @@ export default {
                     this.resetData();
                 }
             } else {
+                this.areaShow = true;
                 if(!this.needCache) {
                     this.$emit('init-choose');
                 }
@@ -117,13 +118,14 @@ export default {
     },
     methods: {
         maskClose() {
+            this.areaShow = false;
             clearTimeout(this.timer);
             this.timer = setTimeout(()=>{
                 if(!this.needCache) {
                     this.resetData();
                 }
                 this.$emit('close-choose');
-            },400);
+            },300);
         },
         resetData() {
             this.list = [];

src/view/choose.vue

@@ -34,6 +34,13 @@
               <td>true</td>
             </tr>
             <tr>
+              <td>short</td>
+              <td>短的面板还是长的面板</td>
+              <td>Boolean</td>
+              <td>false</td>
+              <td>true</td>
+            </tr>
+            <tr>
               <td>needCache</td>
               <td>弹层打开后再关闭是否需要缓存下来数据，以备下次打开使用</td>
               <td>Boolean</td>