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

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/calendar/__test__/calendar.spec.js

@@ -6,7 +6,7 @@ import Vue from 'vue';
 describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
-            defaultValue: '2020-01-12'
+            defaultValue: '2022-01-12'
         }
     });
 
@@ -19,7 +19,7 @@ describe('Calendar.vue', () => {
 
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年01月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2021年01月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).find('.nut-calendar-month-day-active').text()).toBe('12');
         })
     });
@@ -27,7 +27,7 @@ describe('Calendar.vue', () => {
     it('选择日期', () => {
         wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day').at(10).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('8');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('6');
 
         })
     });
@@ -36,9 +36,9 @@ describe('Calendar.vue', () => {
     const wrapper = shallowMount(Calendar, {
         propsData: { 
             type: 'range',
-            defaultValue: ['2020-02-22', '2020-02-25'],
-            startDate: '2020-02-01',
-            endDate:'2020-04-11'
+            defaultValue: ['2022-02-22', '2022-02-25'],
+            startDate: '2022-02-01',
+            endDate:'2022-04-11'
         }
     });
 
@@ -55,7 +55,7 @@ describe('Calendar.vue', () => {
     });
     it('设置默认日期', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2020年02月');
+            expect(wrapper.findAll('.nut-calendar-month-title').at(0).text()).toBe('2022年02月');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('22 开始');
             expect(wrapper.findAll('.nut-calendar-month-item').at(0).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('25 结束');
         })
@@ -65,8 +65,8 @@ describe('Calendar.vue', () => {
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(14).trigger('click');
         wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day').at(16).trigger('click');
         return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('8 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('10 结束');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(0).text()).toBe('13 开始');
+            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('15 结束');
         })
     });
    

src/packages/calendar/calendar.vue

@@ -145,6 +145,10 @@ export default {
         },
 
         getDaysStatus(days, type) {
+            // 修复：当某个月的1号是周日时，月份下方会空出来一行
+            if (type == 'prev' && days >= 7) {
+                days -= 7;
+            }  
             return Array.from(Array(days), (v,k) => { 
                 return {
                     day: (k + 1),

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 {

src/packages/scroller/demo.vue

@@ -6,8 +6,9 @@
         >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大，建议在 Android 或 iOS 设备上体验。</nut-noticebar>
         <h4>横向滑动</h4>
         <p>支持惯性和吸边回弹，支持滑动到底跳转链接。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPosHor()">返回第一个</nut-button></p>
         <div class="hor-panel">
-            <nut-scroller @jump="jump()">
+            <nut-scroller @jump="jump()" @scrollToCbk="scrollToCbkHor" :scrollTo="scrollToHor">
                 <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
                     <dl class="nut-scroller-item-info">
                         <dt>防水升级版 蓝 迷你小音</dt>
@@ -26,19 +27,21 @@
                         <dd>2018-02-25</dd>
                     </dl>
                 </div>
-                <slot slot="more" ><div class="nut-hor-jump-more">查看更多</div></slot>
             </nut-scroller>
         </div>
         <h4>纵向滑动</h4>
         <p>支持下拉刷新、上拉加载更多。</p>
+        <p><nut-button type="light" shape="circle" small @click="scrollToPos()">返回列表顶部</nut-button></p>
         <div class="vert-panel">
             <nut-scroller
                 :is-un-more="isUnMore1" 
                 :is-loading="isLoading1"
                 :type="'vertical'"
                 :propsTime="0"
+                :scrollTo="scrollTo"
                 @loadMore="loadMoreVert"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             > 
                 <div slot="list" class="nut-vert-list-panel">
                     <div class="nut-vert-list-item" v-for="(item, index) of listData1" :key="index">
@@ -90,6 +93,8 @@ export default {
             isLoading2: false,
             page2: 2,
             timers: null,
+            scrollTo: 1,
+            scrollToHor: 1
         };
     },
 
@@ -98,6 +103,23 @@ export default {
             location.href = 'http://www.jd.com';
         },
 
+        scrollToCbk() {
+            this.scrollTo = 1;
+        },
+
+        scrollToCbkHor() {
+            this.scrollToHor = 1;
+        },
+
+        scrollToPosHor() {
+            this.scrollToHor = 0;
+            
+        },
+
+        scrollToPos() {
+            this.scrollTo = 0;
+        },
+
         loadMoreVert() {
             this.isLoading1 = true;
             if (this.page1 > this.maxPages) {

src/packages/scroller/doc.md

@@ -174,6 +174,7 @@ export default {
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
+| scrollTo | 滚动到指定位置，只能设置复数，需要配合scrollToCbk使用 | Number | 1
 
 ## Event
 
@@ -181,4 +182,5 @@ export default {
 |----- | ----- | ----- 
 | pulldown | 下拉刷新回调 | -
 | loadMore | 上拉加载回调 | -
-| jump | 查看更多跳转回调 | -
+| jump | 查看更多跳转回调 | -
+| scrollToCbk | 滚动到指定位置之后，scrollTo参数设置成默认值 | -

src/packages/scroller/horizontal-scroll.vue

@@ -16,6 +16,18 @@ export default {
         stretch: {
             type: Number,
             default: 40
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
+        }
+    },
+    watch: {
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {

src/packages/scroller/scroller.vue

@@ -10,15 +10,22 @@
                 :load-more-txt="loadMoreTxt"
                 :unload-more-txt="unloadMoreTxt"
                 :props-time="propsTime"
+                :scroll-to="scrollTo"
                 @loadMore="loadMore"
                 @pulldown="pulldown"
+                @scrollToCbk="scrollToCbk"
             >
                 <slot name="list"  slot="list"></slot>
 
             </nut-vert-scroll>
         </template>
         <template v-else-if="type === 'horizontal'">
-            <nut-hor-scroll :stretch="stretch" @jump="jump">
+            <nut-hor-scroll 
+            :stretch="stretch" 
+            :scroll-to="scrollTo"
+            @jump="jump" 
+            @scrollToCbk="scrollToCbk"
+        >
                 <slot name="list"  slot="list"></slot>
                 <slot name="more"  slot="more"></slot>
                 <slot name="arrow" slot="arrow"></slot>
@@ -67,6 +74,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     data() {
@@ -87,6 +98,10 @@ export default {
 
         pulldown() {
             this.$emit('pulldown');
+        },
+
+        scrollToCbk() {
+            this.$emit('scrollToCbk');
         }
     }
 }

src/packages/scroller/vertical-scroll.vue

@@ -59,6 +59,10 @@ export default {
         propsTime: {
             type:Number,
             default: 0
+        },
+        scrollTo: {
+            type: Number,
+            default: 1
         }
     },
     watch: {
@@ -72,6 +76,12 @@ export default {
         },
         'isUnMore': function() {
             this.isShow();
+        },
+        'scrollTo': function(val) {
+            if (typeof val === 'number' && !isNaN(val) && val <= 0 ) {
+                this.setTransform(val, null, 500);
+                this.$emit('scrollToCbk');
+            }
         }
     },
     data() {