diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md new file mode 100644 index 000000000..8c5502805 --- /dev/null +++ b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md @@ -0,0 +1,14 @@ +# 从 v3 升级 + +### 介绍 + +本文档提供了从 Vant 3 到 Vant 4 的升级指南。 + +## 不兼容更新 + +### API 调整 + +#### Picker + +- `default` 插槽重命名为 `toolbar` +- 移除了 `value-key` 属性,使用 `columnsFieldNames` 属性代替 diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index b084dbc50..bcfd34851 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/packages/vant/src/picker/Picker.tsx @@ -56,9 +56,6 @@ export const pickerSharedProps = { const pickerProps = extend({}, pickerSharedProps, { columns: makeArrayProp(), - // @deprecated - // should be removed in next major version - valueKey: String, defaultIndex: makeNumericProp(0), toolbarPosition: makeStringProp('top'), columnsFieldNames: Object as PropType, @@ -74,19 +71,6 @@ export default defineComponent({ emits: ['confirm', 'cancel', 'change'], setup(props, { emit, slots }) { - if (process.env.NODE_ENV !== 'production') { - if (slots.default) { - console.warn( - '[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.' - ); - } - if (props.valueKey) { - console.warn( - '[Vant] Picker: "valueKey" prop is deprecated, please use "columnsFieldNames" prop instead.' - ); - } - } - const formattedColumns = ref([]); const { @@ -95,8 +79,7 @@ export default defineComponent({ children: childrenKey, } = extend( { - // compatible with valueKey prop - text: props.valueKey || 'text', + text: 'text', values: 'values', children: 'children', }, @@ -324,12 +307,11 @@ export default defineComponent({ const renderToolbar = () => { if (props.showToolbar) { - // default slot is deprecated - // should be removed in next major version - const slot = slots.toolbar || slots.default; return (
- {slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]} + {slots.toolbar + ? slots.toolbar() + : [renderCancel(), renderTitle(), renderConfirm()]}
); }