fix(Picker): add mask (#2816)

fix #2792

packages/picker/index.less

@@ -56,6 +56,21 @@
     .theme(background-color, '@picker-loading-mask-color');
   }
 
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)),
+      linear-gradient(0deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    backface-visibility: hidden;
+    pointer-events: none;
+  }
+
   &__loading .van-loading,
   &__frame {
     position: absolute;

packages/picker/index.wxml

@@ -1,29 +1,4 @@
-<template name="toolbar">
+<import src="./toolbar" />
-  <view
-    wx:if="{{ showToolbar }}"
-    class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
-  >
-    <view
-      class="van-picker__cancel"
-      hover-class="van-picker__cancel--hover"
-      hover-stay-time="70"
-      data-type="cancel"
-      bindtap="emit"
-    >
-      {{ cancelButtonText }}
-    </view>
-    <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
-    <view
-      class="van-picker__confirm"
-      hover-class="van-picker__confirm--hover"
-      hover-stay-time="70"
-      data-type="confirm"
-      bindtap="emit"
-    >
-      {{ confirmButtonText }}
-    </view>
-  </view>
-</template>
 
 <view class="van-picker custom-class">
   <template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
@@ -49,6 +24,7 @@
       active-class="active-class"
       bind:change="onChange"
     />
+    <view class="van-picker__mask" style="background-size: 100% {{ (itemHeight * visibleItemCount - itemHeight) / 2 }}px" />
     <view
       class="van-picker__frame van-hairline--top-bottom"
       style="height: {{ itemHeight }}px"

packages/picker/toolbar.wxml

@@ -0,0 +1,28 @@
+<template name="toolbar">
+  <view
+    wx:if="{{ showToolbar }}"
+    class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
+  >
+    <view
+      class="van-picker__cancel"
+      hover-class="van-picker__cancel--hover"
+      hover-stay-time="70"
+      data-type="cancel"
+      bindtap="emit"
+    >
+      {{ cancelButtonText }}
+    </view>
+    <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{
+      title
+    }}</view>
+    <view
+      class="van-picker__confirm"
+      hover-class="van-picker__confirm--hover"
+      hover-stay-time="70"
+      data-type="confirm"
+      bindtap="emit"
+    >
+      {{ confirmButtonText }}
+    </view>
+  </view>
+</template>