alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages 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
11 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/area/test/__snapshots__/demo.spec.js.snap
+3 -3
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>
src/area/test/__snapshots__/index.spec.js.snap
+9 -9
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>
src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
+2 -2
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>
src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
+1 -1
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>
src/datetime-picker/test/__snapshots__/demo.spec.js.snap
+5 -5
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>
src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
+4 -4
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>
src/picker/index.js
+2 -2
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>
src/picker/test/__snapshots__/demo.spec.js.snap
+6 -6
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>
src/picker/test/__snapshots__/index.spec.js.snap
+2 -2
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>
src/style/hairline.less
+14 -4
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 {
src/utils/constant.ts
+1
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`;