From 3adba1a67bc41209fc51e284027e77ecab33c58b Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 3 Mar 2020 17:45:15 +0800
Subject: [PATCH] fix(Picker): add mask (#2816)

fix #2792
---
 packages/picker/index.less   | 15 +++++++++++++++
 packages/picker/index.wxml   | 28 ++--------------------------
 packages/picker/toolbar.wxml | 28 ++++++++++++++++++++++++++++
 3 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 packages/picker/toolbar.wxml

diff --git a/packages/picker/index.less b/packages/picker/index.less
index f28b5035..6e190735 100644
--- a/packages/picker/index.less
+++ b/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;
diff --git a/packages/picker/index.wxml b/packages/picker/index.wxml
index 6631a736..ad8a4462 100644
--- a/packages/picker/index.wxml
+++ b/packages/picker/index.wxml
@@ -1,29 +1,4 @@
-<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>
+<import src="./toolbar" />
 
 <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"
diff --git a/packages/picker/toolbar.wxml b/packages/picker/toolbar.wxml
new file mode 100644
index 00000000..4fa9db50
--- /dev/null
+++ b/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>