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

package.json

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

src/packages/datepicker/__test__/datapicker.spec.js

@@ -55,7 +55,7 @@ describe('DatePicker.vue', () => {
         return Vue.nextTick().then(function () {
             expect(wrapper.findAll('.nut-picker-list').length).toBe(3)
             expect(wrapper.findAll('.nut-picker-list').at(0).findAll('.nut-picker-item').at(0).text()).toBe('12时')
-            expect(wrapper.findAll('.nut-picker-list-panel').at(2).attributes('style')).toBe('-webkit-transform: translateY(-36px);');
+            expect(wrapper.findAll('.nut-picker-list-panel').at(2).attributes('style')).toBe('-webkit-transform: translate3d(0, -36px, 0);');
         })
     });
     

src/packages/dialog/dialog.scss

@@ -145,7 +145,7 @@ body.dialog-open {
     position: relative;
     flex: 1;
     font-size: $font-size-base;
-    border:none;
+    border: none;
     background: transparent;
     appearance: none;
     outline: none;
@@ -168,38 +168,18 @@ body.dialog-open {
     background: $btn-gradient-bg;
     background-origin: border-box;
     color: $btn-gradient-color;
+    &:active {
+        background: $btn-gradient-active-bg;
+    }
 }
 
 .nut-dialog-cancel {
     border-radius: 0 0 0 5px;
     border-top: 1px solid $light-color;
     background: #FFF;
-}
-
-// .fade-enter-active {
-//     animation: zoomIn 0.3s forwards;
-// }
-// @keyframes zoomIn {
-//     0% {
-//         opacity: 0;
-//         transform: scale3d(1.3, 1.3, 1.3);
-//     }
-//     50% {
-//         opacity: 1;
-//     }
-// }
-// @keyframes zoomOut {
-//     0% {
-//         opacity: 1;
-//     }
-//     50% {
-//         opacity: 0;
-//         transform: scale3d(1.3, 1.3, 1.3);
-//     }
-//     100% {
-//         opacity: 0;
-//     }
-// }
-// .fade-leave-active {
-//     animation: zoomOut 0.3s forwards;
-// }
+    background-origin: border-box;
+    &:active {
+        border-top: 1px solid #CCC;
+        background: #CCC;
+    }
+}

src/packages/picker/__test__/picker.spec.js

@@ -66,7 +66,7 @@ describe('PickerSlot.vue', () => {
 
     it('设置默认值', () => {
         return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-picker-list-panel').attributes('style')).toBe('-webkit-transform: translateY(-36px);');
+            expect(wrapper.find('.nut-picker-list-panel').attributes('style')).toBe('-webkit-transform: translate3d(0, -36px, 0);');
         })
     });
 });

src/packages/picker/demo.vue

@@ -86,7 +86,23 @@ export default {
           "2020",
           "2021",
           "2022",
-          "2023"
+          "2023",
+          "2024",
+          "2025",
+          "2026",
+          "2027",
+          "2028",
+          "2029",
+          "2030",
+          "2031",
+          "2032",
+          "2033",
+          "2034",
+          "2035",
+          "2036",
+          "2037",
+          "2038",
+          "2039",
         ],
         ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
       ],

src/packages/picker/picker-slot.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="nut-picker-list">
-    <div class="nut-picker-mask"></div>
-    <div class="nut-picker-indicator"></div>
+    <div class="nut-picker-roller" ref="roller">
+        <div class="nut-picker-roller-item" 
+            :class="{'nut-picker-roller-item-hidden': isHidden(index + 1)}"
+            v-for="(item,index) in listData"
+            :style="setRollerStyle(index + 1)"
+            :key="index">
+                {{item}}
+        </div>
+    </div>
     <div class="nut-picker-content">
         <div class="nut-picker-list-panel" ref="list">
-            <div class="nut-picker-item" v-for="(item,index) in listData "
+            <div class="nut-picker-item" v-for="(item,index) in listData"
                 :key="index">{{item}}
             </div>
         </div>
     </div>
+    <div class="nut-picker-mask"></div>
+    <div class="nut-picker-indicator"></div>
 </div>
 </template>
 <script>
@@ -29,7 +38,7 @@ export default {
         isUpdate: {
             type: Boolean,
             default: false
-        },
+        }
     },
     data() {
         return {
@@ -39,9 +48,11 @@ export default {
                 startTime: 0, 
                 endTime: 0
             },
+            currIndex: 1,
             transformY: 0,
             scrollDistance: 0,
             lineSpacing: 36,
+            rotation: 20,
             timer: null
         }
     },
@@ -64,16 +75,29 @@ export default {
                 }, 10); 
             } 
         },
-        setTransform(translateY = 0, type, time = 1000) {
+
+        setRollerStyle(index) {
+            return `transform: rotate3d(1, 0, 0, ${-this.rotation * index}deg) translate3d(0px, 0px, 104px)`;
+        },
+
+        isHidden(index) {
+            if (index >= this.currIndex + 8 || index <= this.currIndex - 8) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+
+        setTransform(translateY = 0, type, time = 1000, deg) {
             if (type === 'end') {
                 this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
-                //this.$refs.list.style.transition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
+                this.$refs.roller.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`;
             } else {
                 this.$refs.list.style.webkitTransition = '';
-                //this.$refs.list.style.transition = '';
+                this.$refs.roller.style.webkitTransition = '';
             }
-            this.$refs.list.style.webkitTransform = `translateY(${translateY}px)`;
-            //this.$refs.list.style.transform = `translateY(${translateY}px)`;
+            this.$refs.list.style.webkitTransform = `translate3d(0, ${translateY}px, 0)`;
+            this.$refs.roller.style.webkitTransform = `rotate3d(1, 0, 0, ${deg})`;
             this.scrollDistance = translateY;
         },
 
@@ -90,12 +114,23 @@ export default {
 
                 // 设置滚动距离为lineSpacing的倍数值
                 let endMove = Math.round(updateMove / this.lineSpacing) * this.lineSpacing;
-                this.setTransform(endMove, type, time);
-                // this.timer = setTimeout(() => {
+                let deg = `${(Math.abs(Math.round(endMove / this.lineSpacing)) + 1) * this.rotation}deg`;
+                this.setTransform(endMove, type, time, deg);
+                this.timer = setTimeout(() => {
                     this.setChooseValue(endMove);
-                // }, time / 2); 
+                }, time / 2); 
+
+                this.currIndex = (Math.abs(Math.round(endMove/ this.lineSpacing)) + 1);
             } else {
-                this.setTransform(updateMove);
+                let deg = '0deg';
+                if (updateMove < 0) {
+                    deg = `${(Math.abs(updateMove / this.lineSpacing) + 1) * this.rotation}deg`;
+                } else {
+                    deg = `${((-updateMove / this.lineSpacing) + 1) * this.rotation}deg`;
+                }
+                
+                this.setTransform(updateMove, null, null, deg);
+                this.currIndex = (Math.abs(Math.round(updateMove/ this.lineSpacing)) + 1);
             }
         },
 
@@ -144,6 +179,7 @@ export default {
         modifyStatus (type, defaultValue) {
             defaultValue = defaultValue ? defaultValue : this.defaultValue;
             let index = this.listData.indexOf(defaultValue);
+            this.currIndex = index === -1 ? 1 : (index + 1);
             let move = index === -1 ? 0 : (index * this.lineSpacing);
             type && this.setChooseValue(-move);
             this.setMove(-move);
@@ -168,3 +204,4 @@ export default {
     }
 }
 </script>
+

src/packages/picker/picker.scss

@@ -22,13 +22,13 @@
     }
 }
 .nut-picker-panel{
-    height: 254px;
+    height: 252px;
     display: flex;
 }
 .nut-picker-list{
     flex: 1;
     position: relative;
-    height: 254px;
+    height: 252px;
     overflow: hidden;
     text-align: center;
     .nut-picker-mask{
@@ -37,8 +37,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-image: linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6)),
-        linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6));
+        //background-image: linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.6));
         background-position: top, bottom;
         background-size: 100% 108px;
         background-repeat: no-repeat;
@@ -53,13 +52,19 @@
         border-bottom: 1px solid $dark-color;
         z-index: 3;
     }
-    .nut-picker-content{
+    
+    .nut-picker-content, .nut-picker-roller{
         position: absolute;
         top: 108px;
         width: 100%;
         height: 36px;
     }
-    .nut-picker-item{
+    .nut-picker-content{
+        background: #FFF;
+        z-index: 2;
+        overflow: hidden;
+    }
+    .nut-picker-item, .nut-picker-roller-item{
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -67,7 +72,22 @@
         color: $title-color;
         font-size: $font-size-base;
         text-align: center;
-        &-hidden {
+    }
+    .nut-picker-item{
+        font-size: 15px;
+        background: #FFF;
+    }
+    .nut-picker-roller{
+        z-index: 1;
+        transform-style: preserve-3d;
+        .nut-picker-roller-item{
+            backface-visibility: hidden;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            color: $text-color;
+        }
+        .nut-picker-roller-item-hidden {
             visibility: hidden;
             opacity: 0;
         }

src/styles/variable.scss

@@ -67,7 +67,10 @@ $btn-menu-height: 50px !default;
 $btn-primary-color: #FFF !default;
 $btn-primary-bg: $primary-color !default;
 $btn-gradient-color: #FFF !default;
-$btn-gradient-bg: linear-gradient(315deg, rgba(255, 79, 24, 1) 0%, rgba(242, 0, 0, 1) 100%) !default;
+$btn-gradient-start-color: #ff4f18;
+$btn-gradient-end-color: #f20000;
+$btn-gradient-bg: linear-gradient(315deg, $btn-gradient-start-color 0%, $btn-gradient-end-color 100%) !default;
+$btn-gradient-active-bg: linear-gradient(315deg, darken($btn-gradient-start-color, 10%) 0%, darken($btn-gradient-end-color, 10%) 100%) !default;
 $btn-default-color: $normal-color !default;
 $btn-default-bg: #FFF !default;
 $btn-default-border: $border-color-dark !default;