chore(Picker): deprecatation warning of valueKey (#8994)

src/area/Area.tsx

@@ -327,7 +327,7 @@ export default defineComponent({
           ref={pickerRef}
           class={bem()}
           columns={columns}
-          valueKey="name"
+          columnsFieldNames={{ text: 'name' }}
           onChange={onChange}
           onConfirm={onConfirm}
           {...pick(props, INHERIT_PROPS)}

src/number-keyboard/demo/index.vue

@@ -1,23 +1,35 @@
 <template>
   <demo-block card>
-    <van-cell is-link @touchstart.stop="keyboard = 'default'">
+    <van-cell
-      {{ t('button1') }}
+      is-link
-    </van-cell>
+      :title="t('button1')"
-    <van-cell is-link @touchstart.stop="keyboard = 'custom'">
+      @touchstart.stop="keyboard = 'default'"
-      {{ t('button2') }}
+    />
-    </van-cell>
+    <van-cell
-    <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
+      is-link
-      {{ t('button3') }}
+      :title="t('button2')"
-    </van-cell>
+      @touchstart.stop="keyboard = 'custom'"
-    <van-cell is-link @touchstart.stop="keyboard = 'title'">
+    />
-      {{ t('button4') }}
+    <van-cell
-    </van-cell>
+      is-link
-    <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
+      :title="t('button3')"
-      {{ t('button5') }}
+      @touchstart.stop="keyboard = 'extraKey'"
-    </van-cell>
+    />
-    <van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
+    <van-cell
-      {{ t('button6') }}
+      is-link
-    </van-cell>
+      :title="t('button4')"
+      @touchstart.stop="keyboard = 'title'"
+    />
+    <van-cell
+      is-link
+      :title="t('button5')"
+      @touchstart.stop="keyboard = 'multiExtraKey'"
+    />
+    <van-cell
+      is-link
+      :title="t('button6')"
+      @touchstart.stop="keyboard = 'randomKeyOrder'"
+    />
     <van-field
       v-model="value"
       readonly

src/number-keyboard/test/__snapshots__/demo.spec.ts.snap

@@ -6,8 +6,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show Default Keyboard
+      <span>
+        Show Default Keyboard
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
@@ -16,8 +18,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show Keyboard With Sidebar
+      <span>
+        Show Keyboard With Sidebar
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
@@ -26,8 +30,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show IdNumber Keyboard
+      <span>
+        Show IdNumber Keyboard
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
@@ -36,8 +42,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show Keyboard With Title
+      <span>
+        Show Keyboard With Title
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
@@ -46,8 +54,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show Keyboard With Multiple ExtraKey
+      <span>
+        Show Keyboard With Multiple ExtraKey
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
@@ -56,8 +66,10 @@ exports[`should render demo and match snapshot 1`] = `
        role="button"
        tabindex="0"
   >
-    <div class="van-cell__value van-cell__value--alone">
+    <div class="van-cell__title">
-      Show Keyboard With Random Key Order
+      <span>
+        Show Keyboard With Random Key Order
+      </span>
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>

src/picker/Picker.tsx

@@ -68,6 +68,9 @@ export default defineComponent({
   name,
 
   props: extend({}, pickerProps, {
+    // @deprecated
+    // should be removed in next major version
+    valueKey: String,
     columnsFieldNames: Object as PropType<PickerFieldNames>,
     columns: {
       type: Array as PropType<PickerOption[] | PickerColumn[]>,
@@ -81,21 +84,22 @@ export default defineComponent({
       type: String as PropType<PickerToolbarPosition>,
       default: 'top',
     },
-    // @deprecated
-    // should be removed in next major version
-    valueKey: {
-      type: String,
-      default: 'text',
-    },
   }),
 
   emits: ['confirm', 'cancel', 'change'],
 
   setup(props, { emit, slots }) {
-    if (slots.default) {
+    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
+      if (slots.default) {
-        '[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.'
+        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<PickerObjectColumn[]>([]);
@@ -103,7 +107,7 @@ export default defineComponent({
     const { text: textKey, values: valuesKey, children: childrenKey } = extend(
       {
         // compatible with valueKey prop
-        text: props.valueKey,
+        text: props.valueKey || 'text',
         values: 'values',
         children: 'children',
       },