mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
ac7d6dd542
@ -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
|
||||
|
||||
|
||||
@ -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 以上 |
|
||||
|
||||
## 链接
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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 以上 |
|
||||
|
||||
### 其他链接
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
<!-- 正确写法，不显示 0 -->
|
||||
<van-badge :content="0" :show-zero="false" />
|
||||
|
||||
<!-- 错误写法，显示 0 -->
|
||||
<van-badge content="0" :show-zero="false" />
|
||||
```
|
||||
|
||||
@ -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
|
||||
<van-calendar v-model:show="show" :round="false" position="right" />
|
||||
@ -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_ |
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
|
||||
@ -114,15 +114,15 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | Names of current active panels | accordion mode： _number \| string_<br>non-accordion mode：_(number \| string)[]_ | - |
|
||||
| v-model | Names of current active panels | accordion mode: _number \| string_<br>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<string \| number>_ |
|
||||
|
||||
### 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_ | - |
|
||||
|
||||
@ -148,7 +148,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips：ConfigProvider only affects its child components.
|
||||
> Tips: ConfigProvider only affects its child components.
|
||||
|
||||
## Variables
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
|
||||
@ -80,6 +80,7 @@ export const fieldSharedProps = {
|
||||
placeholder: String,
|
||||
autocomplete: String,
|
||||
errorMessage: String,
|
||||
enterkeyhint: String,
|
||||
clearTrigger: makeStringProp<FieldClearTrigger>('focus'),
|
||||
formatTrigger: makeStringProp<FieldFormatTrigger>('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,
|
||||
|
||||
@ -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,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| FieldAutosizeConfig_ | `false` |
|
||||
| autosize | Textarea auto resize, can accept an object,<br>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)<br> | _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_ |
|
||||
|
||||
@ -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)<br> | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -151,10 +151,10 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const getValues = () =>
|
||||
children.reduce((form, field) => {
|
||||
children.reduce<Record<string, unknown>>((form, field) => {
|
||||
form[field.name] = field.formValue.value;
|
||||
return form;
|
||||
}, {} as Record<string, unknown>);
|
||||
}, {});
|
||||
|
||||
const submit = () => {
|
||||
const values = getValues();
|
||||
@ -179,6 +179,7 @@ export default defineComponent({
|
||||
useExpose<FormExpose>({
|
||||
submit,
|
||||
validate,
|
||||
getValues,
|
||||
scrollToField,
|
||||
resetValidation,
|
||||
});
|
||||
|
||||
@ -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<string, unknown>_ |
|
||||
| resetValidation | Reset validation | _name?: string \| string[]_ | - |
|
||||
| scrollToField | Scroll to field | _name: string, alignToTop: boolean_ | - |
|
||||
|
||||
|
||||
@ -577,6 +577,7 @@ export default {
|
||||
| --- | --- | --- | --- |
|
||||
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
|
||||
| validate | 验证表单，支持传入 `name` 来验证单个或部分表单项 | _name?: string \| string[]_ | _Promise_ |
|
||||
| getValues `v3.4.8` | 获取所有表单项当前的值 | - | _Record<string, unknown>_ |
|
||||
| resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个或部分表单项 | _name?: string \| string[]_ | - |
|
||||
| scrollToField | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - |
|
||||
|
||||
|
||||
@ -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<FormInstance>();
|
||||
mount({
|
||||
render() {
|
||||
return (
|
||||
<Form ref={formRef}>
|
||||
<Field name="A" modelValue="123" />
|
||||
<Field name="B" modelValue="456" />
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(formRef.value?.getValues()).toEqual({ A: '123', B: '456' });
|
||||
});
|
||||
|
||||
@ -4,6 +4,7 @@ import type { FormProps } from './Form';
|
||||
export type FormExpose = {
|
||||
submit: () => void;
|
||||
validate: (name?: string | string[] | undefined) => Promise<void>;
|
||||
getValues: () => Record<string, unknown>;
|
||||
scrollToField: (
|
||||
name: string,
|
||||
options?: boolean | ScrollIntoViewOptions | undefined
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
<van-list>
|
||||
<div class="van-clearfix">
|
||||
<div class="float-item" />
|
||||
<div class="float-item" />
|
||||
<div class="float-item" />
|
||||
</div>
|
||||
</van-list>
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
@ -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
|
||||
<van-list>
|
||||
|
||||
@ -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 | - |
|
||||
|
||||
@ -43,6 +43,7 @@ Locale.add(messages);
|
||||
| 语言 | 文件名 | 版本 |
|
||||
| -------------------- | ------------ | -------- |
|
||||
| 孟加拉语（孟加拉国） | bn-BD | `v3.4.5` |
|
||||
| 丹麦语 | da-DK | `v3.4.8` |
|
||||
| 德语 | de-DE | - |
|
||||
| 德语（正式） | de-DE-formal | - |
|
||||
| 英语 | en-US | - |
|
||||
|
||||
63
packages/vant/src/locale/lang/da-DK.ts
Normal file
63
packages/vant/src/locale/lang/da-DK.ts
Normal file
@ -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',
|
||||
},
|
||||
};
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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\<boolean\>_ | - |
|
||||
| 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_ | - |
|
||||
|
||||
@ -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
|
||||
<van-progress pivot-text="Orange" color="#f2826a" :percentage="25" />
|
||||
|
||||
@ -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<Element>();
|
||||
|
||||
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 () => (
|
||||
<div
|
||||
ref={groupRef}
|
||||
role="radiogroup"
|
||||
class={bem({
|
||||
readonly: props.readonly,
|
||||
|
||||
@ -8,6 +8,8 @@ function mockGetBoundingClientRect(items: DOMWrapper<Element>[]) {
|
||||
({
|
||||
left: index * 25,
|
||||
width: 25,
|
||||
top: 0,
|
||||
height: 25,
|
||||
} as DOMRect);
|
||||
return true;
|
||||
});
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -66,12 +66,12 @@ export default {
|
||||
| row-width | Row width, can be array | _number \| string \|<br>(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
|
||||
|
||||
|
||||
@ -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\<boolean\>_ | `false` |
|
||||
| before-change | Callback function before changing, return `false` to prevent change, support return Promise | _(value: number \| string) => boolean \| Promise\<boolean\>_ | `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` |
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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\<boolean\>_ | - |
|
||||
| before-change | Callback function before changing tabs, return `false` to prevent change, support return Promise | _(name: number \| string) => boolean \| Promise\<boolean\>_ | - |
|
||||
|
||||
### Tab Props
|
||||
|
||||
|
||||
@ -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\<boolean\>_ | - |
|
||||
| before-change | Callback function before changing tab, return `false` to prevent change, support return Promise | _(name: number \| string) => boolean \| Promise\<boolean\>_ | - |
|
||||
|
||||
### 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` |
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user