Merge branch 'v2'

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 2.0.9
+
+`2019-3-29`
+
+* :sparkles: feat: 新增局部滚动组件`Scroller`
+* :sparkles: feat: 新增无限加载组件`InfiniteLoading`
+* :sparkles: upd: 吐司组件`Toast`支持配置遮罩层，loading类型默认开启
+* :sparkles: upd: `flex`组件允许动态改变nut-col的:span的值 
+* :bug: fix: 修复`RadioGroup`组件按需加载css报错的问题（感谢@451761830反馈）
+* :bug: fix: 修复引用scss报错的问题
+* :bug: fix: 修复`Imagepicker`组件multiple属性逻辑错误问题（感谢@liuyanqing反馈）
+* :zap: doc: 文档内容完善
+
 ## 2.0.8
 
 `2019-3-19`

README-zh_CN.md

@@ -46,7 +46,7 @@
 
 https://nutui.jd.com
 
-文档：[2.X](https://nutui.jd.com/default.html#/start) | [1.X](https://nutui.jd.com/1x/index.html#/intro)
+文档：[2.x](https://nutui.jd.com/default.html#/start) | [1.x](https://nutui.jd.com/1x/index.html#/intro)
 
 ## 链接
 * [意见反馈](https://github.com/jdf2e/nutui/issues)

docs/start.md

@@ -93,6 +93,13 @@ NutUI.install(Vue);
 
 > 注意：这种方式将会导入所有组件
 
+> 服务端渲染请引入NutUI的 **commonjs** 版本 **nutui.common.js**
+
+```javascript
+//服务端渲染使用NutUI的commonjs版本
+import NutUI from '@nutui/nutui/dist/nutui.common.js';
+```
+
 ## 按需加载
 
 以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。

docs/theme.md

@@ -57,7 +57,7 @@ $dark-color: #DADADA;
 
 ```javascript
 import NutUI from '@nutui/nutui';
-import '@nutui/nutui/nutui.scss';
+import '@nutui/nutui/dist/nutui.scss';
 ```
 
 2.未使用插件，手动按需引用组件时，需手动引入组件对应的 SCSS 文件。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -22,7 +22,7 @@
     "build:site": "npm run build:demo && npm run build:doc",
     "build:prod": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.conf.js && node scripts/createIndexScss.js",
     "build:prodmin": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.mini.conf.js",
-    "build:disp": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.disperse.conf.js",
+    "build:disp": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.disperse.conf.js",
     "build:cmn": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.cmn.conf.js",
     "build": "npm run build:prod && npm run build:prodmin && npm run build:cmn && npm run build:disp",
     "eslint": "eslint src/packages/**/*.{js,vue}",
@@ -80,7 +80,7 @@
     "copy": "0.3.2",
     "copy-webpack-plugin": "4.5.4",
     "coveralls": "^3.0.2",
-    "cross-env": "5.2.0",
+    "cross-env": "^5.2.0",
     "css-loader": "1.0.0",
     "eslint": "4.19.1",
     "eslint-loader": "2.1.1",
@@ -107,6 +107,7 @@
     "node-filelist": "^1.0.0",
     "node-notifier": "5.2.1",
     "node-sass": "4.9.3",
+    "npm-run-all": "^4.1.5",
     "nyc": "10.0.0",
     "offline-plugin": "^5.0.6",
     "optimize-css-assets-webpack-plugin": "5.0.0",

sites/demo/view/index.vue

@@ -22,7 +22,7 @@
         </template>
       </ul>
     </div>
-    <div id="demo-footer">京东用户体验设计部（JDC） · 前端开发部</div>
+    <div id="demo-footer" @click="showCode">京东用户体验设计部（JDC） · 前端开发部</div>
   </div>
 </template>
 
@@ -41,6 +41,16 @@ export default {
     };
   },
   methods: {
+    showCode(){
+        this.$dialog({
+          type:"image",
+          link:"",
+          imgSrc:"https://img14.360buyimg.com/imagetools/s350x350_jfs/t1/23439/7/11643/155926/5c90d554E7f03c831/bd45cd0ee2daa2fa.jpg.dpg",
+          onClickImageLink(){
+            return false;  //返回false可阻止默认的链接跳转行为
+          }
+        });
+    },
     toggleFold(idx) {
       this.foldStatus.splice(idx, 1, !this.foldStatus[idx]);
       sessionStorage.setItem("foldStatus", JSON.stringify(this.foldStatus));

sites/doc/asset/css/common.scss

@@ -136,7 +136,7 @@ pre {
     position: relative;
     max-width: 100%;
     overflow: auto;
-    margin .code-wrapper {
+    .code-wrapper {
         width: 100%;
         overflow: auto;
     }

sites/doc/asset/js/bookmark.js

@@ -10,7 +10,6 @@ import root from '../root.js';
                 let id  = res.target.id;
                 let index =id.replace(/head/,'');                
                 let li = document.querySelector('.level'+index);
-                console.log(li,index)
                 if(li){
 
                 }

sites/doc/compents/hidden/hidden.vue

@@ -9,20 +9,19 @@
         :class="{
             show:isShow,
             hide:isHide
-        }" 
-        :style="siteHeight" 
-        style="transition: all .2s;">
+        }"         
+        >
         <slot></slot>        
     </div>
     <div :title="titleMsg" v-if="heightSlot>400" class="bar" @click="showall">
             <svg  width="20" viewBox="0,0 20,10">
                 <path v-if="isShow" d="M 0,5 
                             L10,10 
-                            L 20,5" fill="#fff" stroke="#999">                    
+                            L 20,5" fill="none" stroke="#000">                    
                 </path>
                 <path v-if="!isShow" d="M 0,5 
                             L10,0 
-                            L 20,5" fill="#fff" stroke="#999">                    
+                            L 20,5" fill="none" stroke="#000">                    
                 </path>
             </svg>
         </div>
@@ -70,6 +69,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.eidt-box{
+    transition: all .5s;
+}
 .swap{
     position: relative;
    
@@ -82,9 +84,11 @@ export default {
 .show{   
     overflow:hidden;
     position: relative;
+     max-height: 400px;
 }
 .hide{    
     position: relative;
+    max-height: 2000px;
 }
 .bar{
     height: 30px;

sites/doc/info.vue

@@ -228,6 +228,7 @@ dd {
     }
   }
   .l-c-i {
+    cursor: pointer;
     position: relative;
     span {
       padding: 0 0 0 35px;

src/config.json

@@ -397,8 +397,9 @@
       "chnName": "滚动",
       "desc": "滚动组件",
       "type": "component",
-      "sort": "1",
-      "showDemo": false,
+      "sort": "0",
+      "star": 5,
+      "showDemo": true,
       "author": "iris"
     },
     {
@@ -420,6 +421,17 @@
       "sort": "0",
       "showDemo": true,
       "author": "famanoder"
+    },
+    {
+      "version": "1.0.0",
+      "name": "InfiniteLoading",
+      "chnName": "无限加载",
+      "desc": "无限加载",
+      "type": "component",
+      "sort": "0",
+      "star": 4,
+      "showDemo": true,
+      "author": "iris"
     }
   ]
 }

src/packages/col/col.scss

@@ -12,27 +12,13 @@
 	float: left;
 	box-sizing: border-box;
 }
-.nut-col-12{
-	width: 50%;
-}
-.nut-col-8{
-	width: 33.33333%;
-}
-.nut-col-6{
-	width: 25%;
-}
-.nut-col-4{
-	width: 16.66667%;
-}
-.nut-col-offset-12{
-	margin-left: 50%;
-}
-.nut-col-offset-8{
-	margin-left: 33.33333%;
-}
-.nut-col-offset-6{
-	margin-left: 25%;
-}
-.nut-col-offset-4{
-	margin-left: 16.66667%;
+
+@for $i from 1 through 24 {
+    .nut-col-offset-#{$i} {
+        margin-left: 100/24*$i*1%;
+    }
+
+	.nut-col-#{$i}{
+		width: 100/24*$i*1%;
+	}
 }

src/packages/col/col.vue

@@ -18,18 +18,31 @@ export default {
     },
     data() {
         return {
-            classObject:{
-                'nut-col-12':this.span == '12',
-                'nut-col-8':this.span == '8',
-                'nut-col-6':this.span == '6',
-                'nut-col-4':this.span == '4',
-                'nut-col-offset-12':this.offset == '12',
-                'nut-col-offset-8':this.offset == '8',
-                'nut-col-offset-6':this.offset == '6',
-                'nut-col-offset-4':this.offset == '4'
-            }
+            classObject:{}
         };
     },
+    watch:{
+        span:{
+          handler(val){
+            if(val){
+                this.classObject = Object.assign(this.classObject,{
+                    ['nut-col-'+val]:this.span == val,
+                })
+            }
+          },
+          immediate: true
+        },
+        offset:{
+          handler(val){
+            if(val){
+                this.classObject = Object.assign(this.classObject,{
+                    ['nut-col-offset-'+val]:this.offset == val,
+                })
+            }
+          },
+          immediate: true
+        }
+    },
     methods: {
     }
 }

src/packages/dialog/dialog.scss

@@ -168,6 +168,7 @@ body.dialog-open {
     background: $btn-gradient-bg;
     background-origin: border-box;
     color: $btn-gradient-color;
+    margin-right:-1px;
     &:active {
         background: $btn-gradient-active-bg;
     }

src/packages/flex/demo.vue

@@ -35,8 +35,8 @@
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
         </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">span:6</div>
+        <nut-col :span="myValue">
+          <div class="flex-content flex-content-light">span:{{myValue}}</div>
         </nut-col>
       </nut-row>
     </div>
@@ -304,6 +304,16 @@
 
 <script>
 export default {
+  data() {
+      return {
+          myValue:4
+      };
+  },
+  methods:{
+    text(){
+      this.myValue++;
+    }
+  }
 };
 </script>
 

src/packages/imagepicker/imagepicker.vue

@@ -16,7 +16,7 @@
             </transition-group>
             <div class="add-icon" :style="{'width':width + 'px','height':height + 'px'}" v-show="this.list.length < this.max">
                 <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill-rule="evenodd"><rect y="6" width="16" height="4" rx="2"></rect><rect transform="rotate(90 8 8)" y="6" width="16" height="4" rx="2"></rect></g></svg></i>
-                <input type="file" name="files" :multiple="!ismultiple ? 'multiple' : ''" :accept="accept"  @change="addImg" />
+                <input type="file" name="files" :multiple="ismultiple ? 'multiple' : ''" :accept="accept"  @change="addImg" />
             </div>
         </div>
     </div>