docs: update Vant 4

docs(Form): fix Picker demo
chore: fix Cell usage
2026-07-13 17:21:07 +08:00 · 2022-02-20 21:02:09 +08:00 · 2022-02-20 20:54:16 +08:00 · 2022-02-20 20:48:20 +08:00 · 2022-02-20 20:47:01 +08:00 · 2022-02-20 20:36:04 +08:00
70 changed files with 211 additions and 2646 deletions
--- a/README.md
+++ b/README.md
@ -80,7 +80,7 @@ See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).

 Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

-Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
+Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

 ## Official Ecosystem

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -84,7 +84,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手

 Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

-Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
+Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

 ## 官方生态

--- a/packages/vant/docs/markdown/changelog-v4.zh-CN.md
+++ b/packages/vant/docs/markdown/changelog-v4.zh-CN.md
@ -1,42 +1,3 @@
 # 更新日志

 ## 更新内容
-
-### unreleased
-
-`2022-01-17`
-
-**Feature**
-
- ConfigProvider: 新增 `theme` 属性，用于开启深色模式
- ConfigProvider: 新增 `ConfigProviderTheme` 类型
-
-**Style**
-
-以下组件的默认色值调整为 `--van-primary-color`：
-
- Calendar
- Cascader
- Dialog
- DropdownMenu
- IndexBar
- Sidebar
- Steps
- Tabs
-
-其他：
-
- ActionBar: 调整 `--van-action-bar-icon-text-color` 变量的默认值为 `--van-text-color`
- AddressEdit: 提交按钮调整为 `primary` 类型
- Button: 默认圆角大小从 `2px` 调整为 `4px`
- Button: 默认按钮的边框颜色调整为 `--van-gray-4`
- Button: 调整 `font-smoothing`，默认使用粗体文字
- Card: 调整 `--van-card-background` 变量的默认值为 `--van-background`
- Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
- Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
- Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
- Switch: 移除 `--van-switch-border` 变量
- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`
- Switch: 调整 `--van-switch-background` 变量的默认值为 `rgba(120, 120, 128, 0.16)`
- Tabbar: 调整 `--van-tabbar-item-text-color` 变量的默认值为 `--van-text-color`
- GridItem: 调整 `--van-grid-item-text-color` 变量的默认值为 `--van-text-color`
--- a/packages/vant/docs/markdown/changelog.en-US.md
+++ b/packages/vant/docs/markdown/changelog.en-US.md
--- a/packages/vant/docs/markdown/changelog.zh-CN.md
+++ b/packages/vant/docs/markdown/changelog.zh-CN.md
--- a/packages/vant/docs/markdown/home.en-US.md
+++ b/packages/vant/docs/markdown/home.en-US.md
@ -30,7 +30,7 @@ See in [Quickstart](#/en-US/quickstart).

 Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

-Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
+Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).

 ## Links

--- a/packages/vant/docs/markdown/home.zh-CN.md
+++ b/packages/vant/docs/markdown/home.zh-CN.md
@ -14,7 +14,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源

 ### 版本提示

-你当前浏览的是 **Vant 3.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。
+你当前浏览的是 **Vant 4.x 版本** 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 [Vant 2 文档](https://vant-contrib.gitee.io/vant/v2)。

 ### 特性

@ -40,7 +40,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源

 Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

-Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
+Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

 ## 链接

--- a/packages/vant/src/address-edit/AddressEditDetail.tsx
+++ b/packages/vant/src/address-edit/AddressEditDetail.tsx
@ -41,17 +41,6 @@ export default defineComponent({
      emit('input', `${express.address || ''} ${express.name || ''}`.trim());
    };

-    const renderSearchTitle = (express: AddressEditSearchItem) => {
-      if (express.name) {
-        const text = express.name.replace(
-          props.value!,
-          `<span class=${bem('keyword')}>${props.value}</span>`
-        );
-
-        return <div innerHTML={text} />;
-      }
-    };
-
    const renderSearchResult = () => {
      if (!showSearchResult()) {
        return;
@ -60,12 +49,10 @@ export default defineComponent({
      const { searchResult } = props;
      return searchResult!.map((express) => (
        <Cell
-          v-slots={{
-            title: () => renderSearchTitle(express),
-          }}
          clickable
-          key={express.name + express.address}
+          key={(express.name || '') + (express.address || '')}
          icon="location-o"
+          title={express.name}
          label={express.address}
          class={bem('search-item')}
          border={false}
--- a/packages/vant/src/address-edit/index.less
+++ b/packages/vant/src/address-edit/index.less
@ -33,13 +33,7 @@ body {
    font-size: var(--van-address-edit-button-font-size);
  }

-  &-detail {
-    &__search-item {
-      background: var(--van-gray-2);
-    }
-
-    &__keyword {
-      color: var(--van-danger-color);
-    }
+  &-detail__search-item {
+    background: var(--van-gray-2);
  }
 }
--- a/packages/vant/src/address-edit/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/address-edit/test/snapshots/index.spec.ts.snap
--- a/packages/vant/src/address-edit/test/index.spec.ts
+++ b/packages/vant/src/address-edit/test/index.spec.ts
@ -1,4 +1,4 @@
-import { AddressEdit } from '..';
+import { AddressEdit, AddressEditInstance } from '..';
 import { areaList } from '../../area/demo/area-simple';
 import { mount, later, trigger } from '../../../test';
 import { submitForm } from '../../form/test/shared';
@ -58,7 +58,7 @@ test('should allow to custom validator with validator prop', async () => {
  const wrapper = mount(AddressEdit, {
    props: {
      areaList,
-      validator: (key, value) => `foo ${key}${value}`,
+      validator: (key: string, value: string) => `foo ${key}${value}`,
    },
  });

@ -116,9 +116,9 @@ test('should emit changeDetail event after changing address detail', () => {
  const wrapper = mount(AddressEdit);
  const field = wrapper.findAll('.van-field__control')[3];

-  field.element.value = '123';
+  (field.element as HTMLInputElement).value = '123';
  field.trigger('input');
-  expect(wrapper.emitted('changeDetail')[0][0]).toEqual('123');
+  expect(wrapper.emitted('changeDetail')).toEqual([['123']]);
 });

 test('should show search result after focusing to address detail', async () => {
@ -134,25 +134,21 @@ test('should show search result after focusing to address detail', async () => {
  });

  const field = wrapper.findAll('.van-field__control')[3];
-  const input = field.element;
+  const input = field.element as HTMLInputElement;
  await field.trigger('focus');

  const items = wrapper.findAll('.van-icon-location-o');
-  items[0].element.parentNode.click();
+  (items[0].element.parentNode as HTMLElement).click();
  await later();
  expect(input.value).toEqual('address1 name1');

-  items[1].element.parentNode.click();
+  (items[1].element.parentNode as HTMLElement).click();
  await later();
  expect(input.value).toEqual('name2');

-  items[2].element.parentNode.click();
+  (items[2].element.parentNode as HTMLElement).click();
  await later();
  expect(input.value).toEqual('address2');
-
-  await field.trigger('blur');
-  await later(150);
-  expect(wrapper.vm.detailFocused).toBeFalsy();
 });

 test('should emit delete event after clicking the delete button', async () => {
@ -173,7 +169,7 @@ test('should update address detail after calling the setAddressDetail method', a

  expect(textarea.element.value).toEqual('address detail');

-  vm.setAddressDetail('test');
+  (vm as AddressEditInstance).setAddressDetail('test');
  await later();
  expect(textarea.element.value).toEqual('test');
 });
@ -187,7 +183,7 @@ test('should emit clickArea event after clicking the area field', () => {

  const field = wrapper.findAll('.van-field')[2];
  field.trigger('click');
-  expect(wrapper.emitted('clickArea')[0]).toBeTruthy();
+  expect(wrapper.emitted('clickArea')).toHaveLength(1);
 });

 test('should limit tel maxlength when using tel-maxlength prop', () => {
@ -198,8 +194,9 @@ test('should limit tel maxlength when using tel-maxlength prop', () => {
  });

  const telInput = wrapper.find('input[type="tel"]');
-  telInput.element.value = '123456';
+  const inputEl = telInput.element as HTMLInputElement;
+  inputEl.value = '123456';
  trigger(telInput, 'input');

-  expect(telInput.element.value).toEqual('1234');
+  expect(inputEl.value).toEqual('1234');
 });
--- a/packages/vant/src/address-edit/types.ts
+++ b/packages/vant/src/address-edit/types.ts
@ -2,8 +2,8 @@ import type { ComponentPublicInstance } from 'vue';
 import type { AddressEditProps } from './AddressEdit';

 export type AddressEditSearchItem = {
-  name: string;
-  address: string;
+  name?: string;
+  address?: string;
 };

 export type AddressEditInfo = {
--- a/packages/vant/src/address-list/AddressList.tsx
+++ b/packages/vant/src/address-list/AddressList.tsx
@ -90,7 +90,7 @@ export default defineComponent({
        <Button
          round
          block
-          type="danger"
+          type="primary"
          text={props.addButtonText || t('add')}
          class={bem('add')}
          onClick={() => emit('add')}
--- a/packages/vant/src/address-list/AddressListItem.tsx
+++ b/packages/vant/src/address-list/AddressListItem.tsx
@ -57,7 +57,7 @@ export default defineComponent({
      }
      if (props.address.isDefault && props.defaultTagText) {
        return (
-          <Tag type="danger" round class={bem('tag')}>
+          <Tag type="primary" round class={bem('tag')}>
            {props.defaultTagText}
          </Tag>
        );
@ -93,11 +93,11 @@ export default defineComponent({
        <div class={bem({ disabled })} onClick={onClick}>
          <Cell
            v-slots={{
-              value: renderContent,
+              title: renderContent,
              'right-icon': renderRightIcon,
            }}
            border={false}
-            valueClass={bem('value')}
+            titleClass={bem('title')}
          />
          {slots.bottom?.(extend({}, props.address, { disabled }))}
        </div>
--- a/packages/vant/src/address-list/README.md
+++ b/packages/vant/src/address-list/README.md
@ -148,5 +148,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-address-list-item-disabled-text-color | _var(--van-text-color-3)_ | - |
 | --van-address-list-item-font-size | _13px_ | - |
 | --van-address-list-item-line-height | _var(--van-line-height-sm)_ | - |
-| --van-address-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
+| --van-address-list-radio-color | _var(--van-primary-color)_ | - |
 | --van-address-list-edit-icon-size | _20px_ | - |
--- a/packages/vant/src/address-list/README.zh-CN.md
+++ b/packages/vant/src/address-list/README.zh-CN.md
@ -148,5 +148,5 @@ import type { AddressListProps, AddressListAddress } from 'vant';
 | --van-address-list-item-disabled-text-color | _var(--van-text-color-3)_ | - |
 | --van-address-list-item-font-size | _13px_ | - |
 | --van-address-list-item-line-height | _var(--van-line-height-sm)_ | - |
-| --van-address-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
+| --van-address-list-radio-color | _var(--van-primary-color)_ | - |
 | --van-address-list-edit-icon-size | _20px_ | - |
--- a/packages/vant/src/address-list/index.less
+++ b/packages/vant/src/address-list/index.less
@ -10,7 +10,7 @@ body {
  --van-address-list-item-disabled-text-color: var(--van-text-color-3);
  --van-address-list-item-font-size: 13px;
  --van-address-list-item-line-height: var(--van-line-height-sm);
-  --van-address-list-item-radio-icon-color: var(--van-danger-color);
+  --van-address-list-radio-color: var(--van-primary-color);
  --van-address-list-edit-icon-size: 20px;
 }

@ -53,7 +53,7 @@ body {
    margin-bottom: var(--van-padding-sm);
  }

-  &__value {
+  &__title {
    padding-right: 44px;
  }

@ -104,7 +104,7 @@ body {
  }

  .van-radio__icon--checked .van-icon {
-    background-color: var(--van-address-list-item-radio-icon-color);
-    border-color: var(--van-address-list-item-radio-icon-color);
+    background-color: var(--van-address-list-radio-color);
+    border-color: var(--van-address-list-radio-color);
  }
 }
--- a/packages/vant/src/address-list/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/address-list/test/snapshots/demo.spec.ts.snap
@ -8,7 +8,7 @@ exports[`should render demo and match snapshot 1`] = `
    >
      <div class="van-address-item">
        <div class="van-cell van-cell--borderless">
-          <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div class="van-cell__value van-address-item__value">
            <div role="radio"
                 class="van-radio"
                 tabindex="0"
@ -24,7 +24,7 @@ exports[`should render demo and match snapshot 1`] = `
                <div class="van-address-item__name">
                  John Snow 13000000000
                  <transition-stub class="van-address-item__tag">
-                    <span class="van-tag van-tag--round van-tag--danger">
+                    <span class="van-tag van-tag--round van-tag--primary">
                      Default
                    </span>
                  </transition-stub>
@ -41,7 +41,7 @@ exports[`should render demo and match snapshot 1`] = `
      </div>
      <div class="van-address-item">
        <div class="van-cell van-cell--borderless">
-          <div class="van-cell__value van-cell__value--alone van-address-item__value">
+          <div class="van-cell__value van-address-item__value">
            <div role="radio"
                 class="van-radio"
                 tabindex="0"
@ -73,7 +73,7 @@ exports[`should render demo and match snapshot 1`] = `
    </div>
    <div class="van-address-item van-address-item--disabled">
      <div class="van-cell van-cell--borderless">
-        <div class="van-cell__value van-cell__value--alone van-address-item__value">
+        <div class="van-cell__value van-address-item__value">
          <div class="van-address-item__name">
            Tywin 1320000000
          </div>
@ -87,7 +87,7 @@ exports[`should render demo and match snapshot 1`] = `
    </div>
    <div class="van-address-list__bottom van-safe-area-bottom">
      <button type="button"
-              class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
+              class="van-button van-button--primary van-button--normal van-button--block van-button--round van-address-list__add"
      >
        <div class="van-button__content">
          <span class="van-button__text">
--- a/packages/vant/src/address-list/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/address-list/test/snapshots/index.spec.ts.snap
@ -8,7 +8,7 @@ exports[`should render tag slot correctly 1`] = `
  </div>
  <div class="van-address-list__bottom van-safe-area-bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-address-list__add"
    >
      <div class="van-button__content">
        <span class="van-button__text">
--- a/packages/vant/src/card/Card.tsx
+++ b/packages/vant/src/card/Card.tsx
@ -54,7 +54,7 @@ export default defineComponent({
            {slots.tag ? (
              slots.tag()
            ) : (
-              <Tag mark type="danger">
+              <Tag mark type="primary">
                {props.tag}
              </Tag>
            )}
--- a/packages/vant/src/card/README.md
+++ b/packages/vant/src/card/README.md
@ -57,8 +57,8 @@ Use slot to custom content.
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
  <template #tags>
-    <van-tag plain type="danger">Tag</van-tag>
-    <van-tag plain type="danger">Tag</van-tag>
+    <van-tag plain type="primary">Tag</van-tag>
+    <van-tag plain type="primary">Tag</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">Button</van-button>
--- a/packages/vant/src/card/README.zh-CN.md
+++ b/packages/vant/src/card/README.zh-CN.md
@ -59,8 +59,8 @@ app.use(Card);
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
  <template #tags>
-    <van-tag plain type="danger">标签</van-tag>
-    <van-tag plain type="danger">标签</van-tag>
+    <van-tag plain type="primary">标签</van-tag>
+    <van-tag plain type="primary">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
--- a/packages/vant/src/card/demo/index.vue
+++ b/packages/vant/src/card/demo/index.vue
@ -51,10 +51,10 @@ const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
      :thumb="imageURL"
    >
      <template #tags>
-        <van-tag plain type="danger" style="margin-right: 5px">
+        <van-tag plain type="primary" style="margin-right: 5px">
          {{ t('tag') }}
        </van-tag>
-        <van-tag plain type="danger">{{ t('tag') }}</van-tag>
+        <van-tag plain type="primary">{{ t('tag') }}</van-tag>
      </template>

      <template #footer>
--- a/packages/vant/src/card/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/card/test/snapshots/demo.spec.ts.snap
@ -68,7 +68,7 @@ exports[`should render demo and match snapshot 1`] = `
        </div>
        <div class="van-card__tag">
          <transition-stub>
-            <span class="van-tag van-tag--mark van-tag--danger">
+            <span class="van-tag van-tag--mark van-tag--primary">
              Tag
            </span>
          </transition-stub>
@ -135,12 +135,12 @@ exports[`should render demo and match snapshot 1`] = `
            Description
          </div>
          <transition-stub style="margin-right: 5px;">
-            <span class="van-tag van-tag--plain van-tag--danger">
+            <span class="van-tag van-tag--plain van-tag--primary">
              Tag
            </span>
          </transition-stub>
          <transition-stub>
-            <span class="van-tag van-tag--plain van-tag--danger">
+            <span class="van-tag van-tag--plain van-tag--primary">
              Tag
            </span>
          </transition-stub>
--- a/packages/vant/src/cell/Cell.tsx
+++ b/packages/vant/src/cell/Cell.tsx
@ -93,9 +93,8 @@ export default defineComponent({
      const hasValue = slot || isDef(props.value);

      if (hasValue) {
-        const hasTitle = slots.title || isDef(props.title);
        return (
-          <div class={[bem('value', { alone: !hasTitle }), props.valueClass]}>
+          <div class={[bem('value'), props.valueClass]}>
            {slot ? slot() : <span>{props.value}</span>}
          </div>
        );
--- a/packages/vant/src/cell/README.md
+++ b/packages/vant/src/cell/README.md
@ -104,7 +104,7 @@ app.use(CellGroup);
  <!-- Use the title slot to customize the title -->
  <template #title>
    <span class="custom-title">Title</span>
-    <van-tag type="danger">Tag</van-tag>
+    <van-tag type="primary">Tag</van-tag>
  </template>
 </van-cell>

--- a/packages/vant/src/cell/README.zh-CN.md
+++ b/packages/vant/src/cell/README.zh-CN.md
@ -107,7 +107,7 @@ app.use(CellGroup);
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span class="custom-title">单元格</span>
-    <van-tag type="danger">标签</van-tag>
+    <van-tag type="primary">标签</van-tag>
  </template>
 </van-cell>

--- a/packages/vant/src/cell/demo/index.vue
+++ b/packages/vant/src/cell/demo/index.vue
@ -16,7 +16,6 @@ const t = useTranslate({
    showIcon: '展示图标',
    showArrow: '展示箭头',
    largeSize: '单元格大小',
-    valueOnly: '只设置 value',
    groupTitle: '分组标题',
    insetGrouped: '卡片风格',
    verticalCenter: '垂直居中',
@ -31,7 +30,6 @@ const t = useTranslate({
    showIcon: 'Left Icon',
    showArrow: 'Link',
    largeSize: 'Size',
-    valueOnly: 'Value only',
    groupTitle: 'Group Title',
    insetGrouped: 'Inset Grouped',
    verticalCenter: 'Vertical center',
@ -68,10 +66,6 @@ const t = useTranslate({
    <van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
  </demo-block>

-  <demo-block :title="t('valueOnly')">
-    <van-cell :value="t('content')" />
-  </demo-block>
-
  <demo-block :title="t('showArrow')">
    <van-cell :title="t('cell')" is-link />
    <van-cell :title="t('cell')" is-link :value="t('content')" />
@ -105,7 +99,7 @@ const t = useTranslate({
    <van-cell :value="t('content')" is-link>
      <template #title>
        <span class="custom-title">{{ t('cell') }}</span>
-        <van-tag type="danger">{{ t('tag') }}</van-tag>
+        <van-tag type="primary">{{ t('tag') }}</van-tag>
      </template>
    </van-cell>

--- a/packages/vant/src/cell/index.less
+++ b/packages/vant/src/cell/index.less
@ -62,11 +62,6 @@ body {
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
-
-    &--alone {
-      color: var(--van-text-color);
-      text-align: left;
-    }
  }

  &__left-icon,
--- a/packages/vant/src/cell/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/cell/test/snapshots/demo.spec.ts.snap
@ -108,15 +108,6 @@ exports[`should render demo and match snapshot 1`] = `
    </div>
  </div>
 </div>
-<div>
-  <div class="van-cell">
-    <div class="van-cell__value van-cell__value--alone">
-      <span>
-        Content
-      </span>
-    </div>
-  </div>
-</div>
 <div>
  <div class="van-cell van-cell--clickable"
       role="button"
@ -237,7 +228,7 @@ exports[`should render demo and match snapshot 1`] = `
        Cell title
      </span>
      <transition-stub>
-        <span class="van-tag van-tag--danger">
+        <span class="van-tag van-tag--primary">
          Tag
        </span>
      </transition-stub>
--- a/packages/vant/src/cell/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/cell/test/snapshots/index.spec.ts.snap
@ -47,7 +47,7 @@ exports[`should render title slot correctly 1`] = `

 exports[`should render value slot correctly 1`] = `
 <div class="van-cell">
-  <div class="van-cell__value van-cell__value--alone">
+  <div class="van-cell__value">
    Custom Value
  </div>
 </div>
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@ -216,7 +216,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-font-size-sm: 12px;
 --van-font-size-md: 14px;
 --van-font-size-lg: 16px;
--van-font-bold: 500;
+--van-font-bold: 600;
 --van-line-height-xs: 14px;
 --van-line-height-sm: 18px;
 --van-line-height-md: 20px;
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@ -218,7 +218,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-font-size-sm: 12px;
 --van-font-size-md: 14px;
 --van-font-size-lg: 16px;
--van-font-bold: 500;
+--van-font-bold: 600;
 --van-line-height-xs: 14px;
 --van-line-height-sm: 18px;
 --van-line-height-md: 20px;
--- a/packages/vant/src/contact-card/ContactCard.tsx
+++ b/packages/vant/src/contact-card/ContactCard.tsx
@ -43,13 +43,13 @@ export default defineComponent({

    return () => (
      <Cell
-        v-slots={{ value: renderContent }}
+        v-slots={{ title: renderContent }}
        center
        icon={props.type === 'edit' ? 'contact' : 'add-square'}
        class={bem([props.type])}
        border={false}
        isLink={props.editable}
-        valueClass={bem('value')}
+        titleClass={bem('title')}
        onClick={onClick}
      />
    );
--- a/packages/vant/src/contact-card/README.md
+++ b/packages/vant/src/contact-card/README.md
@ -109,4 +109,4 @@ The component provides the following CSS variables, which can be used to customi
 | --van-contact-card-padding | _var(--van-padding-md)_ | - |
 | --van-contact-card-add-icon-size | _40px_ | - |
 | --van-contact-card-add-icon-color | _var(--van-primary-color)_ | - |
-| --van-contact-card-value-line-height | _var(--van-line-height-md)_ | - |
+| --van-contact-card-title-line-height | _var(--van-line-height-md)_ | - |
--- a/packages/vant/src/contact-card/README.zh-CN.md
+++ b/packages/vant/src/contact-card/README.zh-CN.md
@ -103,4 +103,4 @@ import type { ContactCardType, ContactCardProps } from 'vant';
 | --van-contact-card-padding           | _var(--van-padding-md)_     | -    |
 | --van-contact-card-add-icon-size     | _40px_                      | -    |
 | --van-contact-card-add-icon-color    | _var(--van-primary-color)_  | -    |
-| --van-contact-card-value-line-height | _var(--van-line-height-md)_ | -    |
+| --van-contact-card-title-line-height | _var(--van-line-height-md)_ | -    |
--- a/packages/vant/src/contact-card/index.less
+++ b/packages/vant/src/contact-card/index.less
@ -2,15 +2,15 @@ body {
  --van-contact-card-padding: var(--van-padding-md);
  --van-contact-card-add-icon-size: 40px;
  --van-contact-card-add-icon-color: var(--van-primary-color);
-  --van-contact-card-value-line-height: var(--van-line-height-md);
+  --van-contact-card-title-line-height: var(--van-line-height-md);
 }

 .van-contact-card {
  padding: var(--van-contact-card-padding);

-  &__value {
+  &__title {
    margin-left: 5px;
-    line-height: var(--van-contact-card-value-line-height);
+    line-height: var(--van-contact-card-title-line-height);
  }

  &--add {
--- a/packages/vant/src/contact-card/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/contact-card/test/snapshots/demo.spec.ts.snap
@ -8,7 +8,7 @@ exports[`should render demo and match snapshot 1`] = `
  >
    <i class="van-badge__wrapper van-icon van-icon-add-square van-cell__left-icon">
    </i>
-    <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+    <div class="van-cell__value van-contact-card__value">
      Add contact
    </div>
    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
@ -22,7 +22,7 @@ exports[`should render demo and match snapshot 1`] = `
  >
    <i class="van-badge__wrapper van-icon van-icon-contact van-cell__left-icon">
    </i>
-    <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+    <div class="van-cell__value van-contact-card__value">
      <div>
        Name：John Snow
      </div>
@ -38,7 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
    <i class="van-badge__wrapper van-icon van-icon-contact van-cell__left-icon">
    </i>
-    <div class="van-cell__value van-cell__value--alone van-contact-card__value">
+    <div class="van-cell__value van-contact-card__value">
      <div>
        Name：John Snow
      </div>
--- a/packages/vant/src/contact-edit/ContactEdit.tsx
+++ b/packages/vant/src/contact-edit/ContactEdit.tsx
@ -70,7 +70,7 @@ export default defineComponent({
        <Button
          block
          round
-          type="danger"
+          type="primary"
          text={t('save')}
          class={bem('button')}
          loading={props.isSaving}
--- a/packages/vant/src/contact-edit/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/contact-edit/test/snapshots/demo.spec.ts.snap
@ -60,7 +60,7 @@ exports[`should render demo and match snapshot 1`] = `
    </div>
    <div class="van-contact-edit__buttons">
      <button type="submit"
-              class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-edit__button"
+              class="van-button van-button--primary van-button--normal van-button--block van-button--round van-contact-edit__button"
      >
        <div class="van-button__content">
          <span class="van-button__text">
--- a/packages/vant/src/contact-list/ContactList.tsx
+++ b/packages/vant/src/contact-list/ContactList.tsx
@ -63,7 +63,7 @@ export default defineComponent({

        if (item.isDefault && props.defaultTagText) {
          nodes.push(
-            <Tag type="danger" round class={bem('item-tag')}>
+            <Tag type="primary" round class={bem('item-tag')}>
              {props.defaultTagText}
            </Tag>
          );
@ -76,14 +76,14 @@ export default defineComponent({
        <Cell
          v-slots={{
            icon: renderEditIcon,
-            value: renderContent,
+            title: renderContent,
            'right-icon': renderRightIcon,
          }}
          key={item.id}
          isLink
          center
          class={bem('item')}
-          valueClass={bem('item-value')}
+          titleClass={bem('item-title')}
          onClick={onClick}
        />
      );
@ -98,7 +98,7 @@ export default defineComponent({
          <Button
            round
            block
-            type="danger"
+            type="primary"
            class={bem('add')}
            text={props.addText || t('addContact')}
            onClick={() => emit('add')}
--- a/packages/vant/src/contact-list/README.md
+++ b/packages/vant/src/contact-list/README.md
@ -113,5 +113,5 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | --van-contact-list-edit-icon-size | _16px_ | - |
 | --van-contact-list-add-button-z-index | _999_ | - |
+| --van-contact-list-radio-color | _var(--van-primary-color)_ | - |
 | --van-contact-list-item-padding | _var(--van-padding-md)_ | - |
-| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | - |
--- a/packages/vant/src/contact-list/README.zh-CN.md
+++ b/packages/vant/src/contact-list/README.zh-CN.md
@ -109,9 +109,9 @@ import type { ContactListItem, ContactListProps } from 'vant';

 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

-| 名称                                     | 默认值                    | 描述 |
-| ---------------------------------------- | ------------------------- | ---- |
-| --van-contact-list-edit-icon-size        | _16px_                    | -    |
-| --van-contact-list-add-button-z-index    | _999_                     | -    |
-| --van-contact-list-item-padding          | _var(--van-padding-md)_   | -    |
-| --van-contact-list-item-radio-icon-color | _var(--van-danger-color)_ | -    |
+| 名称                                  | 默认值                     | 描述 |
+| ------------------------------------- | -------------------------- | ---- |
+| --van-contact-list-edit-icon-size     | _16px_                     | -    |
+| --van-contact-list-add-button-z-index | _999_                      | -    |
+| --van-contact-list-radio-color        | _var(--van-primary-color)_ | -    |
+| --van-contact-list-item-padding       | _var(--van-padding-md)_    | -    |
--- a/packages/vant/src/contact-list/index.less
+++ b/packages/vant/src/contact-list/index.less
@ -1,8 +1,8 @@
 body {
  --van-contact-list-edit-icon-size: 16px;
  --van-contact-list-add-button-z-index: 999;
+  --van-contact-list-radio-color: var(--van-primary-color);
  --van-contact-list-item-padding: var(--van-padding-md);
-  --van-contact-list-item-radio-icon-color: var(--van-danger-color);
 }

 .van-contact-list {
@ -14,7 +14,7 @@ body {
    padding: var(--van-contact-list-item-padding);
  }

-  &__item-value {
+  &__item-title {
    display: flex;
    align-items: center;
    padding-right: var(--van-padding-xl);
@ -42,8 +42,8 @@ body {

  &__radio {
    .van-radio__icon--checked .van-icon {
-      background-color: var(--van-contact-list-item-radio-icon-color);
-      border-color: var(--van-contact-list-item-radio-icon-color);
+      background-color: var(--van-contact-list-radio-color);
+      border-color: var(--van-contact-list-radio-color);
    }
  }

--- a/packages/vant/src/contact-list/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/contact-list/test/snapshots/demo.spec.ts.snap
@ -12,10 +12,10 @@ exports[`should render demo and match snapshot 1`] = `
      >
        <i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
        </i>
-        <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
+        <div class="van-cell__value van-contact-list__item-value">
          John Snow，13000000000
          <transition-stub class="van-contact-list__item-tag">
-            <span class="van-tag van-tag--round van-tag--danger">
+            <span class="van-tag van-tag--round van-tag--primary">
              default
            </span>
          </transition-stub>
@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
      >
        <i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
        </i>
-        <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
+        <div class="van-cell__value van-contact-list__item-value">
          Ned Stark，1310000000
        </div>
        <div role="radio"
@ -58,7 +58,7 @@ exports[`should render demo and match snapshot 1`] = `
    </div>
    <div class="van-contact-list__bottom van-safe-area-bottom">
      <button type="button"
-              class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
+              class="van-button van-button--primary van-button--normal van-button--block van-button--round van-contact-list__add"
      >
        <div class="van-button__content">
          <span class="van-button__text">
--- a/packages/vant/src/contact-list/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/contact-list/test/snapshots/index.spec.ts.snap
@ -11,10 +11,10 @@ exports[`should render ContactList correctly 1`] = `
    >
      <i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
      </i>
-      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
+      <div class="van-cell__value van-contact-list__item-value">
        jack，12345678
        <transition-stub class="van-contact-list__item-tag">
-          <span class="van-tag van-tag--round van-tag--danger">
+          <span class="van-tag van-tag--round van-tag--primary">
            默认
          </span>
        </transition-stub>
@ -35,7 +35,7 @@ exports[`should render ContactList correctly 1`] = `
  </div>
  <div class="van-contact-list__bottom van-safe-area-bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-contact-list__add"
    >
      <div class="van-button__content">
        <span class="van-button__text">
--- a/packages/vant/src/coupon-list/CouponList.tsx
+++ b/packages/vant/src/coupon-list/CouponList.tsx
@ -121,7 +121,7 @@ export default defineComponent({
            />
            <Button
              plain
-              type="danger"
+              type="primary"
              class={bem('exchange')}
              text={props.exchangeButtonText || t('exchange')}
              loading={props.exchangeButtonLoading}
@ -215,7 +215,7 @@ export default defineComponent({
            v-show={props.showCloseButton}
            round
            block
-            type="danger"
+            type="primary"
            class={bem('close')}
            text={props.closeButtonText || t('close')}
            onClick={() => emit('change', -1)}
--- a/packages/vant/src/coupon-list/README.md
+++ b/packages/vant/src/coupon-list/README.md
@ -181,7 +181,7 @@ The component provides the following CSS variables, which can be used to customi
 | --van-coupon-disabled-text-color | _var(--van-text-color-2)_ | - |
 | --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
 | --van-coupon-description-border-color | _var(--van-border-color)_ | - |
-| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
+| --van-coupon-checkbox-color | _var(--van-danger-color)_ | - |
 | --van-coupon-list-background | _var(--van-background)_ | - |
 | --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
 | --van-coupon-list-exchange-button-height | _32px_ | - |
--- a/packages/vant/src/coupon-list/README.zh-CN.md
+++ b/packages/vant/src/coupon-list/README.zh-CN.md
@ -183,7 +183,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
 | --van-coupon-disabled-text-color | _var(--van-text-color-2)_ | - |
 | --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
 | --van-coupon-description-border-color | _var(--van-border-color)_ | - |
-| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
+| --van-coupon-checkbox-color | _var(--van-danger-color)_ | - |
 | --van-coupon-list-background | _var(--van-background)_ | - |
 | --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
 | --van-coupon-list-exchange-button-height | _32px_ | - |
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@ -22,7 +22,7 @@ body {
      padding-left: var(--van-padding-sm);
      line-height: 34px;
      background: var(--van-background);
-      border-radius: 17px;
+      border-radius: var(--van-radius-max);

      &::placeholder {
        color: var(--van-text-color-3);
--- a/packages/vant/src/coupon-list/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/snapshots/index.spec.ts.snap
@ -4,7 +4,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
 <div class="van-coupon-list">
  <div class="van-coupon-list__exchange-bar">
    <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input type="text"
                 id="van-field-input"
@ -15,7 +15,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
      </div>
    </div>
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
+            class="van-button van-button--primary van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
            disabled
    >
      <div class="van-button__content">
@ -280,7 +280,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
  </div>
  <div class="van-coupon-list__bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-coupon-list__close"
    >
      <div class="van-button__content">
        <span class="van-button__text">
@ -296,7 +296,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
 <div class="van-coupon-list">
  <div class="van-coupon-list__exchange-bar">
    <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input type="text"
                 id="van-field-input"
@ -307,7 +307,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
      </div>
    </div>
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
+            class="van-button van-button--primary van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
            disabled
    >
      <div class="van-button__content">
@ -392,7 +392,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
  </div>
  <div class="van-coupon-list__bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-coupon-list__close"
    >
      <div class="van-button__content">
        <span class="van-button__text">
@ -408,7 +408,7 @@ exports[`should render list-footer slot correctly 1`] = `
 <div class="van-coupon-list">
  <div class="van-coupon-list__exchange-bar">
    <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input type="text"
                 id="van-field-input"
@ -419,7 +419,7 @@ exports[`should render list-footer slot correctly 1`] = `
      </div>
    </div>
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
+            class="van-button van-button--primary van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
            disabled
    >
      <div class="van-button__content">
@ -506,7 +506,7 @@ exports[`should render list-footer slot correctly 1`] = `
  </div>
  <div class="van-coupon-list__bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-coupon-list__close"
    >
      <div class="van-button__content">
        <span class="van-button__text">
@ -522,7 +522,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
 <div class="van-coupon-list">
  <div class="van-coupon-list__exchange-bar">
    <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input type="text"
                 id="van-field-input"
@ -533,7 +533,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
      </div>
    </div>
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
+            class="van-button van-button--primary van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
            disabled
    >
      <div class="van-button__content">
@ -608,7 +608,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
  </div>
  <div class="van-coupon-list__bottom">
    <button type="button"
-            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
+            class="van-button van-button--primary van-button--normal van-button--block van-button--round van-coupon-list__close"
    >
      <div class="van-button__content">
        <span class="van-button__text">
--- a/packages/vant/src/coupon/index.less
+++ b/packages/vant/src/coupon/index.less
@ -10,14 +10,14 @@ body {
  --van-coupon-radius: var(--van-radius-lg);
  --van-coupon-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  --van-coupon-head-width: 96px;
-  --van-coupon-amount-color: var(--van-danger-color);
+  --van-coupon-amount-color: var(--van-primary-color);
  --van-coupon-amount-font-size: 30px;
  --van-coupon-currency-font-size: 40%;
  --van-coupon-name-font-size: var(--van-font-size-md);
  --van-coupon-disabled-text-color: var(--van-text-color-2);
  --van-coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
  --van-coupon-description-border-color: var(--van-border-color);
-  --van-coupon-corner-checkbox-icon-color: var(--van-danger-color);
+  --van-coupon-checkbox-color: var(--van-primary-color);
 }

 .van-coupon {
@ -62,7 +62,6 @@ body {
    .ellipsis();

    span {
-      font-weight: normal;
      font-size: var(--van-coupon-currency-font-size);

      &:not(:empty) {
@ -85,7 +84,7 @@ body {

  &__name {
    margin-bottom: 10px;
-    font-weight: bold;
+    font-weight: var(--van-font-bold);
    font-size: var(--van-coupon-name-font-size);
    line-height: var(--van-line-height-md);
  }
@ -101,8 +100,8 @@ body {
    bottom: 0;

    .van-checkbox__icon--checked .van-icon {
-      background-color: var(--van-coupon-corner-checkbox-icon-color);
-      border-color: var(--van-coupon-corner-checkbox-icon-color);
+      background-color: var(--van-coupon-checkbox-color);
+      border-color: var(--van-coupon-checkbox-color);
    }
  }

--- a/packages/vant/src/empty/README.md
+++ b/packages/vant/src/empty/README.md
@ -57,7 +57,7 @@ Use the image prop to display different placeholder images.

 ```html
 <van-empty description="Description">
-  <van-button round type="danger" class="bottom-button">Button</van-button>
+  <van-button round type="primary" class="bottom-button">Button</van-button>
 </van-empty>

 <style>
--- a/packages/vant/src/empty/README.zh-CN.md
+++ b/packages/vant/src/empty/README.zh-CN.md
@ -62,7 +62,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下

 ```html
 <van-empty description="描述文字">
-  <van-button round type="danger" class="bottom-button">按钮</van-button>
+  <van-button round type="primary" class="bottom-button">按钮</van-button>
 </van-empty>

 <style>
--- a/packages/vant/src/empty/demo/index.vue
+++ b/packages/vant/src/empty/demo/index.vue
@ -59,7 +59,7 @@ const active = ref('error');

  <demo-block :title="t('bottomContent')">
    <van-empty :description="t('description')">
-      <van-button round type="danger" class="bottom-button">
+      <van-button round type="primary" class="bottom-button">
        {{ t('button') }}
      </van-button>
    </van-empty>
--- a/packages/vant/src/empty/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/empty/test/snapshots/demo.spec.ts.snap
@ -113,7 +113,7 @@ exports[`should render demo and match snapshot 1`] = `
    </p>
    <div class="van-empty__bottom">
      <button type="button"
-              class="van-button van-button--danger van-button--normal van-button--round bottom-button"
+              class="van-button van-button--primary van-button--normal van-button--round bottom-button"
      >
        <div class="van-button__content">
          <span class="van-button__text">
--- a/packages/vant/src/field/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/field/test/snapshots/demo.spec.ts.snap
@ -345,7 +345,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-cell-group van-cell-group--inset">
    <div class="van-cell van-field">
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <textarea id="van-field-input"
                    rows="1"
--- a/packages/vant/src/field/test/snapshots/index.spec.js.snap
+++ b/packages/vant/src/field/test/snapshots/index.spec.js.snap
@ -23,7 +23,7 @@ exports[`should render error-message slot correctly 1`] = `

 exports[`should render extra slot correctly 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone van-field__value">
+  <div class="van-cell__value van-field__value">
    <div class="van-field__body">
      <input type="text"
             id="van-field-input"
@ -49,7 +49,7 @@ exports[`should render label slot correctly 1`] = `

 exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone van-field__value">
+  <div class="van-cell__value van-field__value">
    <div class="van-field__body">
      <textarea id="van-field-input"
                class="van-field__control"
@ -72,7 +72,7 @@ exports[`should render word limit correctly 1`] = `

 exports[`should render word limit correctly when modelValue is null 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone van-field__value">
+  <div class="van-cell__value van-field__value">
    <div class="van-field__body">
      <input type="text"
             id="van-field-input"
@ -91,7 +91,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `

 exports[`should render word limit correctly when modelValue is undefined 1`] = `
 <div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone van-field__value">
+  <div class="van-cell__value van-field__value">
    <div class="van-field__body">
      <input type="text"
             id="van-field-input"
--- a/packages/vant/src/form/README.md
+++ b/packages/vant/src/form/README.md
@ -342,10 +342,16 @@ export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
-    const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
+    const columns = [
+      { text: 'Delaware', value: 'Delaware' },
+      { text: 'Florida', value: 'Florida' },
+      { text: 'Georqia', value: 'Georqia' },
+      { text: 'Indiana', value: 'Indiana' },
+      { text: 'Maine', value: 'Maine' },
+    ];

    const onConfirm = (value) => {
-      result.value = value;
+      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };

--- a/packages/vant/src/form/README.zh-CN.md
+++ b/packages/vant/src/form/README.zh-CN.md
@ -368,10 +368,16 @@ export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
-    const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'];
+    const columns = [
+      { text: '杭州', value: 'Hangzhou' },
+      { text: '宁波', value: 'Ningbo' },
+      { text: '温州', value: 'Wenzhou' },
+      { text: '绍兴', value: 'Shaoxing' },
+      { text: '湖州', value: 'Huzhou' },
+    ];

    const onConfirm = (value) => {
-      result.value = value;
+      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };

--- a/packages/vant/src/form/demo/FieldTypePicker.vue
+++ b/packages/vant/src/form/demo/FieldTypePicker.vue
@ -1,28 +1,29 @@
 <script setup lang="ts">
 import VanField from '../../field';
 import VanPopup from '../../popup';
-import VanPicker from '../../picker';
+import VanPicker, { PickerConfirmEventParams } from '../../picker';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site/use-translate';
+import { basicColumns } from '../../picker/demo/data';

 const t = useTranslate({
  'zh-CN': {
    picker: '选择器',
    placeholder: '点击选择城市',
-    textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+    textColumns: basicColumns['zh-CN'],
  },
  'en-US': {
    picker: 'Picker',
    placeholder: 'Select city',
-    textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+    textColumns: basicColumns['en-US'],
  },
 });

-const result = ref('');
+const result = ref<string | number>('');
 const showPicker = ref(false);

-const onConfirm = (value: string) => {
-  result.value = value;
+const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => {
+  result.value = selectedOptions[0]?.text || '';
  showPicker.value = false;
 };

--- a/packages/vant/src/form/test/snapshots/events.spec.tsx.snap
+++ b/packages/vant/src/form/test/snapshots/events.spec.tsx.snap
@ -3,7 +3,7 @@
 exports[`should emit failed event when validating failed 1`] = `
 <form class="van-form">
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
@ -17,7 +17,7 @@ exports[`should emit failed event when validating failed 1`] = `
    </div>
  </div>
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
--- a/packages/vant/src/form/test/snapshots/props.spec.tsx.snap
+++ b/packages/vant/src/form/test/snapshots/props.spec.tsx.snap
@ -39,7 +39,7 @@ exports[`should render colon when using colon prop 1`] = `
 exports[`should render error-message-align prop correctly 1`] = `
 <form class="van-form">
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
@ -57,7 +57,7 @@ exports[`should render error-message-align prop correctly 1`] = `
 exports[`should render input-align prop correctly 1`] = `
 <form class="van-form">
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
@ -67,7 +67,7 @@ exports[`should render input-align prop correctly 1`] = `
    </div>
  </div>
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <div class="van-field__control van-field__control--right van-field__control--custom">
          <div>
@ -168,7 +168,7 @@ exports[`should render label-width prop correctly 1`] = `
 exports[`should validate first field when using validate-first prop 1`] = `
 <form class="van-form">
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
@ -182,7 +182,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
    </div>
  </div>
  <div class="van-cell van-field">
-    <div class="van-cell__value van-cell__value--alone van-field__value">
+    <div class="van-cell__value van-field__value">
      <div class="van-field__body">
        <input type="text"
               id="van-field-input"
--- a/packages/vant/src/search/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/search/test/snapshots/demo.spec.ts.snap
@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
          <i class="van-badge__wrapper van-icon van-icon-search">
          </i>
        </div>
-        <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <input type="search"
                   id="van-search-input"
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
            <i class="van-badge__wrapper van-icon van-icon-search">
            </i>
          </div>
-          <div class="van-cell__value van-cell__value--alone van-field__value">
+          <div class="van-cell__value van-field__value">
            <div class="van-field__body">
              <input type="search"
                     id="van-search-input"
@ -59,7 +59,7 @@ exports[`should render demo and match snapshot 1`] = `
          <i class="van-badge__wrapper van-icon van-icon-search">
          </i>
        </div>
-        <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <input type="search"
                   id="van-search-input"
@ -80,7 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
          <i class="van-badge__wrapper van-icon van-icon-search">
          </i>
        </div>
-        <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <input type="search"
                   id="van-search-input"
@ -104,7 +104,7 @@ exports[`should render demo and match snapshot 1`] = `
          <i class="van-badge__wrapper van-icon van-icon-search">
          </i>
        </div>
-        <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <input type="search"
                   id="van-search-input"
@ -130,7 +130,7 @@ exports[`should render demo and match snapshot 1`] = `
          <i class="van-badge__wrapper van-icon van-icon-search">
          </i>
        </div>
-        <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <input type="search"
                   id="van-search-input"
--- a/packages/vant/src/search/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/search/test/snapshots/index.spec.ts.snap
@ -33,7 +33,7 @@ exports[`should render left slot correctly 1`] = `
        <i class="van-badge__wrapper van-icon van-icon-search">
        </i>
      </div>
-      <div class="van-cell__value van-cell__value--alone van-field__value">
+      <div class="van-cell__value van-field__value">
        <div class="van-field__body">
          <input type="search"
                 id="van-search-input"
--- a/packages/vant/src/style/css-variables.less
+++ b/packages/vant/src/style/css-variables.less
@ -46,7 +46,7 @@ body {
  --van-padding-xl: 32px;

  // Font
-  --van-font-bold: 500;
+  --van-font-bold: 600;
  --van-font-size-xs: 10px;
  --van-font-size-sm: 12px;
  --van-font-size-md: 14px;
--- a/packages/vant/src/tree-select/README.md
+++ b/packages/vant/src/tree-select/README.md
@ -249,6 +249,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-tree-select-content-background | _var(--van-background-2)_ | - |
 | --van-tree-select-nav-item-padding | _14px var(--van-padding-sm)_ | - |
 | --van-tree-select-item-height | _48px_ | - |
-| --van-tree-select-item-active-color | _var(--van-danger-color)_ | - |
+| --van-tree-select-item-active-color | _var(--van-primary-color)_ | - |
 | --van-tree-select-item-disabled-color | _var(--van-gray-5)_ | - |
 | --van-tree-select-item-selected-size | _16px_ | - |
--- a/packages/vant/src/tree-select/README.zh-CN.md
+++ b/packages/vant/src/tree-select/README.zh-CN.md
@ -255,6 +255,6 @@ import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';
 | --van-tree-select-content-background  | _var(--van-background-2)_    | -    |
 | --van-tree-select-nav-item-padding    | _14px var(--van-padding-sm)_ | -    |
 | --van-tree-select-item-height         | _48px_                       | -    |
-| --van-tree-select-item-active-color   | _var(--van-danger-color)_    | -    |
+| --van-tree-select-item-active-color   | _var(--van-primary-color)_   | -    |
 | --van-tree-select-item-disabled-color | _var(--van-gray-5)_          | -    |
 | --van-tree-select-item-selected-size  | _16px_                       | -    |
--- a/packages/vant/src/tree-select/index.less
+++ b/packages/vant/src/tree-select/index.less
@ -4,7 +4,7 @@ body {
  --van-tree-select-content-background: var(--van-background-2);
  --van-tree-select-nav-item-padding: 14px var(--van-padding-sm);
  --van-tree-select-item-height: 48px;
-  --van-tree-select-item-active-color: var(--van-danger-color);
+  --van-tree-select-item-active-color: var(--van-primary-color);
  --van-tree-select-item-disabled-color: var(--van-gray-5);
  --van-tree-select-item-selected-size: 16px;
 }
--- a/packages/vant/vant.config.mjs
+++ b/packages/vant/vant.config.mjs
@ -28,7 +28,7 @@ export default {
    },
    locales: {
      'zh-CN': {
-        title: 'Vant 3',
+        title: 'Vant 4',
        subtitle: '（适用于 Vue 3）',
        description: '轻量、可靠的移动端组件库',
        logo: 'https://img.yzcdn.cn/vant/logo.png',
@ -474,7 +474,7 @@ export default {
        ],
      },
      'en-US': {
-        title: 'Vant 3',
+        title: 'Vant 4',
        subtitle: ' (for Vue 3)',
        description: 'Mobile UI Components built on Vue',
        logo: 'https://img.yzcdn.cn/vant/logo.png',
Author	SHA1	Message	Date
chenjiahan	2ceb68e691	docs: update Vant 4	2022-02-20 21:02:09 +08:00
chenjiahan	9cfef027aa	docs(Form): fix Picker demo	2022-02-20 20:54:16 +08:00
chenjiahan	0b4b04eefb	chore: fix Cell usage	2022-02-20 20:48:20 +08:00
chenjiahan	0a7b535533	style(Cell): remove value aline style	2022-02-20 20:47:01 +08:00
chenjiahan	17c2022a6f	chore(AddressEdit): avoid using innerHTML	2022-02-20 20:36:04 +08:00
chenjiahan	cce3ceb5b6	style(TreeSelect): using primary color	2022-02-20 20:24:11 +08:00
chenjiahan	fcd91cb0b0	style(AddressList): using primary color	2022-02-20 20:22:49 +08:00
chenjiahan	3692014070	style(Card): blue tag	2022-02-20 20:19:27 +08:00
chenjiahan	85c5ad6718	style(CouponList): change default color	2022-02-20 20:17:05 +08:00
chenjiahan	bef919c7f0	style: increase font-weight bold	2022-02-20 10:04:39 +08:00
chenjiahan	d39f6a898a	style(ContactList): using primary color	2022-02-18 14:22:25 +08:00
chenjiahan	43ae30026a	style(ContactEdit): adjust submit button	2022-02-18 14:11:54 +08:00
chenjiahan	27c46b01ae	types(AddressEdit): SearchItem optional	2022-02-18 11:36:55 +08:00