From 47a5151a2037053fbe3801223e405232aefb674c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 19 Mar 2022 20:02:56 +0800
Subject: [PATCH] docs(Picker): add v-model usage (#10417)

---
 packages/vant/src/picker/README.md            | 36 +++++++-
 packages/vant/src/picker/README.zh-CN.md      | 32 +++++++
 packages/vant/src/picker/demo/data.ts         |  4 +-
 packages/vant/src/picker/demo/index.vue       | 14 +++
 .../test/__snapshots__/demo.spec.ts.snap      | 86 ++++++++++++++++++-
 5 files changed, 165 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index 66ea84263..a871e2d9f 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -38,7 +38,7 @@ export default {
     const columns = [
       { text: 'Delaware', value: 'Delaware' },
       { text: 'Florida', value: 'Florida' },
-      { text: 'Georqia', value: 'Georqia' },
+      { text: 'Wenzhou', value: 'Wenzhou' },
       { text: 'Indiana', value: 'Indiana' },
       { text: 'Maine', value: 'Maine' },
     ];
@@ -89,7 +89,7 @@ export default {
     const columns = [
       { text: 'Delaware', value: 'Delaware' },
       { text: 'Florida', value: 'Florida' },
-      { text: 'Georqia', value: 'Georqia' },
+      { text: 'Wenzhou', value: 'Wenzhou' },
       { text: 'Indiana', value: 'Indiana' },
       { text: 'Maine', value: 'Maine' },
     ];
@@ -111,6 +111,36 @@ export default {
 };
 ```
 
+### v-model
+
+Using `v-model` to bind selected values.
+
+```html
+<van-picker v-model="selectedValues" title="Title" :columns="columns" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const columns = [
+      { text: 'Delaware', value: 'Delaware' },
+      { text: 'Florida', value: 'Florida' },
+      { text: 'Wenzhou', value: 'Wenzhou' },
+      { text: 'Indiana', value: 'Indiana' },
+      { text: 'Maine', value: 'Maine' },
+    ];
+    const selectedValues = ref(['Wenzhou']);
+
+    return {
+      columns,
+      selectedValues,
+    };
+  },
+};
+```
+
 ### Multiple Columns
 
 ```html
@@ -213,7 +243,7 @@ export default {
     const columns = [
       { text: 'Delaware', value: 'Delaware', disabled: true },
       { text: 'Florida', value: 'Florida' },
-      { text: 'Georqia', value: 'Georqia' },
+      { text: 'Wenzhou', value: 'Wenzhou' },
     ];
     return { columns };
   },
diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md
index c7859af63..1f352d1ae 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -120,6 +120,38 @@ export default {
 };
 ```
 
+### 双向绑定
+
+通过 `v-model` 可以绑定当前选中项的 `values`，修改 `v-model` 绑定的值时，Picker 的选中状态也会随之改变。
+
+`v-model` 的值是一个数组，数组的第一位对应第一列选中项的 `value`，第二位对应第二列选中项的 `value`，以此类推。
+
+```html
+<van-picker v-model="selectedValues" title="标题" :columns="columns" />
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+  setup() {
+    const columns = [
+      { text: '杭州', value: 'Hangzhou' },
+      { text: '宁波', value: 'Ningbo' },
+      { text: '温州', value: 'Wenzhou' },
+      { text: '绍兴', value: 'Shaoxing' },
+      { text: '湖州', value: 'Huzhou' },
+    ];
+    const selectedValues = ref(['Wenzhou']);
+
+    return {
+      columns,
+      selectedValues,
+    };
+  },
+};
+```
+
 ### 多列选择
 
 `columns` 属性可以通过二维数组的形式配置多列选择。
diff --git a/packages/vant/src/picker/demo/data.ts b/packages/vant/src/picker/demo/data.ts
index f89e1e72b..549d4053d 100644
--- a/packages/vant/src/picker/demo/data.ts
+++ b/packages/vant/src/picker/demo/data.ts
@@ -9,7 +9,7 @@ export const basicColumns = {
   'en-US': [
     { text: 'Delaware', value: 'Delaware' },
     { text: 'Florida', value: 'Florida' },
-    { text: 'Georqia', value: 'Georqia' },
+    { text: 'Wenzhou', value: 'Wenzhou' },
     { text: 'Indiana', value: 'Indiana' },
     { text: 'Maine', value: 'Maine' },
   ],
@@ -209,6 +209,6 @@ export const disabledColumns = {
   'en-US': [
     { text: 'Delaware', value: 'Delaware', disabled: true },
     { text: 'Florida', value: 'Florida' },
-    { text: 'Georqia', value: 'Georqia' },
+    { text: 'Wenzhou', value: 'Wenzhou' },
   ],
 };
diff --git a/packages/vant/src/picker/demo/index.vue b/packages/vant/src/picker/demo/index.vue
index 6215cefb1..baef585d1 100644
--- a/packages/vant/src/picker/demo/index.vue
+++ b/packages/vant/src/picker/demo/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import WithPopup from './WithPopup.vue';
 import VanPicker, {
   PickerChangeEventParams,
@@ -17,6 +18,7 @@ import { useTranslate } from '../../../docs/site/use-translate';
 const t = useTranslate({
   'zh-CN': {
     cascade: '级联选择',
+    modelValue: '双向绑定',
     showToolbar: '展示顶部栏',
     dateColumns: dateColumns['zh-CN'],
     basicColumns: basicColumns['zh-CN'],
@@ -31,6 +33,7 @@ const t = useTranslate({
   },
   'en-US': {
     cascade: 'Cascade',
+    modelValue: 'v-model',
     showToolbar: 'Show Toolbar',
     dateColumns: dateColumns['en-US'],
     basicColumns: basicColumns['en-US'],
@@ -52,6 +55,8 @@ const customFieldName = {
   children: 'cities',
 };
 
+const selectedValues = ref(['Wenzhou']);
+
 const onChange1 = ({ selectedValues }: PickerChangeEventParams) => {
   Toast(t('toastContent', selectedValues.join(',')));
 };
@@ -69,12 +74,21 @@ const onCancel = () => Toast(t('cancel'));
       :title="t('title')"
       :columns="t('basicColumns')"
       @change="onChange1"
+      @cancel="onCancel"
       @confirm="onConfirm"
     />
   </demo-block>
 
   <WithPopup />
 
+  <demo-block card :title="t('modelValue')">
+    <van-picker
+      v-model="selectedValues"
+      :title="t('title')"
+      :columns="t('basicColumns')"
+    />
+  </demo-block>
+
   <demo-block card :title="t('multipleColumns')">
     <van-picker
       :title="t('title')"
diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
index 027e78269..3980b9b77 100644
--- a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -49,7 +49,7 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-picker-column__item"
           >
             <div class="van-ellipsis">
-              Georqia
+              Wenzhou
             </div>
           </li>
           <li role="button"
@@ -114,6 +114,88 @@ exports[`should render demo and match snapshot 1`] = `
   <transition-stub>
   </transition-stub>
 </div>
+<div>
+  <div class="van-picker">
+    <div class="van-picker__toolbar">
+      <button type="button"
+              class="van-picker__cancel van-haptics-feedback"
+      >
+        Cancel
+      </button>
+      <div class="van-picker__title van-ellipsis">
+        Title
+      </div>
+      <button type="button"
+              class="van-picker__confirm van-haptics-feedback"
+      >
+        Confirm
+      </button>
+    </div>
+    <div class="van-picker__columns"
+         style="height: 264px;"
+    >
+      <div class="van-picker-column">
+        <ul style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;"
+            class="van-picker-column__wrapper"
+        >
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item"
+          >
+            <div class="van-ellipsis">
+              Delaware
+            </div>
+          </li>
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item"
+          >
+            <div class="van-ellipsis">
+              Florida
+            </div>
+          </li>
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item van-picker-column__item--selected"
+          >
+            <div class="van-ellipsis">
+              Wenzhou
+            </div>
+          </li>
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item"
+          >
+            <div class="van-ellipsis">
+              Indiana
+            </div>
+          </li>
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item"
+          >
+            <div class="van-ellipsis">
+              Maine
+            </div>
+          </li>
+        </ul>
+      </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 class="van-picker">
     <div class="van-picker__toolbar">
@@ -380,7 +462,7 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-picker-column__item"
           >
             <div class="van-ellipsis">
-              Georqia
+              Wenzhou
             </div>
           </li>
         </ul>