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

fix(Area): missing picker mask (#10164)

Browse Source
This commit is contained in:
neverland 2022-01-07 17:38:06 +08:00 committed by GitHub
parent b1638e6273
commit 546639d6af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
View File

@ -165,6 +165,14 @@ exports[`should render demo and match snapshot 1`] = `
</li> </li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask"
style="background-size: 100% 110px;"
>
</div>
<div class="van-hairline-unset--top-bottom van-picker__frame"
style="height: 44px;"
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -323,6 +331,14 @@ exports[`should render demo and match snapshot 1`] = `
</li> </li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask"
style="background-size: 100% 110px;"
>
</div>
<div class="van-hairline-unset--top-bottom van-picker__frame"
style="height: 44px;"
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -394,6 +410,14 @@ exports[`should render demo and match snapshot 1`] = `
</li> </li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask"
style="background-size: 100% 110px;"
>
</div>
<div class="van-hairline-unset--top-bottom van-picker__frame"
style="height: 44px;"
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -471,6 +495,14 @@ exports[`should render demo and match snapshot 1`] = `
> >
</ul> </ul>
</div> </div>
<div class="van-picker__mask"
style="background-size: 100% 110px;"
>
</div>
<div class="van-hairline-unset--top-bottom van-picker__frame"
style="height: 44px;"
>
</div>
</div> </div>
</div> </div>
</div> </div>

12
packages/vant/src/picker/Picker.tsx
View File

@ -87,6 +87,7 @@ export default defineComponent({
} }
} }
const hasOptions = ref(false);
const formattedColumns = ref<PickerObjectColumn[]>([]); const formattedColumns = ref<PickerObjectColumn[]>([]);
const { const {
@ -164,6 +165,10 @@ export default defineComponent({
} else { } else {
formattedColumns.value = columns as PickerObjectColumn[]; formattedColumns.value = columns as PickerObjectColumn[];
} }
hasOptions.value = formattedColumns.value.some(
(item) => item[valuesKey] && item[valuesKey].length !== 0
);
}; };
// get indexes of all columns // get indexes of all columns
@ -174,6 +179,7 @@ export default defineComponent({
const column = children[index]; const column = children[index];
if (column) { if (column) {
column.setOptions(options); column.setOptions(options);
hasOptions.value = true;
} }
}; };
@ -353,11 +359,7 @@ export default defineComponent({
)); ));
const renderMask = (wrapHeight: number) => { const renderMask = (wrapHeight: number) => {
const hasOptions = formattedColumns.value.some( if (hasOptions.value) {
(item) => item[valuesKey] && item[valuesKey].length !== 0
);
if (hasOptions) {
const frameStyle = { height: `${itemHeight.value}px` }; const frameStyle = { height: `${itemHeight.value}px` };
const maskStyle = { const maskStyle = {
backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`, backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`,