feat: Scroller组件新增滚动到指定位置

CHANGELOG.md

@@ -1,3 +1,19 @@
+## 2.1.9
+
+`2020-01-09`
+
+* :sparkles: feat(CheckboxGroup)：增加全选、反选功能 @richard1015
+* :sparkles: feat(uploader)：上传组件支持withCredentials参数 #190 @richard1015
+* :sparkles: feat：新增popup组件 @yangkaixuan
+* :sparkles: feat：新增Elevator电梯楼层组件 @zhenyulei
+* :sparkles: feat：新增textbox文本域组件 @guoxiao158
+* :bug: fix(calendar)：修复日历组件 当某个月的1号是周日时，月份下方会空出来一行 @irisSong
+* :bug: fix(menu)：修复组件多实例bug #182 @Ymm0008
+* :bug: fix(col)：修复组件中文字超出时样式问题 @richard1015
+* :bug: fix(imagepicker)：imgList双向绑定问题 #187 @richard1015
+* :bug: fix(toast)：修复toast多实例关闭事件冲突 #181 @guoxiao158
+* :zap: doc：修改（picker自定义数据demo；cdn按需加载；VueCLI3按需加载）； @richard1015
+
 ## 2.1.8
 
 `2019-12-11`

docs/start.md

@@ -225,7 +225,26 @@ Button.install(Vue);
 <nut-switch :active="true" size="base"></nut-switch>
 ```
 
-2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 webpack 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、postcss 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等
+2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 [webpack](https://www.webpackjs.com/) 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、[postcss](https://github.com/postcss/postcss) 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件等
+
+VueCLI3 配置示例 `vue.config.js`
+``` javascript
+const pxtorem = require('postcss-pxtorem');
+module.exports = {
+    css: {
+        loaderOptions: {
+          postcss: {
+            plugins: [
+              pxtorem({
+                rootValue: 37.5,
+                propList: ['*']
+              })
+            ]
+          }
+        }
+      }
+}
+```
 
 3.组件具体用法以文档为准
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/config.json

@@ -486,7 +486,7 @@
     {
       "version": "1.0.0",
       "name": "Elevator",
-      "chnName": "电梯楼层组件",
+      "chnName": "电梯楼层",
       "desc": "类似于电梯楼层，组件可以跟着右侧索引而滑动",
       "type": "component",
       "sort": "3",

src/packages/dialog/_dialog.js

@@ -24,6 +24,19 @@ let Dialog = function (options) {
         document.body.appendChild(inst.$el);
     }
 
+    setTimeout(() => {
+        //  设置z-index保证最新的弹窗再最上面
+        let dialogThis = document.querySelector('#'+options.id);
+        var nutDialogWrapper = document.getElementsByClassName('nut-dialog-wrapper');
+        var zIndexNum = 100 + (10 * (nutDialogWrapper.length));
+        dialogThis.style.zIndex = zIndexNum;
+        setTimeout(function() {
+            for(var i = 0;i < nutDialogWrapper.length;i++) {
+                nutDialogWrapper[i].style.zIndex = zIndexNum - 1 - i;
+            }
+        }, 0);
+    }, 10);
+
     Vue.nextTick(() => {
         inst.visible = true;
     });

src/packages/elevator/demo.vue

@@ -3,7 +3,7 @@
         <nut-elevator 
         :dataArray="dataList"  
         :showIndicator="true"
-        :navHeight="40"
+        :navHeight="30"
         :otherHeight="60"
         :initIndex="0" 
         :hiddenTime='500'

src/packages/elevator/elevator.scss

@@ -10,30 +10,53 @@
 .nut-list-title{
     list-style-type:none;
     width:100%;
-    margin-bottom:20px;
+    //margin-bottom:20px;
 }
 .nut-list-h{
+    font-weight: normal;
     height: 30px;
     line-height: 30px;
     padding-left: 20px;
-    background: #eee;
+    background: #f6f6f6;
     margin: 0px;
+    font-size: 14px;
+    color: #323233;
 }
 .nut-people-list{
     padding: 0px;
     padding-left: 20px;
 }
 .nut-list-name{
+    font-size: 14px;
+    color: #323233;
     list-style-type:none;
-    height: 40px;
-    line-height: 40px;
-    border-bottom: 1px solid #ccc;
+    height: 44px;
+    line-height: 44px;
+    position: relative;
+    &:after{
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 16px;
+        border-bottom: 1px solid #ebedf0;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+    }
+    &:last-child{
+        &:after{
+            border-bottom: 0px;
+        }
+    }
 }
 .nut-elevator-nav{
-    background: #fff;
+    //background: #fff;
     text-align: center;
-    border:1px solid #ccc;
+    //border:1px solid #ccc;
     width: 50px;
+    font-size: 12px;
     position:fixed;
     top:50%;
     right: 0px;
@@ -45,6 +68,9 @@
         height: 40px;
         line-height: 40px;
     }
+    .nut-nav-curr{
+        color:rgb(7, 193, 96);
+    }
 }
 .nut-big-box{
     width: 26px;

src/packages/elevator/elevator.vue

@@ -28,6 +28,7 @@
             v-bind:key="index" 
             :id="'nav'+index"
             class="nut-nav-list" 
+            :class="{'nut-nav-curr':item.title==currTitle}"
             :style="{height:navListHeight+'px'}"
             @click="clickNav(item.title,index)"
             >{{item.title}}</li>

src/packages/menu/demo.vue

@@ -11,7 +11,6 @@
       @close="switchMenu('isVisible1',1)"
       @choose="chooseMenu"
     ></nut-menu>
-
     <h4>多选style1(一、二、三)列</h4>
     <div class="list list2">
       <span slot="title" @click="switchMenu('isVisible2',2)" ref="title2">京东物流</span>
@@ -362,11 +361,11 @@ export default {
       }
       this.visible[`${param}`] = !this.visible[`${param}`];
     },
-    chooseMenu(item, index) {
-      this.switchMenu("isVisible1", 1);
-      this.list1.map((value, key) => (value.selected = false));
-      this.$set(this.list1[index], "selected", true);
-      this.$refs.title1.innerText = item.text;
+    chooseMenu(item, index, list) {
+      this.switchMenu("isVisible" + this.titlenum, 1);
+      this['list'+this.titlenum].map((value, key) => (value.selected = false));
+      this.$set(this['list'+this.titlenum][index], "selected", true);
+      this.$refs[`title${this.titlenum}`].innerText = item.text;
     },
 
     reset(list) {

src/packages/menu/menu.vue

@@ -62,6 +62,23 @@ import Button from '../button/button.vue';
 import ButtonGroup from '../buttongroup/buttongroup.vue';
 import Icon from '../icon/icon.vue';
 import locale from "../../mixins/locale";
+const lockMaskScroll = (bodyCls => {
+  let scrollTop;
+  return {
+    afterOpen: function() {
+      scrollTop =
+        document.scrollingElement.scrollTop || document.body.scrollTop;
+      document.body.classList.add(bodyCls);
+      document.body.style.top = -scrollTop + "px";
+    },
+    beforeClose: function() {
+      if (document.body.classList.contains(bodyCls)) {
+        document.body.classList.remove(bodyCls);
+        document.scrollingElement.scrollTop = scrollTop;
+      }
+    }
+  };
+})("dialog-open");
 export default {
     name:'nut-menu',
     mixins: [locale],
@@ -110,7 +127,9 @@ export default {
         }
     },
     watch: {
-
+        isVisible(val) {
+            lockMaskScroll[val ? "afterOpen" : "beforeClose"]();
+        }
     },
     data() {
         return {