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

src/app.js

@@ -35,9 +35,28 @@ var shareOption = {
   title: "NutUI - 基于Vue2.0的移动端开源组件库",
   desc: '一套拥有电商基因的基于Vue2.0的轻量级移动端开源组件库'
 };
+function printJoinUsInfo() {
+var joinUsHtml =  `我不知道你来自哪里？亦不知道你将去何方？
+但当你打开这个页面之时，我知道，
+一定是代码的缘分将你我拉近！
 
+金鳞岂是池中物，一遇风云便化龙。
+少年！我看你骨骼惊奇，一定是敲代码的奇才！
+加入我们，加入JDC-前端开发部！你，必将改变亿万人民的生活！
 
-
+欢迎点击 http://jdc.jd.com ， 或者关注公众号“全栈探索”来了解我们，
+还犹豫什么？快将简历投至： yfzhoutao@jd.com  (请注明来自console)
+我们在这里等你哦！`
+    if (window.console && console.log && navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)) {
+        joinUsHtml = joinUsHtml.replace(/%c/g, '');
+        joinUsHtml = '%c' + joinUsHtml;
+        var weightSize = 'color: #e2231a; font-family: "Microsoft Yahei"';
+        console.log(joinUsHtml, weightSize);
+        //var normalSize = 'color: #666; font-family: "Microsoft Yahei"';
+        //console.log(joinUsHtml, normalSize, weightSize, normalSize, weightSize, normalSize, weightSize);
+    }
+}
+printJoinUsInfo();
 try {
   /*初始化分享*/
   window.share.shareInit(shareOption);

src/default.html

@@ -108,6 +108,30 @@
 
             </div>
         </div>
-
+        <script type="text/javascript">
+            
+            function printJoinUsInfo() {
+var joinUsHtml =  `我不知道你来自哪里？亦不知道你将去何方？
+但当你打开这个页面之时，我知道，
+一定是代码的缘分将你我拉近！
+
+金鳞岂是池中物，一遇风云便化龙。
+少年！我看你骨骼惊奇，一定是敲代码的奇才！
+加入我们，加入JDC-前端开发部！你，必将改变亿万人民的生活！
+
+欢迎点击 http://jdc.jd.com ， 或者关注公众号“全栈探索”来了解我们，
+还犹豫什么？快将简历投至： yfzhoutao@jd.com  (请注明来自console)
+我们在这里等你哦！`
+    if (window.console && console.log && navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)) {
+        joinUsHtml = joinUsHtml.replace(/%c/g, '');
+        joinUsHtml = '%c' + joinUsHtml;
+        var weightSize = 'color: #e2231a; font-family: "Microsoft Yahei"';
+        console.log(joinUsHtml, weightSize);
+        //var normalSize = 'color: #666; font-family: "Microsoft Yahei"';
+        //console.log(joinUsHtml, normalSize, weightSize, normalSize, weightSize, normalSize, weightSize);
+    }
+}
+printJoinUsInfo();
+        </script>
     </body>
 </html>

src/package/select/src/select.vue

@@ -147,7 +147,7 @@
             change(val) {
                 this.$emit('change', val);
             },
-            updateSelect(data) {
+            updateSelect(data, hideMask) {
                 //填充下一级
                 if(data instanceof Array && data.length >0){
                     this.swiperData(data, this.swiperCacheData.length, false);

src/package/swiper/src/swiper.vue

@@ -2,13 +2,14 @@
     <div class="nut-swiper"
         :class="[direction,{'dragging':dragging}]"
         @touchstart="_onTouchStart($event)"
-        @mousedown="_onTouchStart($event)" @touchMove.stop>
+        @mousedown="_onTouchStart($event)" >
         <div class="nut-swiper-wrap"
             :style="{
                     'transform':'translate3d('+translateX+'px,'+translateY+'px,0)',
                     'transition-duration':transitionDuration+'ms',
                     '-webkit-transform':'translate3d('+translateX+'px,'+translateY+'px,0)',
-                    '-webkit-transition-duration':transitionDuration+'ms'
+                    '-webkit-transition-duration':transitionDuration+'ms',
+                    'transition-timing-function':'ease'
                     }"
             @transitionend="_onTransitionEnd">
             <slot></slot>
@@ -232,7 +233,7 @@ export default {
             this.delta = 0;
             if(!this.freeMode){
                 this.startTranslate = this._getTranslateOfPage(this.currentPage);
-                if(this.loop){
+                if(this.isLoop){
                     this._setTranslate(this.startTranslate);
                 }
             }
@@ -250,7 +251,7 @@ export default {
             }
             this.delta = this._getTouchPos(e) - this.startPos;
             if((this.isHorizontal() && Math.abs(this.delta) > 0) || this.isVertical()){
-                e.preventDefault();
+                //e.preventDefault();
             }
             let isQuickAction = new Date().getTime() -this.startTime < 200;
             if(!this.performanceMode && !isQuickAction){
@@ -336,7 +337,7 @@ export default {
             let selectedSlide = this.$el.querySelector('.nut-swiper-silde-selected');
             selectedSlide && selectedSlide.classList.remove('nut-swiper-silde-selected');
             this.slideEls[this.currentPage-1].classList.add('nut-swiper-silde-selected');
-            if(this.loop){
+            if(this.isLoop){
                  this._setTranslate(this._getTranslateOfPage(this.currentPage));
             }
             this.stopAutoPlay = false;

src/view/cases.vue

@@ -264,8 +264,8 @@ p{
         margin-bottom:0px;
         font-weight:bold;
         background: #B1C07B;
-        height: 90px;
-        line-height: 90px;
+        height: 75px;
+        line-height: 75px;
         border-radius: 10px;
         color: #fff;
         text-align: center;
@@ -279,10 +279,10 @@ p{
             position: relative;
             &:before{
                 content: '';
-                width: 200px;
+                width: 180px;
                 position: absolute;
                 top: 3px;
-                left: -209px;
+                left: -192px;
                 height: 2px;
                 background: #fff;
             };
@@ -297,7 +297,7 @@ p{
             position: relative;
             &:after{
                 content: '';
-                width: 200px;
+                width: 180px;
                 position: absolute;
                 top: 3px;
                 left: 20px;
@@ -317,10 +317,9 @@ p{
     }
     .box-entry{
         color:#2d336a;
-        margin-bottom:10px;
         display: flex;
         align-items: center;
-        height: 80px;
+        height: 70px;
         font-size: 18px;
         .entry-icon{
            display: inline-block;
@@ -358,24 +357,29 @@ p{
     }
     .introduce-title{
         border-bottom: 1px solid #dfd9e7;
+        font-size:15px;
+    }
+    .introduce-content{
+        font-size:14px;
     }
     .box-image{
-        //background: red;
         width: 391px;
-        padding: 130px 26px 0 0;
+    padding: 108px 0px 0 19px;
+
         img{
             float: right;
             display:block;
-            box-shadow: 0px 15px 38px 1px #eee;
+            //box-shadow: 0px 15px 38px 1px #eee;
         }
         .images{
-            width:311px
+            width: 277px
         }
     }
     .box-info{
         flex: 1;
         display: flex;
-        padding-left: 50px;
+        padding-left: 90px;
+        padding-right:110px;
         align-items: center;
         .info{
             //height: 410px;
@@ -387,14 +391,17 @@ p{
         }
     }
     .phone-bg{
-        position: absolute;
-        width: 377px;
-        height: 800px;
-        background: url('../asset/img/cases/phone_ui.png') no-repeat;
-        background-size: 100% 100%;
-        left: 48px;
-        top: 10px;
+            position: absolute;
+            width: 312px;
+            height: 567px;
+            background: url('../asset/img/cases/phone_icon.png'); 
+            background-size: 100% 100%;
+            left: 114px;
+            top: 72px;
+            z-index: -1;
     }
+
+
 }
 .logos{
     padding:0px;
@@ -499,7 +506,7 @@ p{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: 50px;
+    left: 57px;
     width: 65px;
     height: 80px;
     background:rgba(0,0,0,0.1);
@@ -527,7 +534,7 @@ p{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: 0px;
+    right: 45px;
     width: 65px;
     height: 80px;
     background:rgba(0,0,0,0.1);
@@ -553,19 +560,17 @@ p{
 }
 .intro-part{
     display: none;
-    width: 315px;
-    background:rgba(0,0,0,0.5);
+    width: 275px;
+    background: rgba(0, 0, 0, 0.6);
     position: absolute;
-    bottom: 0;
+    bottom: 124px;
     left: 50%;
+    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     z-index: 101;
     padding: 15px;
     height: 176px;
-    //padding-bottom: 25px;
     box-sizing: border-box;
-    border-bottom-left-radius: 46px;
-    border-bottom-right-radius: 46px;
     h2{
         color: #fff;
         font-size: 18px;
@@ -596,24 +601,25 @@ p{
 //swiper
 
 .nut-swiper{
-    height:800px;
+    height:750px;
     border-bottom: 2px solid #eee;
-    padding-bottom: 87px;
+    //padding-bottom: 87px;
 }
 @media (max-width: 450px) {
     .box .box-info{
         display: none;
     }
     .box .phone-bg{
-        width: 325px;
-        height: 620px;
-        top: 5px;
+        width: 302px;
+        height: 561px;
+        top: 10px;
         left: 50%;
-        transform:translateX(-50%); 
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
     }
     .box .box-image .images{
-        width: 281px;
-        height: 430px;
+        width: 267px;
+        height: 454px;
     }
     .nut-swiper .nut-swiper-silde{
         display: flex;
@@ -621,12 +627,12 @@ p{
     }
     .box .box-image{
         width: 100%;
-        padding: 95px 0 0 0;
+        padding: 44px 0 0 3px;
         display: flex;
         justify-content: center;
     }
     .nut-swiper{
-        height: 580px;
+        height: 620px;
     }
     .next-btn{
         display: none;
@@ -636,6 +642,7 @@ p{
     }
     .intro-part{
         display: block;
+
     }
 }
 </style>

src/view/select.vue

@@ -63,7 +63,7 @@
             </tr>            
             <tr>
               <td>async</td>
-              <td>是否支持异步，当为true时，data配置一层即可，列拖动时会返回对应索引，可动态添加后面的子列</td>
+              <td>是否支持异步，当为true时，data配置一层即可，列拖动时会返回对应索引，可动态添加后面的子列，如果为异步时，滑动完会弹出蒙层，为阻止多次请求。更新列时，可以使用第二个参数来关闭蒙层，或者使用hideSelectMash来关闭蒙层</td>
               <td>Boolean</td>
               <td>--</td>
               <td>false</td>
@@ -103,7 +103,7 @@
           <tbody>
             <tr>
               <td>slideEnd</td>
-              <td>当异步开启时，每当滑动结束时触发，切记注意判断的时间，否则会造成死循环。</td>
+              <td>当异步开启时，每当滑动结束时触发，并且会自动弹出蒙层来阻止用户多次滑动请求多次，切记注意判断的时间，否则会造成死循环，。</td>
               <td>[数据数据],数据索引对应列（用于更新数据）</td>
             </tr>
             <tr>
@@ -129,7 +129,7 @@
             <tr>
               <td>updateSelect</td>
               <td>当异步开启时，动态添加第二列时调用</td>
-              <td>符合列表数据结构（nodeKey与childKey）</td>
+              <td>符合列表数据结构（nodeKey与childKey），第二个参数为是否在更新后关闭蒙层，主要用在最后一列渲染完后使用。</td>
             </tr>
             <tr>
               <td>showSelectMask</td>