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(Picker): optimize the animation effect of sliding multiple columns simultaneously (#11945)

Browse Source 
* fix(Picker): optimizing the animation effect of sliding multiple columns simultaneously

* chore: use built-in api
This commit is contained in:
inottn 2023-06-18 16:11:59 +08:00 committed by GitHub
parent 2418f71274
commit 7b30a0b2f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vant/src/picker/PickerColumn.tsx
View File

@ -78,10 +78,14 @@ export default defineComponent({
(props.optionHeight * (+props.visibleOptionNum - 1)) / 2; (props.optionHeight * (+props.visibleOptionNum - 1)) / 2;
const updateValueByIndex = (index: number) => { const updateValueByIndex = (index: number) => {
const enabledIndex = findIndexOfEnabledOption(props.options, index); let enabledIndex = findIndexOfEnabledOption(props.options, index);
const offset = -enabledIndex * props.optionHeight; const offset = -enabledIndex * props.optionHeight;
const trigger = () => { const trigger = () => {
if (enabledIndex > count() - 1) {
enabledIndex = findIndexOfEnabledOption(props.options, index);
}
const value = props.options[enabledIndex][props.fields.value]; const value = props.options[enabledIndex][props.fields.value];
if (value !== props.value) { if (value !== props.value) {
emit('change', value); emit('change', value);
@ -259,11 +263,14 @@ export default defineComponent({
useExpose({ stopMomentum }); useExpose({ stopMomentum });
watchEffect(() => { watchEffect(() => {
const index = props.options.findIndex( const index = moving
(option) => option[props.fields.value] === props.value ? Math.floor(-currentOffset.value / props.optionHeight)
); : props.options.findIndex(
(option) => option[props.fields.value] === props.value
);
const enabledIndex = findIndexOfEnabledOption(props.options, index); const enabledIndex = findIndexOfEnabledOption(props.options, index);
const offset = -enabledIndex * props.optionHeight; const offset = -enabledIndex * props.optionHeight;
if (moving && enabledIndex < index) stopMomentum();
currentOffset.value = offset; currentOffset.value = offset;
}); });

27
packages/vant/src/picker/test/index.spec.tsx
View File

@ -46,6 +46,33 @@ test('should emit cancel event after clicking the cancel button', () => {
]); ]);
}); });
test('should work correctly when dragging the column and changing columns prop', async () => {
const columnsOne = [
{ text: '1990', value: '1990' },
{ text: '1991', value: '1991' },
];
const columnsTwo = [{ text: '1993', value: '1993' }];
const wrapper = mount(Picker, {
props: {
columns: columnsOne,
},
});
triggerDrag(wrapper.findAll('.van-picker-column')[0], 0, -100);
await wrapper.setProps({
columns: columnsTwo,
});
await wrapper.find('.van-picker__confirm').trigger('click');
expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([
{
selectedOptions: [{ text: '1993', value: '1993' }],
selectedValues: ['1993'],
selectedIndexes: [0],
},
]);
});
test('should emit change event after draging the column', async () => { test('should emit change event after draging the column', async () => {
const wrapper = mount(Picker, { const wrapper = mount(Picker, {
props: { props: {