blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): add mask (#2816)

Browse Source 
fix #2792
This commit is contained in:
rex 2020-03-03 17:45:15 +08:00 committed by GitHub
parent bf287502e4
commit 3adba1a67b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/picker/index.less
View File

@ -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;

28
packages/picker/index.wxml
View File

@ -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"

28
packages/picker/toolbar.wxml Normal file
View File

@ -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>