diff --git a/README.md b/README.md index 279cbf6a9..bdc154c71 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3) | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro | | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI | | [@antmjs/vantui](https://github.com/antmjs/vantui) | Mobile UI Components based on Vant, supporting Taro and React | +| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Try Vant in the Playground. Currently only Vant 3+ is supported | ## Links diff --git a/README.zh-CN.md b/README.zh-CN.md index 476b07bb8..cfadb3ea2 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -110,6 +110,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 | | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 | | [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React | +| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground. 当前仅支持 Vant 3.0 以上 | ## 链接 diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index b680ddb91..b87d6229a 100644 --- a/packages/vant-cli/package.json +++ b/packages/vant-cli/package.json @@ -51,7 +51,7 @@ "@docsearch/js": "^3.0.0", "@types/jest": "^27.0.3", "@vant/eslint-config": "^3.3.2", - "@vant/markdown-vetur": "^2.2.0", + "@vant/markdown-vetur": "^2.3.0", "@vant/stylelint-config": "^1.4.2", "@vant/touch-emulator": "^1.3.2", "@vitejs/plugin-vue": "^2.0.0", diff --git a/packages/vant-markdown-vetur/package.json b/packages/vant-markdown-vetur/package.json index d63526874..ba45e0a40 100644 --- a/packages/vant-markdown-vetur/package.json +++ b/packages/vant-markdown-vetur/package.json @@ -1,6 +1,6 @@ { "name": "@vant/markdown-vetur", - "version": "2.2.0", + "version": "2.3.0", "description": "simple parse markdown to vue component description for vetur auto-completion", "main": "lib/index.js", "files": [ diff --git a/packages/vant-markdown-vetur/src/formatter.ts b/packages/vant-markdown-vetur/src/formatter.ts index b0e9fef37..383282207 100644 --- a/packages/vant-markdown-vetur/src/formatter.ts +++ b/packages/vant-markdown-vetur/src/formatter.ts @@ -1,12 +1,50 @@ /* eslint-disable no-continue */ import { Articals } from './parser'; import { formatOptions, formatType, removeVersion, toKebabCase } from './utils'; -import { VueTag } from './type'; +import { VueEventArgument, VueTag } from './type'; function formatComponentName(name: string, tagPrefix: string) { return tagPrefix + toKebabCase(name); } +/** + * format arugments of events + * input = value: { foo: foo or 1, bar: bar or 2 }, value2: { one: 1 and 1, two: 2 and 2 }, foo: bar + * output = [{ name: 'value', type: '{ foo: foo or 1, bar: bar or 2 }' }, { name: 'value2', type: '{ one: 1 and 1, two: 2 and 2 }'}, { name: 'foo', type: 'bar' }] + */ +function formatArguments(input: string): VueEventArgument[] { + if (input === '-') return []; + const args: VueEventArgument[] = []; + const items = []; + input = formatType(input); + while (input.length > 0) { + if (/(?!_)\w/.test(input[0])) { + const val = input.match(/(\w|\s|\p{P}|\||\[|\]|>|<)+/)![0] || ''; + input = input.substring(val.length); + items.push(val); + } else if (input[0] === '{') { + const val = input.match(/\{[^}]+\}/)![0] || ''; + input = input.substring(val.length); + items.push(val); + } else if ([':', ',', '_', ' '].includes(input[0])) { + input = input.substring(1); + } else { + const val = input.match(/( |'|\||\w)+/)![0] || ''; + input = input.substring(val.length); + items.push(val); + } + } + + for (let i = 0; i < items.length; i += 2) { + args.push({ + name: items[i], + type: items[i + 1], + }); + } + + return args; +} + function getNameFromTableTitle(tableTitle: string, tagPrefix: string) { tableTitle = tableTitle.trim(); if (tableTitle.includes(' ')) { @@ -84,10 +122,11 @@ export function formatter( const tag = findTag(vueTags, name); table.body.forEach((line) => { - const [name, desc] = line; + const [name, desc, args] = line; tag.events!.push({ name: removeVersion(name), description: desc, + arguments: formatArguments(args), }); }); return; diff --git a/packages/vant-markdown-vetur/src/parser.ts b/packages/vant-markdown-vetur/src/parser.ts index 97dbb1ff8..fb3776873 100644 --- a/packages/vant-markdown-vetur/src/parser.ts +++ b/packages/vant-markdown-vetur/src/parser.ts @@ -25,9 +25,11 @@ function readLine(input: string) { } function splitTableLine(line: string) { - line = line.replace('\\|', 'JOIN'); + line = line.replace(/\\\|/g, 'JOIN'); - const items = line.split('|').map((item) => item.trim().replace('JOIN', '|')); + const items = line + .split('|') + .map((item) => item.trim().replace(/JOIN/g, '|')); // remove pipe character on both sides items.pop(); diff --git a/packages/vant/docs/markdown/home.en-US.md b/packages/vant/docs/markdown/home.en-US.md index ed50b2880..630646bac 100644 --- a/packages/vant/docs/markdown/home.en-US.md +++ b/packages/vant/docs/markdown/home.en-US.md @@ -54,6 +54,7 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3) | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro | | [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI | | [@antmjs/vantui](https://github.com/antmjs/vantui) | Mobile UI Components based on Vant, supporting Taro and React | +| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Try Vant in the Playground. Currently only Vant 3+ is supported | ### Other Links diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md index 9f4200c7a..2854bc303 100644 --- a/packages/vant/docs/markdown/home.zh-CN.md +++ b/packages/vant/docs/markdown/home.zh-CN.md @@ -68,6 +68,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一 | [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 | | [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 | | [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React | +| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground. 当前仅支持 Vant 3.0 以上 | ### 其他链接 diff --git a/packages/vant/src/action-bar/README.md b/packages/vant/src/action-bar/README.md index 3234d5558..c6fcb2617 100644 --- a/packages/vant/src/action-bar/README.md +++ b/packages/vant/src/action-bar/README.md @@ -102,7 +102,7 @@ Use `badge` prop to show badge in icon. | icon-prefix `v3.0.17` | Icon className prefix | _string_ | `van-icon` | | dot | Whether to show red dot | _boolean_ | - | | badge | Content of the badge | _number \| string_ | - | -| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | +| badge-props `v3.2.8` | Props of Badge, see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | | url | Link URL | _string_ | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` | diff --git a/packages/vant/src/area/README.md b/packages/vant/src/area/README.md index 6de29d52c..a1e6605fa 100644 --- a/packages/vant/src/area/README.md +++ b/packages/vant/src/area/README.md @@ -131,7 +131,7 @@ export default { | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | columns-num | Level of picker | _number \| string_ | `3` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | -| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | +| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` | ### Events diff --git a/packages/vant/src/badge/README.md b/packages/vant/src/badge/README.md index f96aeb4c8..8e12c5dcc 100644 --- a/packages/vant/src/badge/README.md +++ b/packages/vant/src/badge/README.md @@ -138,7 +138,7 @@ Use `position` prop to set the position of badge. | content | Badge content | _number \| string_ | - | | color | Background color | _string_ | `#ee0a24` | | dot | Whether to show dot | _boolean_ | `false` | -| max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - | +| max | Max value, show `{max}+` when exceed, only works when content is number | _number \| string_ | - | | offset `v3.0.5` | Offset of badge dot | _[number \| string, number \| string]_ | - | | show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` | | position `v3.2.7` | Badge position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | diff --git a/packages/vant/src/badge/README.zh-CN.md b/packages/vant/src/badge/README.zh-CN.md index 186da2cbd..6cec59d0b 100644 --- a/packages/vant/src/badge/README.zh-CN.md +++ b/packages/vant/src/badge/README.zh-CN.md @@ -184,3 +184,17 @@ import type { BadgeProps, BadgePosition } from 'vant'; | --van-badge-dot-color | _var(--van-danger-color)_ | - | | --van-badge-dot-size | _8px_ | - | | --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | + +## 常见问题 + +### 设置 show-zero 属性为 false 不生效？ + +注意 `show-zero` 属性仅对数字类型的 `0` 有效，对字符串类型的 `'0'` 无效。 + +```html + + + + + +``` diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index 6a72b187a..1e9fb438a 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -208,7 +208,7 @@ export default { ### Custom Position -Use `position` to custom popup position，can be set to `top`、`left`、`right`. +Use `position` to custom popup position, can be set to `top`、`left`、`right`. ```html @@ -249,7 +249,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| type | Type，can be set to `range` `multiple` | _string_ | `single` | +| type | Type, can be set to `range` `multiple` | _string_ | `single` | | title | Title of calendar | _string_ | `Calendar` | | color | Color for the bottom button and selected date | _string_ | `#1989fa` | | min-date | Min date | _Date_ | Today | @@ -319,13 +319,13 @@ Following props are supported when the type is multiple | Event | Description | Arguments | | --- | --- | --- | | select | Emitted when date is selected | _value: Date \| Date[]_ | -| confirm | Emitted after date selection is complete，if `show-confirm` is `true`, it is Emitted after clicking the confirm button | _value: Date \| Date[]_ | +| confirm | Emitted after date selection is complete, if `show-confirm` is `true`, it is Emitted after clicking the confirm button | _value: Date \| Date[]_ | | open | Emitted when opening Popup | - | | close | Emitted when closing Popup | - | | opened | Emitted when Popup is opened | - | | closed | Emitted when Popup is closed | - | | unselect | Emitted when unselect date when type is multiple | _value: Date_ | -| month-show | Emitted when a month enters the visible area | _{ date: Date, title: string }_ | +| month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ | | over-range | Emitted when exceeded max range | - | | click-subtitle `v3.1.3` | Emitted when clicking the subtitle | _event: MouseEvent_ | diff --git a/packages/vant/src/card/README.md b/packages/vant/src/card/README.md index b39afd775..1e29c3d34 100644 --- a/packages/vant/src/card/README.md +++ b/packages/vant/src/card/README.md @@ -83,7 +83,7 @@ Use slot to custom content. | centered | Whether content vertical centered | _boolean_ | `false` | | currency | Currency symbol | _string_ | `¥` | | thumb-link | Thumb link URL | _string_ | - | -| lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | +| lazy-load | Whether to enable thumb lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | ### Events diff --git a/packages/vant/src/cell/README.md b/packages/vant/src/cell/README.md index b5115cea7..7a7de7cdc 100644 --- a/packages/vant/src/cell/README.md +++ b/packages/vant/src/cell/README.md @@ -151,7 +151,7 @@ app.use(CellGroup); | title | Title | _number \| string_ | - | | value | Right text | _number \| string_ | - | | label | Description below the title | _string_ | - | -| size | Size，can be set to `large` | _string_ | - | +| size | Size, can be set to `large` | _string_ | - | | icon | Left Icon | _string_ | - | | icon-prefix | Icon className prefix | _string_ | `van-icon` | | border | Whether to show inner border | _boolean_ | `true` | diff --git a/packages/vant/src/circle/README.md b/packages/vant/src/circle/README.md index d08292eef..6def8f799 100644 --- a/packages/vant/src/circle/README.md +++ b/packages/vant/src/circle/README.md @@ -157,9 +157,9 @@ export default { | speed | Animate speed（rate/s） | _number \| string_ | `0` | | text | Text | _string_ | - | | stroke-width | Stroke width | _number \| string_ | `40` | -| stroke-linecap | Stroke linecap，can be set to `square` `butt` | _string_ | `round` | +| stroke-linecap | Stroke linecap, can be set to `square` `butt` | _string_ | `round` | | clockwise | Whether to be clockwise | _boolean_ | `true` | -| start-position `v3.2.1` | Progress start position，can be set to `left`、`right`、`bottom` | _CircleStartPosition_ | `top` | +| start-position `v3.2.1` | Progress start position, can be set to `left`、`right`、`bottom` | _CircleStartPosition_ | `top` | ### Slots diff --git a/packages/vant/src/col/README.md b/packages/vant/src/col/README.md index 1dbe129bf..3a2b2c823 100644 --- a/packages/vant/src/col/README.md +++ b/packages/vant/src/col/README.md @@ -89,7 +89,7 @@ Set grid spacing using `gutter` attribute. The default value is 0. | --- | --- | --- | --- | | gutter | Grid spacing（px） | _number \| string_ | - | | tag | Custom element tag | _string_ | `div` | -| justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` | +| justify | Flex main axis, can be set to end/center/space-around/space-between | _string_ | `start` | | align | Flex cross axis, be set to center/bottom | _string_ | `top` | | wrap `v3.0.11` | Whether to wrap | _boolean_ | `true` | diff --git a/packages/vant/src/collapse/README.md b/packages/vant/src/collapse/README.md index 0ce017a22..d20bcb2a3 100644 --- a/packages/vant/src/collapse/README.md +++ b/packages/vant/src/collapse/README.md @@ -114,15 +114,15 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| v-model | Names of current active panels | accordion mode： _number \| string_
non-accordion mode：_(number \| string)[]_ | - | +| v-model | Names of current active panels | accordion mode: _number \| string_
non-accordion mode: _(number \| string)[]_ | - | | accordion | Whether to be accordion mode | _boolean_ | `false` | | border | Whether to show outer border | _boolean_ | `true` | ### Collapse Events -| Event | Description | Arguments | -| ------ | ---------------------------- | ----------- | -| change | Emitted when switching panel | activeNames | +| Event | Description | Arguments | +| --- | --- | --- | +| change | Emitted when switching panel | _activeNames: string \| number \| Array_ | ### CollapseItem Props @@ -130,7 +130,7 @@ export default { | --- | --- | --- | --- | | name | Name | _number \| string_ | `index` | | icon | Left Icon | _string_ | - | -| size | Title size，can be set to `large` | _string_ | - | +| size | Title size, can be set to `large` | _string_ | - | | title | Title | _number \| string_ | - | | value | Right text | _number \| string_ | - | | label | Description below the title | _string_ | - | diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md index 4b6d8857d..755eab708 100644 --- a/packages/vant/src/config-provider/README.md +++ b/packages/vant/src/config-provider/README.md @@ -148,7 +148,7 @@ export default { }; ``` -> Tips：ConfigProvider only affects its child components. +> Tips: ConfigProvider only affects its child components. ## Variables diff --git a/packages/vant/src/contact-card/README.md b/packages/vant/src/contact-card/README.md index a1fa4016b..fc1be2dd4 100644 --- a/packages/vant/src/contact-card/README.md +++ b/packages/vant/src/contact-card/README.md @@ -77,12 +77,13 @@ export default { ### Props -| Attribute | Description | Type | Default | -| --------- | -------------------- | -------- | ------------------ | -| type | Can be set to `edit` | _string_ | `add` | -| name | Name | _string_ | - | -| tel | Phone | _string_ | - | -| add-text | Add card text | _string_ | `Add contact info` | +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| type | Can be set to `edit` | _string_ | `add` | +| name | Name | _string_ | - | +| tel | Phone | _string_ | - | +| add-text | Add card text | _string_ | `Add contact info` | +| editable | Whether to allow editing of contacts | _boolean_ | `true` | ### Events diff --git a/packages/vant/src/contact-card/README.zh-CN.md b/packages/vant/src/contact-card/README.zh-CN.md index 3fafded1a..f984c095a 100644 --- a/packages/vant/src/contact-card/README.zh-CN.md +++ b/packages/vant/src/contact-card/README.zh-CN.md @@ -71,12 +71,13 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ------------------------- | -------- | ------------ | -| type | 卡片类型，可选值为 `edit` | _string_ | `add` | -| name | 联系人姓名 | _string_ | - | -| tel | 联系人手机号 | _string_ | - | -| add-text | 添加时的文案提示 | _string_ | `添加联系人` | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ------------------------- | --------- | ------------ | +| type | 卡片类型，可选值为 `edit` | _string_ | `add` | +| name | 联系人姓名 | _string_ | - | +| tel | 联系人手机号 | _string_ | - | +| add-text | 添加时的文案提示 | _string_ | `添加联系人` | +| editable | 是否可以编辑联系人 | _boolean_ | `true` | ### Events diff --git a/packages/vant/src/contact-edit/README.md b/packages/vant/src/contact-edit/README.md index 2ec7a67f3..a640db305 100644 --- a/packages/vant/src/contact-edit/README.md +++ b/packages/vant/src/contact-edit/README.md @@ -70,8 +70,8 @@ export default { | Event | Description | Arguments | | ------ | ----------------------------------------- | --------------------- | -| save | Emitted when the save button is clicked | content：contact info | -| delete | Emitted when the delete button is clicked | content：contact info | +| save | Emitted when the save button is clicked | content: contact info | +| delete | Emitted when the delete button is clicked | content: contact info | ### Data Structure of Contact diff --git a/packages/vant/src/contact-list/README.md b/packages/vant/src/contact-list/README.md index c50d10d79..cca61b1d5 100644 --- a/packages/vant/src/contact-list/README.md +++ b/packages/vant/src/contact-list/README.md @@ -83,7 +83,7 @@ export default { | Event | Description | Arguments | | --- | --- | --- | | add | Emitted when the add button is clicked | - | -| edit | Emitted when the edit button is clicked | _contact: Contact，index: number_ | +| edit | Emitted when the edit button is clicked | _contact: Contact, index: number_ | | select | Emitted when a contact is selected | _contact: Contact, index: number_ | ### Data Structure of Contact diff --git a/packages/vant/src/date-picker/README.md b/packages/vant/src/date-picker/README.md index 469a43238..a202126c7 100644 --- a/packages/vant/src/date-picker/README.md +++ b/packages/vant/src/date-picker/README.md @@ -177,7 +177,7 @@ export default { | formatter | Option formatter | _(type: string, option: PickerOption) => PickerOption_ | - | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | -| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | +| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` | ### Events diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md index 528cb751f..4b26af2eb 100644 --- a/packages/vant/src/dialog/README.md +++ b/packages/vant/src/dialog/README.md @@ -147,8 +147,8 @@ export default { | title | Title | _string_ | - | | width | Dialog width | _number \| string_ | `320px` | | message | Message | _string \| () => JSX.ELement_ | - | -| messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` | -| theme | Theme style，can be set to `round-button` | _string_ | `default` | +| messageAlign | Message text align, can be set to `left` `right` | _string_ | `center` | +| theme | Theme style, can be set to `round-button` | _string_ | `default` | | className | Custom className | _string \| Array \| object_ | - | | showConfirmButton | Whether to show confirm button | _boolean_ | `true` | | showCancelButton | Whether to show cancel button | _boolean_ | `false` | @@ -175,8 +175,8 @@ export default { | title | Title | _string_ | - | | width | Width | _number \| string_ | `320px` | | message | Message | _string \| () => JSX.ELement_ | - | -| message-align | Message align，can be set to `left` `right` | _string_ | `center` | -| theme | Theme style，can be set to `round-button` | _string_ | `default` | +| message-align | Message align, can be set to `left` `right` | _string_ | `center` | +| theme | Theme style, can be set to `round-button` | _string_ | `default` | | show-confirm-button | Whether to show confirm button | _boolean_ | `true` | | show-cancel-button | Whether to show cancel button | _boolean_ | `false` | | cancel-button-text | Cancel button text | _string_ | `Cancel` | diff --git a/packages/vant/src/divider/README.md b/packages/vant/src/divider/README.md index 4d4d2c5e5..068f33288 100644 --- a/packages/vant/src/divider/README.md +++ b/packages/vant/src/divider/README.md @@ -61,7 +61,7 @@ app.use(Divider); | --- | --- | --- | --- | | dashed | Whether to use dashed border | _boolean_ | `false` | | hairline | Whether to use hairline | _boolean_ | `true` | -| content-position | Content position，can be set to `left` `right` | _string_ | `center` | +| content-position | Content position, can be set to `left` `right` | _string_ | `center` | ### Slots diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md index 07ae738ce..c4a3d0cdf 100644 --- a/packages/vant/src/dropdown-menu/README.md +++ b/packages/vant/src/dropdown-menu/README.md @@ -168,13 +168,13 @@ Use `active-color` prop to custom active color of the title and options. ### DropdownItem Events -| Event | Description | Arguments | -| ------ | --------------------------------------- | --------- | -| change | Emitted select option and value changed | value | -| open | Emitted when opening menu | - | -| close | Emitted when closing menu | - | -| opened | Emitted when menu is opened | - | -| closed | Emitted when menu is closed | - | +| Event | Description | Arguments | +| ------ | --------------------------------------- | ------------------------- | +| change | Emitted select option and value changed | _value: number \| string_ | +| open | Emitted when opening menu | - | +| close | Emitted when closing menu | - | +| opened | Emitted when menu is opened | - | +| closed | Emitted when menu is closed | - | ### DropdownItem Slots diff --git a/packages/vant/src/empty/README.md b/packages/vant/src/empty/README.md index 293f37d47..13c4cb850 100644 --- a/packages/vant/src/empty/README.md +++ b/packages/vant/src/empty/README.md @@ -85,7 +85,7 @@ You can set the width and height separately. | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` | +| image | Image type, can be set to `error` `network` `search` or image URL | _string_ | `default` | | image-size | Image size | _number \| string \| Array_ | - | | description | Description | _string_ | - | diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index f6ddbafaa..1acd25615 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -80,6 +80,7 @@ export const fieldSharedProps = { placeholder: String, autocomplete: String, errorMessage: String, + enterkeyhint: String, clearTrigger: makeStringProp('focus'), formatTrigger: makeStringProp('onChange'), error: { @@ -411,6 +412,7 @@ export default defineComponent({ autofocus: props.autofocus, placeholder: props.placeholder, autocomplete: props.autocomplete, + enterkeyhint: props.enterkeyhint, 'aria-labelledby': props.label ? `${id}-label` : undefined, onBlur, onFocus, diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index 076572a2b..2df7fd86d 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -252,7 +252,7 @@ Use `input-align` prop to align the input value. | name | As the identifier when submitting the form | _string_ | - | | id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` | | type | Input type, support all [native types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types) and `digit` type | _FieldType_ | `text` | -| size | Size，can be set to `large` | _string_ | - | +| size | Size, can be set to `large` | _string_ | - | | maxlength | Max length of value | _number \| string_ | - | | placeholder | Input placeholder | _string_ | - | | border | Whether to show inner border | _boolean_ | `true` | @@ -272,22 +272,23 @@ Use `input-align` prop to align the input value. | error-message | Error message | _string_ | - | | error-message-align | Error message align, can be set to `center` `right` | _FieldTextAlign_ | `left` | | formatter | Input value formatter | _(val: string) => string_ | - | -| format-trigger | When to format value，can be set to `onBlur` | _FieldFormatTrigger_ | `onChange` | +| format-trigger | When to format value, can be set to `onBlur` | _FieldFormatTrigger_ | `onChange` | | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` | | label-class | Label className | _string \| Array \| object_ | - | | label-width | Label width | _number \| string_ | `6.2em` | | label-align | Label align, can be set to `center` `right` | _FieldTextAlign_ | `left` | | input-align | Input align, can be set to `center` `right` | _FieldTextAlign_ | `left` | -| autosize | Textarea auto resize，can accept an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` | +| autosize | Textarea auto resize, can accept an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` | | left-icon | Left side icon name | _string_ | - | | right-icon | Right side icon name | _string_ | - | | icon-prefix | Icon className prefix | _string_ | `van-icon` | | rules | Form validation rules | _FieldRule[]_ | - | -| autocomplete `v3.0.3` | [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute of native input element | _string_ | - | +| autocomplete `v3.0.3` | HTML native attribute, see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| enterkeyhint `v3.4.8` | HTML native attribute, see [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
| _string_ | - | ### Events -| Event | Description | Parameters | +| Event | Description | Arguments | | --- | --- | --- | | update:model-value | Emitted when input value changed | _value: string_ | | focus | Emitted when input is focused | _event: Event_ | diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index 70af5a5e1..f9f60fdce 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -302,7 +302,8 @@ export default { | right-icon | 右侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - | | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | | rules | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _FieldRule[]_ | - | -| autocomplete `v3.0.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| autocomplete `v3.0.3` | HTML 原生属性，用于控制自动完成功能，详见 [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - | +| enterkeyhint `v3.4.8` | HTML 原生属性，用于控制回车键样式，此 API 仅在部分浏览器支持，详见 [MDN - enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
| _string_ | - | ### Events diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js index 7f8dc8fc3..08c7670f6 100644 --- a/packages/vant/src/field/test/index.spec.js +++ b/packages/vant/src/field/test/index.spec.js @@ -426,6 +426,17 @@ test('should allow to set autocomplete attribute', () => { ); }); +test('should allow to set enterkeyhint attribute', () => { + const wrapper = mount(Field, { + props: { + enterkeyhint: 'done', + }, + }); + expect(wrapper.find('input').element.getAttribute('enterkeyhint')).toEqual( + 'done' + ); +}); + test('should change clear icon when using clear-icon prop', async () => { const wrapper = mount(Field, { props: { diff --git a/packages/vant/src/form/Form.tsx b/packages/vant/src/form/Form.tsx index 3483f2a4a..a2d90c6f0 100644 --- a/packages/vant/src/form/Form.tsx +++ b/packages/vant/src/form/Form.tsx @@ -151,10 +151,10 @@ export default defineComponent({ }; const getValues = () => - children.reduce((form, field) => { + children.reduce>((form, field) => { form[field.name] = field.formValue.value; return form; - }, {} as Record); + }, {}); const submit = () => { const values = getValues(); @@ -179,6 +179,7 @@ export default defineComponent({ useExpose({ submit, validate, + getValues, scrollToField, resetValidation, }); diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md index ba387a5cf..fd01184a7 100644 --- a/packages/vant/src/form/README.md +++ b/packages/vant/src/form/README.md @@ -495,7 +495,7 @@ export default { | label-align | Field label align, can be set to `center` `right` | _string_ | `left` | | input-align | Field input align, can be set to `center` `right` | _string_ | `left` | | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | -| validate-trigger | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` | +| validate-trigger | When to validate the form, can be set to `onChange`、`onSubmit` | _string_ | `onBlur` | | colon | Whether to display colon after label | _boolean_ | `false` | | disabled | Whether to disable form | _boolean_ | `false` | | readonly | Whether to be readonly | _boolean_ | `false` | @@ -513,7 +513,7 @@ export default { | message | Error message | _string \| (value, rule) => string_ | | validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ | | pattern | Regex pattern | _RegExp_ | -| trigger | When to validate the form，can be set to `onChange`、`onBlur` | _string_ | +| trigger | When to validate the form, can be set to `onChange`、`onBlur` | _string_ | | formatter | Format value before validate | _(value, rule) => any_ | ### validate-trigger @@ -539,6 +539,7 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Form i | --- | --- | --- | --- | | submit | Submit form | - | - | | validate | Validate form | _name?: string \| string[]_ | _Promise_ | +| getValues `v3.4.8` | Get current form values | - | _Record_ | | resetValidation | Reset validation | _name?: string \| string[]_ | - | | scrollToField | Scroll to field | _name: string, alignToTop: boolean_ | - | diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md index a4a758b57..db5eb615a 100644 --- a/packages/vant/src/form/README.zh-CN.md +++ b/packages/vant/src/form/README.zh-CN.md @@ -577,6 +577,7 @@ export default { | --- | --- | --- | --- | | submit | 提交表单，与点击提交按钮的效果等价 | - | - | | validate | 验证表单，支持传入 `name` 来验证单个或部分表单项 | _name?: string \| string[]_ | _Promise_ | +| getValues `v3.4.8` | 获取所有表单项当前的值 | - | _Record_ | | resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个或部分表单项 | _name?: string \| string[]_ | - | | scrollToField | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - | diff --git a/packages/vant/src/form/test/methods.spec.tsx b/packages/vant/src/form/test/methods.spec.tsx index 5a3b4d9ec..8d3322cf0 100644 --- a/packages/vant/src/form/test/methods.spec.tsx +++ b/packages/vant/src/form/test/methods.spec.tsx @@ -137,3 +137,19 @@ test('scrollToField method', () => { formRef.value?.scrollToField('A'); expect(fn).toHaveBeenCalledTimes(1); }); + +test('getValues method should return all current values', () => { + const formRef = ref(); + mount({ + render() { + return ( +
+ + + + ); + }, + }); + + expect(formRef.value?.getValues()).toEqual({ A: '123', B: '456' }); +}); diff --git a/packages/vant/src/form/types.ts b/packages/vant/src/form/types.ts index aa1dc53db..f5e372f27 100644 --- a/packages/vant/src/form/types.ts +++ b/packages/vant/src/form/types.ts @@ -4,6 +4,7 @@ import type { FormProps } from './Form'; export type FormExpose = { submit: () => void; validate: (name?: string | string[] | undefined) => Promise; + getValues: () => Record; scrollToField: ( name: string, options?: boolean | ScrollIntoViewOptions | undefined diff --git a/packages/vant/src/grid/README.md b/packages/vant/src/grid/README.md index 10cb2dbca..3e1dff803 100644 --- a/packages/vant/src/grid/README.md +++ b/packages/vant/src/grid/README.md @@ -124,7 +124,7 @@ app.use(GridItem); | icon-color | Icon color | _string_ | - | | dot | Whether to show red dot | _boolean_ | `false` | | badge | Content of the badge | _number \| string_ | - | -| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | +| badge-props `v3.2.8` | Props of Badge, see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | | url | Link URL | _string_ | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` | diff --git a/packages/vant/src/icon/README.md b/packages/vant/src/icon/README.md index 4a4a2c016..187ac098b 100644 --- a/packages/vant/src/icon/README.md +++ b/packages/vant/src/icon/README.md @@ -96,7 +96,7 @@ Use `size` prop to set icon size. | name | Icon name or URL | _string_ | `''` | | dot | Whether to show red dot | _boolean_ | `false` | | badge | Content of the badge | _number \| string_ | `''` | -| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | +| badge-props `v3.2.8` | Props of Badge, see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | | color | Icon color | _string_ | `inherit` | | size | Icon size | _number \| string_ | `inherit` | | class-prefix | ClassName prefix | _string_ | `van-icon` | diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md index cf1a36916..99a99982f 100644 --- a/packages/vant/src/image-preview/README.md +++ b/packages/vant/src/image-preview/README.md @@ -140,7 +140,7 @@ export default { | minZoom | Min zoom | _number \| string_ | `1/3` | | closeable | Whether to show close icon | _boolean_ | `false` | | closeIcon | Close icon name | _string_ | `clear` | -| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | +| closeIconPosition | Close icon position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | | transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` | | overlayClass `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - | | overlayStyle `v3.0.8` | Custom overlay style | _object_ | - | @@ -164,7 +164,7 @@ export default { | min-zoom | Min zoom | _number \| string_ | `1/3` | | closeable | Whether to show close icon | _boolean_ | `false` | | close-icon | Close icon name | _string_ | `clear` | -| close-icon-position | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | +| close-icon-position | Close icon position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | | transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` | | overlay-class `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - | | overlay-style `v3.0.8` | Custom overlay style | _object_ | - | @@ -172,12 +172,13 @@ export default { ### Events -| Event | Description | Parameters | +| Event | Description | Arguments | | --- | --- | --- | -| close | Emitted when closing ImagePreview | { index, url } | +| close | Emitted when closing ImagePreview | _value: { index, url }_ | | closed | Emitted when ImagePreview is closed | - | -| change | Emitted when current image changed | index: index of current image | -| scale | Emitted when scaling current image | { index: index of current image, scale: scale of current image} | +| change | Emitted when current image changed | _index: number_ | +| scale | Emitted when scaling current image | _value: ImagePreviewScaleEventParams_ | +| scale | Emitted when scaling current image | _value: ImagePreviewScaleEventParams_ | ### Methods diff --git a/packages/vant/src/image/README.md b/packages/vant/src/image/README.md index a4e24cbe0..1c2746238 100644 --- a/packages/vant/src/image/README.md +++ b/packages/vant/src/image/README.md @@ -101,7 +101,7 @@ app.use(Lazyload); | height | Height | _number \| string_ | - | | radius | Border Radius | _number \| string_ | `0` | | round | Whether to be round | _boolean_ | `false` | -| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | +| lazy-load | Whether to enable lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | | show-error | Whether to show error placeholder | _boolean_ | `true` | | show-loading | Whether to show loading placeholder | _boolean_ | `true` | | error-icon | Error icon | _string_ | `photo-fail` | diff --git a/packages/vant/src/lazyload/README.md b/packages/vant/src/lazyload/README.md index c019e7d32..e9e9be862 100644 --- a/packages/vant/src/lazyload/README.md +++ b/packages/vant/src/lazyload/README.md @@ -80,4 +80,4 @@ app.use(Lazyload, { | filter | The image's listener filter | _object_ | - | | lazyComponent | Lazyload component | _boolean_ | `false` | -> See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload) +> See more: [ vue-lazyload ](https://github.com/hilongjw/vue-lazyload) diff --git a/packages/vant/src/list/README.md b/packages/vant/src/list/README.md index 34454efe7..65a4c1925 100644 --- a/packages/vant/src/list/README.md +++ b/packages/vant/src/list/README.md @@ -167,15 +167,15 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| v-model:loading | Whether to show loading info，the `load` event will not be Emitted when loading | _boolean_ | `false` | -| v-model:error | Whether loading is error，the `load` event will be Emitted only when error text clicked | _boolean_ | `false` | -| finished | Whether loading is finished，the `load` event will not be Emitted when finished | _boolean_ | `false` | +| v-model:loading | Whether to show loading info, the `load` event will not be Emitted when loading | _boolean_ | `false` | +| v-model:error | Whether loading is error, the `load` event will be Emitted only when error text clicked | _boolean_ | `false` | +| finished | Whether loading is finished, the `load` event will not be Emitted when finished | _boolean_ | `false` | | offset | The load event will be Emitted when the distance between the scrollbar and the bottom is less than offset | _number \| string_ | `300` | | loading-text | Loading text | _string_ | `Loading...` | | finished-text | Finished text | _string_ | - | | error-text | Error loaded text | _string_ | - | | immediate-check | Whether to check loading position immediately after mounted | _boolean_ | `true` | -| direction | Scroll direction，can be set to `up` | _string_ | `down` | +| direction | Scroll direction, can be set to `up` | _string_ | `down` | ### Events @@ -231,3 +231,62 @@ The component provides the following CSS variables, which can be used to customi | --van-list-text-font-size | _var(--van-font-size-md)_ | - | | --van-list-text-line-height | _50px_ | - | | --van-list-loading-icon-size | _16px_ | - | + +## FAQ + +### How does List component work? + +List will listen to the scroll event of the browser and calculate the position. When the distance between the bottom of the list and the visible area is less than `offset`, the List component will trigger a `load` event. + +### Why does the load event triggered immediately after mounted? + +A load event will be triggered immediately to load the first screen data. This feature can be disabled by the `immediate-check` prop. + +### Why does the load event triggered continuously? + +If the amount of data loaded in one request is too small, the List will continue to trigger the `load` event until the content fills the screen or the data is fully loaded. + +Therefore, you need to adjust the amount of data per request. Ideally, the amount of data per request should be able to fill the height of one screen. + +### What is the meaning of loading and finished? + +`List` has three states, understanding these states will help you use the component: + +- `loading = false`: Not in loading. The component will detect whether to trigger the `load` event according to the scroll position (if the content of the list is less than one screen, it will be triggered directly). +- `loading = true`: During loading. Indicating that an request is being sent, and the `load` event will not be triggered. +- `finished = true`: Loading is complete. No `load` will not be triggered. + +After each request, you need to manually set `loading` to `false`, indicating the end of loading. + +### Always trigger loading after using float layout? + +If you use the float layout on the content, you can add the `van-clearfix` class to the container to clear the float, so that the List can get the element position correctly. + +```html + +
+
+
+
+
+ +``` + +### Always trigger loading after setting overflow on html and body? + +If the `overflow-x: hidden` style is set on the html and body tags, it will cause the List to always trigger loading. + +```css +html, +body { + overflow-x: hidden; +} +``` + +The reason is that when an element is styled with `overflow-x: hidden`, the element's `overflow-y` will be set to `auto` by the browser, instead of the default value of `visible`, causing the List can not determine the scroll container correctly. The workaround is to remove this style, or add the `height: 100%` style to the html and body tags. + +### Always trigger loading when the direction prop is set to up? + +Setting the `direction` prop to up will trigger the loading of the List component when the scrollbar is at the page top. + +When using this prop, it is recommended to scroll the scroll bar to the page bottom after each data request is completed. diff --git a/packages/vant/src/list/README.zh-CN.md b/packages/vant/src/list/README.zh-CN.md index 74b23dbc6..707aaceef 100644 --- a/packages/vant/src/list/README.zh-CN.md +++ b/packages/vant/src/list/README.zh-CN.md @@ -251,7 +251,7 @@ listRef.value?.check(); ### List 的运行机制是什么？ -List 会监听浏览器的滚动事件并计算列表的位置，当列表底部与可视区域的距离小于 `offset` 时，List 会触发一次 load 事件。 +List 会监听浏览器的滚动事件并计算列表的位置，当列表底部与可视区域的距离小于 `offset` 时，List 会触发一次 `load` 事件。 ### 为什么 List 初始化后会立即触发 load 事件？ @@ -259,21 +259,23 @@ List 初始化后会触发一次 load 事件，用于加载第一屏的数据， ### 为什么会连续触发 load 事件？ -如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。 +如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 `load` 事件，直到内容铺满屏幕或数据全部加载完成。 + +因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。 ### loading 和 finished 分别是什么含义？ `List` 有以下三种状态，理解这些状态有助于你正确地使用 `List` 组件： -- 非加载中，`loading` 为 `false`，此时会根据列表滚动位置判断是否触发 `load` 事件（列表内容不足一屏幕时，会直接触发） -- 加载中，`loading` 为 `true`，表示正在发送异步请求，此时不会触发 `load` 事件 -- 加载完成，`finished` 为 `true`，此时不会触发 `load` 事件 +- 非加载中，`loading` 为 `false`，此时会根据列表滚动位置判断是否触发 `load` 事件（列表内容不足一屏幕时，会直接触发）。 +- 加载中，`loading` 为 `true`，表示正在发送异步请求，此时不会触发 `load` 事件。 +- 加载完成，`finished` 为 `true`，此时不会触发 `load` 事件。 -在每次请求完毕后，需要手动将 `loading` 设置为 `false`，表示加载结束 +在每次请求完毕后，需要手动将 `loading` 设置为 `false`，表示加载结束。 ### 使用 float 布局后一直触发加载？ -若 List 的内容使用了 float 布局，可以在容器上添加 `van-clearfix` 类名来清除浮动，使得 List 能正确判断元素位置 +若 List 的内容使用了 float 布局，可以在容器上添加 `van-clearfix` 类名来清除浮动，使得 List 能正确判断元素位置。 ```html diff --git a/packages/vant/src/locale/README.md b/packages/vant/src/locale/README.md index 9d7cdb31f..111e1ebe7 100644 --- a/packages/vant/src/locale/README.md +++ b/packages/vant/src/locale/README.md @@ -42,6 +42,7 @@ Current supported languages: | Language | Filename | Version | | ------------------------ | ------------ | -------- | | Bangla (Bangladesh) | bn-BD | `v3.4.5` | +| Danish | da-DK | `v3.4.8` | | German | de-DE | - | | German (formal) | de-DE-formal | - | | English | en-US | - | diff --git a/packages/vant/src/locale/README.zh-CN.md b/packages/vant/src/locale/README.zh-CN.md index 8af0706e3..dc19e7a6c 100644 --- a/packages/vant/src/locale/README.zh-CN.md +++ b/packages/vant/src/locale/README.zh-CN.md @@ -43,6 +43,7 @@ Locale.add(messages); | 语言 | 文件名 | 版本 | | -------------------- | ------------ | -------- | | 孟加拉语（孟加拉国） | bn-BD | `v3.4.5` | +| 丹麦语 | da-DK | `v3.4.8` | | 德语 | de-DE | - | | 德语（正式） | de-DE-formal | - | | 英语 | en-US | - | diff --git a/packages/vant/src/locale/lang/da-DK.ts b/packages/vant/src/locale/lang/da-DK.ts new file mode 100644 index 000000000..4f6a920fb --- /dev/null +++ b/packages/vant/src/locale/lang/da-DK.ts @@ -0,0 +1,63 @@ +export default { + name: 'navn', + tel: 'Telefon', + save: 'Gem', + confirm: 'Bekræft', + cancel: 'Annuller', + delete: 'Slet', + loading: 'Indlæser...', + noCoupon: 'Ingen kuponer', + nameEmpty: 'Fyld venligst navnet', + addContact: 'Tilføj kontakt', + telInvalid: 'Forkert telefonnummer', + vanCalendar: { + end: 'Ende', + start: 'Start', + title: 'Kalender', + weekdays: ['Søn', 'Man', 'tirs', 'ons', 'tors', 'Fre', 'lør'], + monthTitle: (year: number, month: number) => `${year}/${month}`, + rangePrompt: (maxRange: number) => `Vælg ikke mere end ${maxRange} dage`, + }, + vanCascader: { + select: 'Vælg', + }, + vanPagination: { + prev: 'Forrige', + next: 'Næste', + }, + vanPullRefresh: { + pulling: 'Træk for at opdatere...', + loosing: 'Løs for at opdatere...', + }, + vanSubmitBar: { + label: 'I alt:', + }, + vanCoupon: { + unlimited: 'Ubegrænset', + discount: (discount: number) => `${discount * 10}% rabat`, + condition: (condition: number) => `Mindst ${condition}`, + }, + vanCouponCell: { + title: 'Kupon', + count: (count: number) => `Du har ${count} kuponer`, + }, + vanCouponList: { + exchange: 'Udveksling', + close: 'Luk', + enable: 'Ledig', + disabled: 'Utilgængelig', + placeholder: 'Kuponkode', + }, + vanAddressEdit: { + area: 'ArOmrådeea', + postal: 'Post', + areaEmpty: 'Vælg venligst et modtageområde', + addressEmpty: 'Adressen må ikke være tom', + postalEmpty: 'Forkert postnummer', + addressDetail: 'Adresse', + defaultAddress: 'Sæt som standardadresse', + }, + vanAddressList: { + add: 'Tilføj ny adresse', + }, +}; diff --git a/packages/vant/src/number-keyboard/README.md b/packages/vant/src/number-keyboard/README.md index 2b2a1d079..93c2cd294 100644 --- a/packages/vant/src/number-keyboard/README.md +++ b/packages/vant/src/number-keyboard/README.md @@ -171,7 +171,7 @@ export default { | v-model | Current value | _string_ | - | | show | Whether to show keyboard | _boolean_ | - | | title | Keyboard title | _string_ | - | -| theme | Keyboard theme，can be set to `custom` | _string_ | `default` | +| theme | Keyboard theme, can be set to `custom` | _string_ | `default` | | maxlength | Value maxlength | _number \| string_ | `Infinity` | | transition | Whether to show transition animation | _boolean_ | `true` | | z-index | Keyboard z-index | _number \| string_ | `100` | diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md index a871e2d9f..f750f34d1 100644 --- a/packages/vant/src/picker/README.md +++ b/packages/vant/src/picker/README.md @@ -349,7 +349,7 @@ export default { | allow-html | Whether to allow HTML in option text | _boolean_ | `false` | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | -| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | +| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` | ### Events diff --git a/packages/vant/src/popover/README.md b/packages/vant/src/popover/README.md index 08c64846d..9f15ac0d5 100644 --- a/packages/vant/src/popover/README.md +++ b/packages/vant/src/popover/README.md @@ -213,8 +213,8 @@ export default { | v-model:show | Whether to show Popover | _boolean_ | `false` | | actions | Actions | _PopoverAction[]_ | `[]` | | placement | Placement | _PopoverPlacement_ | `bottom` | -| theme | Theme，can be set to `dark` | _PopoverTheme_ | `light` | -| trigger | Trigger mode，can be set to `manual` | _PopoverTrigger_ | `click` | +| theme | Theme, can be set to `dark` | _PopoverTheme_ | `light` | +| trigger | Trigger mode, can be set to `manual` | _PopoverTrigger_ | `click` | | duration | Transition duration, unit second | _number \| string_ | `0.3` | | offset | Distance to reference | _[number, number]_ | `[0, 8]` | | overlay | Whether to show overlay | _boolean_ | `false` | diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md index 024907051..b8155579d 100644 --- a/packages/vant/src/popup/README.md +++ b/packages/vant/src/popup/README.md @@ -119,7 +119,7 @@ Use `teleport` prop to specify mount location. | close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` | | closeable | Whether to show close icon | _boolean_ | `false` | | close-icon | Close icon name | _string_ | `cross` | -| close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | +| close-icon-position | Close Icon Position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | | before-close `v3.1.4` | Callback function before close | _(action: string) => boolean \| Promise\_ | - | | icon-prefix `v3.0.18` | Icon className prefix | _string_ | `van-icon` | | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - | diff --git a/packages/vant/src/progress/README.md b/packages/vant/src/progress/README.md index 341ed6333..873d61eca 100644 --- a/packages/vant/src/progress/README.md +++ b/packages/vant/src/progress/README.md @@ -40,7 +40,7 @@ Use `percentage` prop to set current progress. ### Custom Style -Use `pivot-text` to custom text，use `color` to custom bar color. +Use `pivot-text` to custom text, use `color` to custom bar color. ```html diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx index 1bed973f7..8cdac65ff 100644 --- a/packages/vant/src/rate/Rate.tsx +++ b/packages/vant/src/rate/Rate.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, type ExtractPropTypes } from 'vue'; +import { computed, defineComponent, ref, type ExtractPropTypes } from 'vue'; // Utils import { @@ -83,6 +83,7 @@ export default defineComponent({ setup(props, { emit }) { const touch = useTouch(); const [itemRefs, setItemRefs] = useRefs(); + const groupRef = ref(); const untouchable = () => props.readonly || props.disabled || !props.touchable; @@ -100,28 +101,69 @@ export default defineComponent({ ) ); - let ranges: Array<{ left: number; score: number }>; + let ranges: Array<{ + left: number; + top: number; + height: number; + score: number; + }>; + + let groupRefRect: DOMRect; + let minRectTop = Number.MAX_SAFE_INTEGER; + let maxRectTop = Number.MIN_SAFE_INTEGER; const updateRanges = () => { + groupRefRect = useRect(groupRef); + const rects = itemRefs.value.map(useRect); ranges = []; rects.forEach((rect, index) => { + minRectTop = Math.min(rect.top, minRectTop); + maxRectTop = Math.max(rect.top, maxRectTop); + if (props.allowHalf) { ranges.push( - { score: index + 0.5, left: rect.left }, - { score: index + 1, left: rect.left + rect.width / 2 } + { + score: index + 0.5, + left: rect.left, + top: rect.top, + height: rect.height, + }, + { + score: index + 1, + left: rect.left + rect.width / 2, + top: rect.top, + height: rect.height, + } ); } else { - ranges.push({ score: index + 1, left: rect.left }); + ranges.push({ + score: index + 1, + left: rect.left, + top: rect.top, + height: rect.height, + }); } }); }; - const getScoreByPosition = (x: number) => { + const getScoreByPosition = (x: number, y: number) => { for (let i = ranges.length - 1; i > 0; i--) { - if (x > ranges[i].left) { - return ranges[i].score; + if (y >= groupRefRect.top && y <= groupRefRect.bottom) { + if ( + x > ranges[i].left && + y >= ranges[i].top && + y <= ranges[i].top + ranges[i].height + ) { + return ranges[i].score; + } + } else { + const curTop = y < groupRefRect.top ? minRectTop : maxRectTop; + + if (x > ranges[i].left && ranges[i].top === curTop) { + return ranges[i].score; + } } } return props.allowHalf ? 0.5 : 1; @@ -151,9 +193,9 @@ export default defineComponent({ touch.move(event); if (touch.isHorizontal()) { - const { clientX } = event.touches[0]; + const { clientX, clientY } = event.touches[0]; preventDefault(event); - select(getScoreByPosition(clientX)); + select(getScoreByPosition(clientX, clientY)); } }; @@ -185,7 +227,9 @@ export default defineComponent({ const onClickItem = (event: MouseEvent) => { updateRanges(); - select(allowHalf ? getScoreByPosition(event.clientX) : score); + select( + allowHalf ? getScoreByPosition(event.clientX, event.clientY) : score + ); }; return ( @@ -226,6 +270,7 @@ export default defineComponent({ return () => (
[]) { ({ left: index * 25, width: 25, + top: 0, + height: 25, } as DOMRect); return true; }); diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md index dec8a27f7..b78aa2d13 100644 --- a/packages/vant/src/search/README.md +++ b/packages/vant/src/search/README.md @@ -155,7 +155,7 @@ export default { | error | Whether to mark the input content in red | _boolean_ | `false` | | error-message `v3.0.12` | Error message | _string_ | - | | formatter `v3.0.12` | Input value formatter | _(val: string) => string_ | - | -| format-trigger `v3.0.12` | When to format value，can be set to `onBlur` | _string_ | `onChange` | +| format-trigger `v3.0.12` | When to format value, can be set to `onBlur` | _string_ | `onChange` | | input-align | Text align of field, can be set to `center` `right` | _string_ | `left` | | left-icon | Left icon name | _string_ | `search` | | right-icon | Right icon name | _string_ | - | diff --git a/packages/vant/src/share-sheet/README.md b/packages/vant/src/share-sheet/README.md index 3b5782515..fc8981b77 100644 --- a/packages/vant/src/share-sheet/README.md +++ b/packages/vant/src/share-sheet/README.md @@ -192,7 +192,7 @@ export default { | --- | --- | --- | | name | Option name | _string_ | | description | Option description | _string_ | -| icon | Option icon，can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` `weapp-qrcode` `wechat-moments` or image URL | _string_ | +| icon | Option icon, can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` `weapp-qrcode` `wechat-moments` or image URL | _string_ | | className | Option className is used to set the class props to the share item | _string_ | ### Events diff --git a/packages/vant/src/sidebar/README.md b/packages/vant/src/sidebar/README.md index 7bca9155b..6e6900458 100644 --- a/packages/vant/src/sidebar/README.md +++ b/packages/vant/src/sidebar/README.md @@ -107,7 +107,7 @@ export default { | title | Content | _string_ | `''` | | dot | Whether to show red dot | _boolean_ | `false` | | badge | Content of the badge | _number \| string_ | `''` | -| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | +| badge-props `v3.2.8` | Props of Badge, see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | | disabled | Whether to be disabled | _boolean_ | `false` | | url | Link | _string_ | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - | diff --git a/packages/vant/src/skeleton/README.md b/packages/vant/src/skeleton/README.md index 9e167cc23..0a9018194 100644 --- a/packages/vant/src/skeleton/README.md +++ b/packages/vant/src/skeleton/README.md @@ -66,12 +66,12 @@ export default { | row-width | Row width, can be array | _number \| string \|
(number \| string)[]_ | `100%` | | title | Whether to show title placeholder | _boolean_ | `false` | | avatar | Whether to show avatar placeholder | _boolean_ | `false` | -| loading | Whether to show skeleton，pass `false` to show child component | _boolean_ | `true` | +| loading | Whether to show skeleton, pass `false` to show child component | _boolean_ | `true` | | animate | Whether to enable animation | _boolean_ | `true` | | round | Whether to show round title and row | _boolean_ | `false` | | title-width | Title width | _number \| string_ | `40%` | | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` | -| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` | +| avatar-shape | Shape of avatar placeholder, can be set to `square` | _string_ | `round` | ### Types diff --git a/packages/vant/src/stepper/README.md b/packages/vant/src/stepper/README.md index 7bb37910e..b8629e91d 100644 --- a/packages/vant/src/stepper/README.md +++ b/packages/vant/src/stepper/README.md @@ -139,7 +139,7 @@ export default { | disable-plus | Whether to disable plus button | _boolean_ | `false` | | disable-minus | Whether to disable minus button | _boolean_ | `false` | | disable-input | Whether to disable input | _boolean_ | `false` | -| before-change | Callback function before changing，return `false` to prevent change，support return Promise | _(value: number \| string) => boolean \| Promise\_ | `false` | +| before-change | Callback function before changing, return `false` to prevent change, support return Promise | _(value: number \| string) => boolean \| Promise\_ | `false` | | show-plus | Whether to show plus button | _boolean_ | `true` | | show-minus | Whether to show minus button | _boolean_ | `true` | | show-input | Whether to show input | _boolean_ | `true` | diff --git a/packages/vant/src/submit-bar/README.md b/packages/vant/src/submit-bar/README.md index 39d854ceb..948f7d989 100644 --- a/packages/vant/src/submit-bar/README.md +++ b/packages/vant/src/submit-bar/README.md @@ -94,7 +94,7 @@ export default { | --- | --- | --- | --- | | price | Price | _number_ | - | | decimal-length | Price decimal length | _number \| string_ | `2` | -| label | Price left label | _string_ | `Total：` | +| label | Price left label | _string_ | `Total: ` | | suffix-label | Price right label | _string_ | - | | text-align | Price label text align can be set to `left` | _string_ | `right` | | button-text | Button text | _string_ | - | diff --git a/packages/vant/src/swipe-cell/README.md b/packages/vant/src/swipe-cell/README.md index a36ee7c4c..06002f7d9 100644 --- a/packages/vant/src/swipe-cell/README.md +++ b/packages/vant/src/swipe-cell/README.md @@ -127,8 +127,8 @@ export default { | Event | Description | Arguments | | --- | --- | --- | | click | Emitted when SwipeCell is clicked | _position: 'left' \| 'right' \| 'cell' \| 'outside'_ | -| open | Emitted when SwipeCell is opened | _{ name: string \| number, position: 'left' \| 'right' }_ | -| close | Emitted when SwipeCell is closed | _{ name: string \| number, position: 'left' \| 'right' \| 'cell' \| 'outside' }_ | +| open | Emitted when SwipeCell is opened | _value: { name: string \| number, position: 'left' \| 'right' }_ | +| close | Emitted when SwipeCell is closed | _value: { name: string \| number, position: 'left' \| 'right' \| 'cell' \| 'outside' }_ | ### beforeClose Params diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md index e1c854703..279da3df8 100644 --- a/packages/vant/src/tab/README.md +++ b/packages/vant/src/tab/README.md @@ -256,7 +256,7 @@ export default { | swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | | title-active-color | Title active color | _string_ | - | | title-inactive-color | Title inactive color | _string_ | - | -| before-change | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name: number \| string) => boolean \| Promise\_ | - | +| before-change | Callback function before changing tabs, return `false` to prevent change, support return Promise | _(name: number \| string) => boolean \| Promise\_ | - | ### Tab Props diff --git a/packages/vant/src/tabbar/README.md b/packages/vant/src/tabbar/README.md index 92958a3e1..94b838815 100644 --- a/packages/vant/src/tabbar/README.md +++ b/packages/vant/src/tabbar/README.md @@ -173,7 +173,7 @@ export default { | route | Whether to enable route mode | _boolean_ | `false` | | placeholder | Whether to generate a placeholder element when fixed | _boolean_ | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` | -| before-change | Callback function before changing tab，return `false` to prevent change，support return Promise | _(name: number \| string) => boolean \| Promise\_ | - | +| before-change | Callback function before changing tab, return `false` to prevent change, support return Promise | _(name: number \| string) => boolean \| Promise\_ | - | ### Tabbar Events @@ -190,7 +190,7 @@ export default { | icon-prefix | Icon className prefix | _string_ | `van-icon` | | dot | Whether to show red dot | _boolean_ | - | | badge | Content of the badge | _number \| string_ | `''` | -| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | +| badge-props `v3.2.8` | Props of Badge, see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - | | url | Link | _string_ | - | | to | Target route of the link, same as to of vue-router | _string \| object_ | - | | replace | If true, the navigation will not leave a history record | _boolean_ | `false` | diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md index 1b8fb7e00..ae738d83b 100644 --- a/packages/vant/src/time-picker/README.md +++ b/packages/vant/src/time-picker/README.md @@ -183,7 +183,7 @@ export default { | formatter | Option text formatter | _(type: string, option: PickerOption) => PickerOption_ | - | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | -| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | +| swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` | ### Events diff --git a/packages/vant/src/uploader/README.md b/packages/vant/src/uploader/README.md index e9d5838ea..d7727cec5 100644 --- a/packages/vant/src/uploader/README.md +++ b/packages/vant/src/uploader/README.md @@ -310,14 +310,14 @@ export default { | preview-size | Size of preview image | _number \| string \| Array_ | `80px` | | preview-image | Whether to show image preview | _boolean_ | `true` | | preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` | -| preview-options | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - | +| preview-options | Options of full screen image preview, see [ImagePreview](#/en-US/image-preview) | _object_ | - | | multiple | Whether to enable multiple selection pictures | _boolean_ | `false` | | disabled | Whether to disabled the upload | _boolean_ | `false` | | readonly `v3.1.5` | Whether to make upload area readonly | _boolean_ | `false` | | deletable | Whether to show delete icon | _boolean_ | `true` | | show-upload | Whether to show upload area | _boolean_ | `true` | -| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | -| capture | Capture，can be set to `camera` | _string_ | - | +| lazy-load | Whether to enable lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` | +| capture | Capture, can be set to `camera` | _string_ | - | | after-read | Hook after reading the file | _Function_ | - | | before-read | Hook before reading the file, return false to stop reading the file, can return Promise | _Function_ | - | | before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | _Function_ | - | diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 088603cf4..8384c57a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,7 +95,7 @@ importers: '@types/less': ^3.0.3 '@types/markdown-it': ^12.2.3 '@vant/eslint-config': ^3.3.2 - '@vant/markdown-vetur': ^2.2.0 + '@vant/markdown-vetur': ^2.3.0 '@vant/stylelint-config': ^1.4.2 '@vant/touch-emulator': ^1.3.2 '@vitejs/plugin-vue': ^2.0.0