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 + +``` + +```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 + +``` + +```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 @@