Merge branch 'dev' into next

2025-04-06 03:57:59 +08:00 · 2020-10-22 16:10:38 +08:00 · 2020-10-22 16:10:38 +08:00 · b5cd336bb8
commit b5cd336bb8
parent c7a2a538e1 abbf448a43
29 changed files with 276 additions and 80 deletions
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@ -14,6 +14,6 @@ jobs:
          surge_token: ${{ secrets.SURGE_TOKEN }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          build: |
-            npm install
+            yarn
            ./node_modules/.bin/vant-cli build-site
          dist: site
--- a/src/address-list/README.zh-CN.md
+++ b/src/address-list/README.zh-CN.md
@ -106,7 +106,7 @@ export default {

 ### Slots

-| 名称                 | 说明                 | SlotProps  |
+| 名称                 | 说明                 | 参数       |
 | -------------------- | -------------------- | ---------- |
 | default              | 在列表下方插入内容   | -          |
 | top                  | 在顶部插入内容       | -          |
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@ -282,7 +282,7 @@ export default {

 ### Checkbox Slots

-| 名称    | 说明       | SlotProps          |
+| 名称    | 说明       | 参数               |
 | ------- | ---------- | ------------------ |
 | default | 自定义文本 | -                  |
 | icon    | 自定义图标 | _checked: boolean_ |
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@ -21,9 +21,7 @@ Use `v-model` to control the name of active panels.
 <van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content</van-collapse-item>
-  <van-collapse-item title="Title3" name="3" disabled
-    >Content</van-collapse-item
-  >
+  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
 </van-collapse>
 ```

@ -59,6 +57,22 @@ export default {
 };
 ```

+### Disabled
+
+Use the `disabled` prop to disable CollaseItem.
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
+  <van-collapse-item title="Title2" name="2" disabled>
+    Content
+  </van-collapse-item>
+  <van-collapse-item title="Title3" name="3" disabled>
+    Content
+  </van-collapse-item>
+</van-collapse>
+```
+
 ### Custom title

 ```html
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@ -25,7 +25,7 @@ app.use(CollapseItem);
 <van-collapse v-model="activeNames">
  <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
  <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
-  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
+  <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
 </van-collapse>
 ```

@ -61,8 +61,22 @@ export default {
 };
 ```

+### 禁用状态
+
+通过 `disabled` 属性来禁用单个面板。
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
+  <van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
+  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
+</van-collapse>
+```
+
 ### 自定义标题内容

+通过 `title` 插槽可以自定义标题栏的内容。
+
 ```html
 <van-collapse v-model="activeNames">
  <van-collapse-item name="1">
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@ -8,7 +8,7 @@
        <van-collapse-item :title="t('title') + 2">
          {{ t('text') }}
        </van-collapse-item>
-        <van-collapse-item :title="t('title') + 3" disabled>
+        <van-collapse-item :title="t('title') + 3">
          {{ t('text') }}
        </van-collapse-item>
      </van-collapse>
@ -28,8 +28,22 @@
      </van-collapse>
    </demo-block>

-    <demo-block :title="t('titleSlot')">
+    <demo-block :title="t('disabled')">
      <van-collapse v-model="active3">
+        <van-collapse-item :title="t('title') + 1">
+          {{ t('text') }}
+        </van-collapse-item>
+        <van-collapse-item :title="t('title') + 2" disabled>
+          {{ t('text') }}
+        </van-collapse-item>
+        <van-collapse-item :title="t('title') + 3" disabled>
+          {{ t('text') }}
+        </van-collapse-item>
+      </van-collapse>
+    </demo-block>
+
+    <demo-block :title="t('titleSlot')">
+      <van-collapse v-model="active4">
        <van-collapse-item>
          <template #title>
            {{ t('title') + 1 }}<van-icon name="question-o" />
@ -68,6 +82,7 @@ export default {
      active1: [0],
      active2: 0,
      active3: [],
+      active4: [],
    };
  },
 };
--- a/src/collapse/test/snapshots/demo.legacy.js.snap
+++ b/src/collapse/test/snapshots/demo.legacy.js.snap
@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
        </div>
      </div>
      <div class="van-collapse-item van-collapse-item--border">
-        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
            <!----></i>
        </div>
@ -56,6 +56,28 @@ exports[`renders demo correctly 1`] = `
      </div>
    </div>
  </div>
+  <div>
+    <div class="van-collapse van-hairline--top-bottom">
+      <div class="van-collapse-item">
+        <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
+          <div class="van-cell__title"><span>标题1</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+      <div class="van-collapse-item van-collapse-item--border">
+        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+          <div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+      <div class="van-collapse-item van-collapse-item--border">
+        <div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
+          <div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+            <!----></i>
+        </div>
+      </div>
+    </div>
+  </div>
  <div>
    <div class="van-collapse van-hairline--top-bottom">
      <div class="van-collapse-item">
--- a/src/count-down/README.zh-CN.md
+++ b/src/count-down/README.zh-CN.md
@ -151,7 +151,7 @@ export default {

 ### Slots

-| 名称    | 说明       | SlotProps                  |
+| 名称    | 说明       | 参数                       |
 | ------- | ---------- | -------------------------- |
 | default | 自定义内容 | _currentTime: CurrentTime_ |

--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@ -138,7 +138,7 @@ export default {
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | title | Title | _string_ | - |
-| width | Width | _number \| string_ | `320px` |
+| width | Dialog width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
 | theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@ -203,10 +203,10 @@ export default {
 | --- | --- | --- | --- |
 | v-model | 是否显示弹窗 | _boolean_ | - |
 | title | 标题 | _string_ | - |
-| width | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过`\n`换行 | _string_ | - |
-| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
-| theme | 样式风格，可选值为`round-button` | _string_ | `default` |
+| width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
+| message | 文本内容，支持通过 `\n` 换行 | _string_ | - |
+| message-align | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
 | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
 | confirm-button-text | 确认按钮文案 | _string_ | `确认` |
@ -222,7 +222,7 @@ export default {
 | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `false` |
 | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - |
-| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
+| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |

 ### Events
--- a/src/empty/README.md
+++ b/src/empty/README.md
@ -71,6 +71,7 @@ Use the image prop to display different placeholder images.
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
+| image-size `v2.10.11` | Image size | _number \| string_ | - |
 | description | Desciption | _string_ | - |

 ### Slots
--- a/src/empty/README.zh-CN.md
+++ b/src/empty/README.zh-CN.md
@ -80,6 +80,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
+| image-size `v2.10.11` | 图片大小，默认单位为 `px` | _number \| string_ | - |
 | description | 图片下方的描述文字 | _string_ | - |

 ### Slots
--- a/src/empty/index.tsx
+++ b/src/empty/index.tsx
@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, getSizeStyle } from '../utils';
 import { Network } from './Network';

 const [createComponent, bem] = createNamespace('empty');
@ -7,6 +7,7 @@ const PRESET_IMAGES = ['error', 'search', 'default'];

 export default createComponent({
  props: {
+    imageSize: [Number, String],
    description: String,
    image: {
      type: String,
@ -51,7 +52,9 @@ export default createComponent({

    return () => (
      <div class={bem()}>
-        <div class={bem('image')}>{renderImage()}</div>
+        <div class={bem('image')} style={getSizeStyle(props.imageSize)}>
+          {renderImage()}
+        </div>
        {renderDescription()}
        {renderBottom()}
      </div>
--- a/src/empty/test/index.legacy.js
+++ b/src/empty/test/index.legacy.js
@ -40,3 +40,20 @@ test('render svg when image is network', () => {

  expect(wrapper).toMatchSnapshot();
 });
+
+test('image-size prop', () => {
+  const wrapper = mount(Empty, {
+    propsData: {
+      imageSize: 50,
+    },
+  });
+
+  const image = wrapper.find('.van-empty__image').element;
+
+  expect(image.style.width).toEqual('50px');
+  expect(image.style.height).toEqual('50px');
+
+  wrapper.setProps({ imageSize: '1vw' });
+  expect(image.style.width).toEqual('1vw');
+  expect(image.style.height).toEqual('1vw');
+});
--- a/src/image/index.tsx
+++ b/src/image/index.tsx
@ -1,5 +1,5 @@
 import { ref, watch, computed, PropType, CSSProperties } from 'vue';
-import { createNamespace, isDef, addUnit } from '../utils';
+import { isDef, addUnit, inBrowser, createNamespace } from '../utils';
 import Icon from '../icon';

 const [createComponent, bem] = createNamespace('image');
@ -96,7 +96,7 @@ export default createComponent({
    };

    const renderPlaceholder = () => {
-      if (loading.value && props.showLoading) {
+      if (loading.value && props.showLoading && inBrowser) {
        return <div class={bem('loading')}>{renderLoadingIcon()}</div>;
      }
      if (error.value && props.showError) {
--- a/src/nav-bar/index.tsx
+++ b/src/nav-bar/index.tsx
@ -68,21 +68,28 @@ export default createComponent({
        zIndex: zIndex !== undefined ? +zIndex : undefined,
      };

+      const hasLeft = props.leftArrow || props.leftText || slots.left;
+      const hasRight = props.rightText || slots.right;
+
      return (
        <div
          ref={navBarRef}
          style={style}
          class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
        >
-          <div class={bem('left')} onClick={onClickLeft}>
-            {renderLeft()}
-          </div>
+          {hasLeft && (
+            <div class={bem('left')} onClick={onClickLeft}>
+              {renderLeft()}
+            </div>
+          )}
          <div class={[bem('title'), 'van-ellipsis']}>
            {slots.title ? slots.title() : title}
          </div>
-          <div class={bem('right')} onClick={onClickRight}>
-            {renderRight()}
-          </div>
+          {hasRight && (
+            <div class={bem('right')} onClick={onClickRight}>
+              {renderRight()}
+            </div>
+          )}
        </div>
      );
    };
--- a/src/nav-bar/test/snapshots/index.legacy.js.snap
+++ b/src/nav-bar/test/snapshots/index.legacy.js.snap
@ -3,9 +3,7 @@
 exports[`placeholder prop 1`] = `
 <div class="van-nav-bar__placeholder" style="height: 50px;">
  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
-    <div class="van-nav-bar__left"></div>
    <div class="van-nav-bar__title van-ellipsis"></div>
-    <div class="van-nav-bar__right"></div>
  </div>
 </div>
 `;
@ -20,8 +18,6 @@ exports[`render left & right slot 1`] = `

 exports[`render title slot 1`] = `
 <div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__left"></div>
  <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
-  <div class="van-nav-bar__right"></div>
 </div>
 `;
--- a/src/pagination/README.zh-CN.md
+++ b/src/pagination/README.zh-CN.md
@ -91,7 +91,7 @@ export default {

 ### Slots

-| 名称 | 描述 | SlotProps |
+| 名称 | 描述 | 参数 |
 | --- | --- | --- |
 | page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
 | prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
--- a/src/picker/PickerColumn.js
+++ b/src/picker/PickerColumn.js
@ -50,7 +50,7 @@ export default createComponent({

  emits: ['change'],

-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
    let moving;
    let startOffset;
    let touchStartTime;
@ -258,7 +258,7 @@ export default createComponent({

        return (
          <li {...data}>
-            <div {...childData} />
+            {slots.option ? slots.option(option) : <div {...childData} />}
          </li>
        );
      });
--- a/src/picker/README.md
+++ b/src/picker/README.md
@ -267,12 +267,15 @@ Picker events will pass different parameters according to the columns are single

 ### Slots

-| Name           | Description                  |
-| -------------- | ---------------------------- |
-| default        | Custom toolbar content       |
-| title          | Custom title                 |
-| columns-top    | Custom content above columns |
-| columns-bottom | Custom content below columns |
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default | Custom toolbar content | - |
+| title | Custom title | - |
+| confirm `v2.10.11` | Custom confirm button text | - |
+| cancel `v2.10.11` | Custom cancel button text | - |
+| option `v2.10.11` | Custom option content | _option: string \| object_ |
+| columns-top | Custom content above columns | - |
+| columns-bottom | Custom content below columns | - |

 ### Data Structure of Column

--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@ -290,16 +290,19 @@ export default {

 ### Slots

-| 名称           | 说明               |
-| -------------- | ------------------ |
-| default        | 自定义顶部栏内容   |
-| title          | 自定义标题内容     |
-| columns-top    | 自定义选项上方内容 |
-| columns-bottom | 自定义选项下方内容 |
+| 名称               | 说明                   | 参数                       |
+| ------------------ | ---------------------- | -------------------------- |
+| default            | 自定义整个顶部栏的内容 | -                          |
+| title              | 自定义标题内容         | -                          |
+| confirm `v2.10.11` | 自定义确认按钮内容     | -                          |
+| cancel `v2.10.11`  | 自定义取消按钮内容     | -                          |
+| option `v2.10.11`  | 自定义选项内容         | _option: string \| object_ |
+| columns-top        | 自定义选项上方内容     | -                          |
+| columns-bottom     | 自定义选项下方内容     | -                          |

 ### Column 数据结构

-当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
+当传入多列数据时，`columns` 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 `key`:

 | 键名              | 说明                       | 类型       |
 | ----------------- | -------------------------- | ---------- |
--- a/src/picker/index.js
+++ b/src/picker/index.js
@ -213,25 +213,31 @@ export default createComponent({
      }
    };

+    const renderCancel = () => {
+      const text = props.cancelButtonText || t('cancel');
+      return (
+        <button type="button" class={bem('cancel')} onClick={cancel}>
+          {slots.cancel ? slots.cancel() : text}
+        </button>
+      );
+    };
+
+    const renderConfirm = () => {
+      const text = props.confirmButtonText || t('confirm');
+      return (
+        <button type="button" class={bem('confirm')} onClick={confirm}>
+          {slots.confirm ? slots.confirm() : text}
+        </button>
+      );
+    };
+
    const renderToolbar = () => {
      if (props.showToolbar) {
        return (
          <div class={bem('toolbar')}>
            {slots.default
              ? slots.default()
-              : [
-                  <button type="button" class={bem('cancel')} onClick={cancel}>
-                    {props.cancelButtonText || t('cancel')}
-                  </button>,
-                  renderTitle(),
-                  <button
-                    type="button"
-                    class={bem('confirm')}
-                    onClick={confirm}
-                  >
-                    {props.confirmButtonText || t('confirm')}
-                  </button>,
-                ]}
+              : [renderCancel(), renderTitle(), renderConfirm()]}
          </div>
        );
      }
@ -240,6 +246,7 @@ export default createComponent({
    const renderColumnItems = () =>
      formattedColumns.value.map((item, columnIndex) => (
        <PickerColumn
+          v-slots={{ option: slots.option }}
          readonly={props.readonly}
          valueKey={props.valueKey}
          allowHtml={props.allowHtml}
--- a/src/picker/test/snapshots/index.legacy.js.snap
+++ b/src/picker/test/snapshots/index.legacy.js.snap
@ -88,6 +88,57 @@ exports[`not allow html 1`] = `
 </div>
 `;

+exports[`render confirm/cancel slot 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">Custom Cancel</button><button type="button" class="van-picker__confirm">Custom Confirm</button></div>
+  <!---->
+  <div class="van-picker__columns" style="height: 264px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></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>
+`;
+
+exports[`render option slot with object columns 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+  <!---->
+  <div class="van-picker__columns" style="height: 264px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</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>
+`;
+
+exports[`render option slot with simple columns 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+  <!---->
+  <div class="van-picker__columns" style="height: 264px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">foo</li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">bar</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>
+`;
+
 exports[`render title slot 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
--- a/src/picker/test/index.legacy.js
+++ b/src/picker/test/index.legacy.js
@ -138,12 +138,54 @@ test('column watch default index', async () => {
 test('render title slot', () => {
  const wrapper = mount({
    template: `
-      <picker>
+      <van-picker>
        <template v-slot:title>Custom title</template>
-      </picker>
+      </van-picker>
    `,
-    components: {
-      Picker,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render confirm/cancel slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker>
+        <template v-slot:confirm>Custom Confirm</template>
+        <template v-slot:cancel>Custom Cancel</template>
+      </van-picker>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with simple columns', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker :columns="columns" show-toolbar>
+        <template #option="item">{{ item }}</template>
+      </van-picker>
+    `,
+    data() {
+      return { columns: ['foo', 'bar'] };
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with object columns', () => {
+  const wrapper = mount({
+    template: `
+      <van-picker :columns="columns" show-toolbar>
+        <template #option="item">{{ item.text }}</template>
+      </van-picker>
+    `,
+    data() {
+      return {
+        columns: [{ text: 'foo' }, { text: 'bar' }],
+      };
    },
  });

--- a/src/pull-refresh/README.zh-CN.md
+++ b/src/pull-refresh/README.zh-CN.md
@ -119,7 +119,7 @@ export default {

 ### Slots

-| 名称    | 说明                 | SlotProps                  |
+| 名称    | 说明                 | 参数                       |
 | ------- | -------------------- | -------------------------- |
 | default | 自定义内容           | -                          |
 | normal  | 非下拉状态时顶部内容 | -                          |
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@ -198,7 +198,7 @@ export default {

 ### Radio Slots

-| 名称    | 说明       | SlotProps          |
+| 名称    | 说明       | 参数               |
 | ------- | ---------- | ------------------ |
 | default | 自定义文本 | -                  |
 | icon    | 自定义图标 | _checked: boolean_ |
--- a/src/style/var.less
+++ b/src/style/var.less
@ -371,7 +371,7 @@
@field-input-text-color: @text-color;
@field-input-error-text-color: @red;
@field-input-disabled-text-color: @gray-5;
-@field-placeholder-text-color: @gray-6;
+@field-placeholder-text-color: @gray-5;
@field-icon-size: 16px;
@field-clear-icon-size: 16px;
@field-clear-icon-color: @gray-5;
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@ -192,6 +192,6 @@ export default {

 ### TabbarItem Slots

-| 名称 | 说明       | SlotProps              |
+| 名称 | 说明       | 参数                   |
 | ---- | ---------- | ---------------------- |
 | icon | 自定义图标 | active: 是否为选中标签 |
--- a/src/uploader/README.zh-CN.md
+++ b/src/uploader/README.zh-CN.md
@ -225,7 +225,7 @@ export default {
 | v-model (fileList) | 已上传的文件列表 | _FileListItem[]_ | - |
 | accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` |
 | name | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - |
-| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _number \| string_ | `80px` |
+| preview-size | 预览图和上传区域的尺寸，默认单位为 `px` | _number \| string_ | `80px` |
 | preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
 | preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |
 | preview-options `v2.9.3` | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - |
@ -236,8 +236,8 @@ export default {
 | lazy-load `v2.6.2` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
 | capture | 图片选取模式，可选值为 `camera` (直接调起摄像头) | _string_ | - |
 | after-read | 文件读取完成后的回调函数 | _Function_ | - |
-| before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
-| before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
+| before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，<br>支持返回 `Promise` | _Function_ | - |
+| before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，<br>支持返回 `Promise` | _Function_ | - |
 | max-size | 文件大小限制，单位为 `byte` | _number \| string_ | - |
 | max-count | 文件上传数量限制 | _number \| string_ | - |
 | result-type | 文件读取结果类型，可选值为 `file` `text` | _string_ | `dataUrl` |
@ -247,19 +247,19 @@ export default {

 ### Events

-| 事件名        | 说明                   | 回调参数       |
-| ------------- | ---------------------- | -------------- |
-| oversize      | 文件大小超过限制时触发 | 同`after-read` |
-| click-preview | 点击预览图时触发       | 同`after-read` |
-| close-preview | 关闭全屏图片预览时触发 | -              |
-| delete        | 删除文件预览时触发     | 同`after-read` |
+| 事件名        | 说明                   | 回调参数        |
+| ------------- | ---------------------- | --------------- |
+| oversize      | 文件大小超过限制时触发 | 同 `after-read` |
+| click-preview | 点击预览图时触发       | 同 `after-read` |
+| close-preview | 关闭全屏图片预览时触发 | -               |
+| delete        | 删除文件预览时触发     | 同 `after-read` |

 ### Slots

-| 名称 | 说明 | SlotProps |
+| 名称 | 说明 | 参数 |
 | --- | --- | --- |
 | default | 自定义上传区域 | - |
-| preview-cover `v2.9.1` | 自定义覆盖在预览区域上方的内容 | `item: FileListItem` |
+| preview-cover `v2.9.1` | 自定义覆盖在预览区域上方的内容 | _item: FileListItem_ |

 ### 回调参数

@ -272,7 +272,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：

 ### ResultType  可选值

-`result-type`字段表示文件读取结果的类型，上传大文件时，建议使用 file 类型，避免卡顿。
+`result-type` 字段表示文件读取结果的类型，上传大文件时，建议使用 file 类型，避免卡顿。

 | 值      | 描述                                           |
 | ------- | ---------------------------------------------- |