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

[improvement] Picker: prevent style be override by base.css (#4136)

Browse Source
This commit is contained in:
neverland 2019-08-16 21:15:38 +08:00 committed by GitHub
parent a6b256aa01
commit 34d2395ad3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 49 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/area/test/__snapshots__/demo.spec.js.snap
View File

@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -158,7 +158,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -217,7 +217,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

18
src/area/test/__snapshots__/index.spec.js.snap
View File

@ -27,7 +27,7 @@ exports[`change option 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -60,7 +60,7 @@ exports[`change option 2`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -93,7 +93,7 @@ exports[`change option 3`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -120,7 +120,7 @@ exports[`columns-num prop 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -152,7 +152,7 @@ exports[`reset method 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -185,7 +185,7 @@ exports[`reset method 2`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -218,7 +218,7 @@ exports[`watch areaList & code 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -251,7 +251,7 @@ exports[`watch areaList & code 2`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -284,7 +284,7 @@ exports[`watch areaList & code 3`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

4
src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
View File

@ -56,7 +56,7 @@ exports[`filter prop 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -118,7 +118,7 @@ exports[`formatter prop 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

2
src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
View File

@ -21,7 +21,7 @@ exports[`time type 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

10
src/datetime-picker/test/__snapshots__/demo.spec.js.snap
View File

@ -160,7 +160,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -241,7 +241,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -287,7 +287,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -380,7 +380,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -438,7 +438,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

8
src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
View File

@ -28,7 +28,7 @@ exports[`filter prop 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -55,7 +55,7 @@ exports[`format initial value 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -89,7 +89,7 @@ exports[`formatter prop 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -118,7 +118,7 @@ exports[`max-hour & max-minute 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

4
src/picker/index.js
View File

@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
import { preventDefault } from '../utils/dom/event';
import { deepClone } from '../utils/deep-clone';
import { pickerProps } from './shared';
import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
import { BLUE, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
import Loading from '../loading';
import PickerColumn from './PickerColumn';
@ -198,7 +198,7 @@ export default createComponent({
/>
))}
<div class={bem('mask')} style={maskStyle} />
<div class={[BORDER_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
<div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
</div>
{this.toolbarPosition === 'bottom' ? Toolbar : h()}
</div>

12
src/picker/test/__snapshots__/demo.spec.js.snap
View File

@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -85,7 +85,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -110,7 +110,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -135,7 +135,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>

4
src/picker/test/__snapshots__/index.spec.js.snap
View File

@ -36,7 +36,7 @@ exports[`render title slot 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
@ -48,7 +48,7 @@ exports[`toolbar-position prop 1`] = `
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>

18
src/style/hairline.less
View File

@ -1,14 +1,21 @@
@import './mixins/hairline';
[class*='van-hairline'] {
position: relative;
&::after {
.hairline();
}
}
.van-hairline {
&--top,
&--left,
&--right,
&--bottom,
&--surround,
&--top-bottom {
position: relative;
}
&--top::after {
border-top-width: 1px;
}
@ -25,8 +32,11 @@
border-bottom-width: 1px;
}
&--top-bottom::after {
border-width: 1px 0;
&,
&-unset {
&--top-bottom::after {
border-width: 1px 0;
}
}
&--surround::after {

1
src/utils/constant.ts
View File

@ -14,3 +14,4 @@ export const BORDER_RIGHT = `${BORDER}--right`;
export const BORDER_BOTTOM = `${BORDER}--bottom`;
export const BORDER_SURROUND = `${BORDER}--surround`;
export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;