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

src/nutui.js

@@ -95,6 +95,7 @@ import TextBox from "./packages/textbox/index.js";
 import Elevator from "./packages/elevator/index.js";
 import "./packages/elevator/elevator.scss";
 import Popup from "./packages/popup/index.js";
+import "./packages/popup/popup.scss";
 const packages = {
   Cell,
   Dialog,

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('12');
+            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('15 开始');
-            expect(wrapper.findAll('.nut-calendar-month-item').at(1).findAll('.nut-calendar-month-day-active').at(1).text()).toBe('17 结束');
+            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/elevator/elevator.scss

@@ -1,6 +1,14 @@
 .nut-elevator{
+    position: fixed;
+    top:40px;
+    width: 100%;
+}
+.nut-main{
     overflow: scroll;
     background:#FFF; 
+    &::-webkit-scrollbar{
+        display:none; 
+    }
 }
 .nut-elevator-ul{
     width: 100%;

src/packages/elevator/elevator.vue

@@ -1,44 +1,45 @@
 <template>
-    <div class="nut-elevator" id="nut-elevator" :style="{height:wrapHeight+'px'}">
-        <ul class="nut-elevator-ul" 
-            id="nut-elevator-ul"
-            >
-            <li 
-            v-for="item in dataArray" 
-            v-bind:key="item.title"
-            class="nut-list-title" 
-            >
-                <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
-                <ul class="nut-people-list">
-                    <li v-for="(list,idx) in item.list" 
-                    v-bind:key="idx"
-                    class="nut-list-name" 
-                    :id="list.id?list.id:'list'+item.title+idx"
-                    @click="clickList(list,item)"
-                    >{{list.name}}</li>
+        <div class="nut-elevator"  :style="{height:wrapHeight+'px'}">
+            <div class="nut-main" :style="{height:wrapHeight+'px'}">
+                <ul class="nut-elevator-ul" 
+                    id="nut-elevator-ul"
+                    >
+                    <li 
+                    v-for="item in dataArray" 
+                    v-bind:key="item.title"
+                    class="nut-list-title" 
+                    >
+                        <h3 class="nut-list-h" :id="item.title">{{item.title}}</h3>
+                        <ul class="nut-people-list">
+                            <li v-for="(list,idx) in item.list" 
+                            v-bind:key="idx"
+                            class="nut-list-name" 
+                            :id="list.id?list.id:'list'+item.title+idx"
+                            @click="clickList(list,item)"
+                            >{{list.name}}</li>
+                        </ul>
+                    </li>
                 </ul>
-            </li>
-        </ul>
-        <ul class="nut-elevator-nav" id="nut-elevator-nav" 
-            @touchmove="onPointerMove($event)"
-            @touchstart="onPointerMove($event)"
-            @touchend="onPointerEnd($event)"
-            >
-            <li v-for="(item,index) in dataArray"
-            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>
-        </ul>
-        <template v-if="showIndicator">
-            <div class="nut-big-box" v-show="currBox">
-                {{currTitle}}
+                <ul class="nut-elevator-nav" id="nut-elevator-nav" 
+                    @touchmove="onPointerMove($event)"
+                    @touchstart="onPointerMove($event)"
+                    @touchend="onPointerEnd($event)"
+                    >
+                    <li v-for="(item,index) in dataArray"
+                    v-bind:key="index" 
+                    :id="'nav'+index"
+                    class="nut-nav-list" 
+                    :style="{height:navListHeight+'px'}"
+                    @click="clickNav(item.title,index)"
+                    >{{item.title}}</li>
+                </ul>
+                <template v-if="showIndicator">
+                    <div class="nut-big-box" v-show="currBox">
+                        {{currTitle}}
+                    </div>
+                </template>
             </div>
-        </template>
-    </div>
+        </div>  
 </template>
 <script>
 export default {
@@ -107,6 +108,7 @@ export default {
         },
         clickNav(title,index){
             this.currBox =true;
+            this.currTitle = title;
             setTimeout(()=>{
                 this.currBox =false;
             },this.hiddenTime);
@@ -118,6 +120,7 @@ export default {
         moveFun(title,index){
             let titleBox = document.getElementById(title);
             titleBox.scrollIntoView();
+            
         },
         onPointerEnd(e){
             let fontSize = this.getFontSize();

src/packages/popup/index.js

@@ -1,4 +1,5 @@
 import Popup from "./popup.vue";
+import "./popup.scss";
 
 Popup.install = function(Vue) {
   Vue.component(Popup.name, Popup);

src/packages/popup/popup.scss

@@ -0,0 +1,95 @@
+.popup-fade-enter-active {
+    animation: 0.2s nut-fade-in;
+  }
+  .popup-fade-leave-active {
+    animation: 0.2s nut-fade-out;
+  }
+  
+  .popup-slide {
+    &-top-enter,
+    &-top-leave-active {
+      transform: translate(0, -100%);
+    }
+    &-right-enter,
+    &-right-leave-active {
+      transform: translate(100%, 0);
+    }
+  
+    &-bottom-enter,
+    &-bottom-leave-active {
+      transform: translate(0, 100%);
+    }
+  
+    &-left-enter,
+    &-left-leave-active {
+      transform: translate(-100%, 0);
+    }
+  }
+  
+  .popup-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .popup-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 25px 25px 0 0;
+    }
+  }
+  .popup-right {
+    top: 0;
+    right: 0;
+    &.round {
+      border-radius: 25px 0 0 25px;
+    }
+  }
+  
+  .popup-left {
+    top: 0;
+    left: 0;
+    &.round {
+      border-radius: 0 25px 25px 0;
+    }
+  }
+  .popup-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    &.round {
+      border-radius: 0 0 25px 25px;
+    }
+  }
+  .popup-box {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #fff;
+    transition: transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    z-index: 2028;
+  }
+  @keyframes nut-fade-in {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes nut-fade-out {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }
+ 
+  

src/packages/popup/popup.vue

@@ -99,98 +99,3 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-.popup-fade-enter-active {
-  animation: 0.2s van-fade-in;
-}
-.popup-fade-leave-active {
-  animation: 0.2s van-fade-out;
-}
-
-.popup-slide {
-  &-top-enter,
-  &-top-leave-active {
-    transform: translate(0, -100%);
-  }
-  &-right-enter,
-  &-right-leave-active {
-    transform: translate(100%, 0);
-  }
-
-  &-bottom-enter,
-  &-bottom-leave-active {
-    transform: translate(0, 100%);
-  }
-
-  &-left-enter,
-  &-left-leave-active {
-    transform: translate(-100%, 0);
-  }
-}
-
-.popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 25px 25px 0 0;
-  }
-}
-.popup-right {
-  top: 0;
-  right: 0;
-  &.round {
-    border-radius: 25px 0 0 25px;
-  }
-}
-
-.popup-left {
-  top: 0;
-  left: 0;
-  &.round {
-    border-radius: 0 25px 25px 0;
-  }
-}
-.popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-  &.round {
-    border-radius: 0 0 25px 25px;
-  }
-}
-.popup-box {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: #fff;
-  transition: transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  z-index: 2028;
-}
-@keyframes van-fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes van-fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-</style>

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() {