diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index 7e3600bd6..f6611bf57 100644
--- 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_ |
diff --git a/src/dialog/README.md b/src/dialog/README.md
index 18d5ba6a1..c333909f0 100644
--- 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` |
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index 1d2f1540e..05f693578 100644
--- 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
diff --git a/src/empty/README.md b/src/empty/README.md
index f80be3f2a..1ff99f5ad 100644
--- 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
diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md
index f53532fd8..3d1acf19f 100644
--- 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
diff --git a/src/empty/index.tsx b/src/empty/index.tsx
index 1e186a789..11d62d66c 100644
--- 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 () => (
-
{renderImage()}
+
+ {renderImage()}
+
{renderDescription()}
{renderBottom()}
diff --git a/src/empty/test/index.legacy.js b/src/empty/test/index.legacy.js
index 54d3d4438..5c9e81a0b 100644
--- 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');
+});
diff --git a/src/image/index.tsx b/src/image/index.tsx
index 2abb6b229..2ea55cea9 100644
--- 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
{renderLoadingIcon()}
;
}
if (error.value && props.showError) {
diff --git a/src/nav-bar/index.tsx b/src/nav-bar/index.tsx
index 0c009fba9..1b625b814 100644
--- 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 (
-
- {renderLeft()}
-
+ {hasLeft && (
+
+ {renderLeft()}
+
+ )}
{slots.title ? slots.title() : title}
-
- {renderRight()}
-
+ {hasRight && (
+
+ {renderRight()}
+
+ )}
);
};
diff --git a/src/nav-bar/test/__snapshots__/index.legacy.js.snap b/src/nav-bar/test/__snapshots__/index.legacy.js.snap
index 263a07ecc..d4f4630a6 100644
--- 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`] = `
`;
@@ -20,8 +18,6 @@ exports[`render left & right slot 1`] = `
exports[`render title slot 1`] = `
`;
diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md
index 775172919..86cbc5c39 100644
--- 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` | 自定义上一页按钮文字 | `-` |
diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index 697d4b47e..487bf42d0 100644
--- 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 (
-
+ {slots.option ? slots.option(option) : }
);
});
diff --git a/src/picker/README.md b/src/picker/README.md
index 5eab19501..527fff729 100644
--- 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
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index 0a875d9e5..011c83421 100644
--- 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`:
| 键名 | 说明 | 类型 |
| ----------------- | -------------------------- | ---------- |
diff --git a/src/picker/index.js b/src/picker/index.js
index a94a643e1..66efacc46 100644
--- 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 (
+
+ );
+ };
+
+ const renderConfirm = () => {
+ const text = props.confirmButtonText || t('confirm');
+ return (
+
+ );
+ };
+
const renderToolbar = () => {
if (props.showToolbar) {
return (
{slots.default
? slots.default()
- : [
- ,
- renderTitle(),
- ,
- ]}
+ : [renderCancel(), renderTitle(), renderConfirm()]}
);
}
@@ -240,6 +246,7 @@ export default createComponent({
const renderColumnItems = () =>
formattedColumns.value.map((item, columnIndex) => (
`;
+exports[`render confirm/cancel slot 1`] = `
+
+
+
+
+
+
Custom title
diff --git a/src/picker/test/index.legacy.js b/src/picker/test/index.legacy.js
index fc181086e..c13aab4d2 100644
--- 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: `
-
+
Custom title
-
+
`,
- components: {
- Picker,
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render confirm/cancel slot', () => {
+ const wrapper = mount({
+ template: `
+
+ Custom Confirm
+ Custom Cancel
+
+ `,
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with simple columns', () => {
+ const wrapper = mount({
+ template: `
+
+ {{ item }}
+
+ `,
+ data() {
+ return { columns: ['foo', 'bar'] };
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render option slot with object columns', () => {
+ const wrapper = mount({
+ template: `
+
+ {{ item.text }}
+
+ `,
+ data() {
+ return {
+ columns: [{ text: 'foo' }, { text: 'bar' }],
+ };
},
});
diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md
index 0c84b9bda..b2fb5ab27 100644
--- 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 | 非下拉状态时顶部内容 | - |
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 91ff58ea6..7e3690d87 100644
--- 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_ |
diff --git a/src/style/var.less b/src/style/var.less
index 19efc57ef..bc7fa03c4 100644
--- 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;
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index 5ec4d6910..e65d52fe5 100644
--- 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: 是否为选中标签 |
diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md
index e15d49292..820f8fd12 100644
--- 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` 可终止文件读取，
支持返回`Promise` | _Function_ | - |
-| before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，
支持返回`Promise` | _Function_ | - |
+| before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，
支持返回 `Promise` | _Function_ | - |
+| before-delete | 文件删除前的回调函数，返回 `false` 可终止文件读取，
支持返回 `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 类型，避免卡顿。
| 值 | 描述 |
| ------- | ---------------------------------------------- |