mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(VantMarkdownVetur): support arguments of events (#10474)
* feat(VantMarkdownVetur): support arguments of events * fix(vant): fix mistake in readme * docs(vant): fix '，' to ',' * fix(vant-markdown-vetur): support events arguments * docs(AddressList): fix mistake * docs(AddressList): prettier * docs(Collapse): adjust * docs(dropdown-menu): adjust * docs(ImagePreview): adjust * fix(vant-markdown-vetur): fix format * fix(vant-markdown-vetur): fix formatter
This commit is contained in:
Nemo Shen
GitHub
parent
d5a9202ddf
commit
7ce66c7939
@ -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();
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -102,9 +102,9 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| save | Emitted when the save button is clicked | content：form content |
|
||||
| save | Emitted when the save button is clicked | content: form content |
|
||||
| focus | Emitted when field is focused | key: field name |
|
||||
| delete | Emitted when confirming delete | content：form content |
|
||||
| delete | Emitted when confirming delete | content: form content |
|
||||
| select-search | Emitted when a search result is selected | value: search content |
|
||||
| click-area | Emitted when the area field is clicked | - |
|
||||
| change-area | Emitted when area changed | values: area values |
|
||||
|
||||
@ -77,7 +77,7 @@ export default {
|
||||
|
||||
### Initial Value
|
||||
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
To have a selected value, simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area title="Title" :area-list="areaList" value="110101" />
|
||||
@ -120,7 +120,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
| item-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| columns-num | Level of picker | _number \| string_ | `3` |
|
||||
| visible-item-count | 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` |
|
||||
| is-oversea-code | The method to validate oversea code | _() => boolean_ | - |
|
||||
|
||||
### Events
|
||||
@ -129,7 +129,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
| --- | --- | --- |
|
||||
| confirm | Emitted when the confirm button is clicked | _result: ConfirmResult_ |
|
||||
| cancel | Emitted when the cancel button is clicked | - |
|
||||
| change | Emitted when current option changed | current values，column index |
|
||||
| change | Emitted when current option changed | current: values, column: index |
|
||||
|
||||
### ConfirmResult
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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_ | `#ee0a24` |
|
||||
| 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_ | - |
|
||||
|
||||
@ -112,7 +112,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips：ConfigProvider only affects its child components.
|
||||
> Tips: ConfigProvider only affects its child components.
|
||||
|
||||
### Basic Variables
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -293,7 +293,7 @@ export default {
|
||||
| columns-order | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
|
||||
| item-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 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` |
|
||||
|
||||
### DatePicker Props
|
||||
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
|
||||
@ -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,13 +272,13 @@ 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` |
|
||||
@ -288,7 +288,7 @@ Use `input-align` prop to align the input value.
|
||||
|
||||
### 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_ |
|
||||
|
||||
@ -497,7 +497,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` |
|
||||
@ -515,7 +515,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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -328,7 +328,7 @@ export default {
|
||||
| default-index | Default value index of single column picker | _number \| string_ | `0` |
|
||||
| item-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 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
|
||||
|
||||
@ -336,9 +336,9 @@ Picker events will pass different parameters according to the columns are single
|
||||
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| confirm | Emitted when click confirm button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| cancel | Emitted when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| change | Emitted when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index |
|
||||
| confirm | Emitted when click confirm button.<br>**Notice: the arguments return an array when the multiple columns mode.** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
| cancel | Emitted when click cancel button.<br>**Notice: the arguments return an array when the multiple columns mode.** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
| change | Emitted when current option changed.<br>**Notice: the arguments return an array when the multiple columns mode.** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -359,9 +359,9 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，当前列对应的索引 |
|
||||
| confirm | 点击完成按钮时触发。<br>**注意：当传入多列数据时，返回值为数组格式。** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
| cancel | 点击取消按钮时触发。<br>**注意：当传入多列数据时，返回值为数组格式。** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
| change | 选项改变时触发。<br>**注意：当传入多列数据时，返回值为数组格式。** | _currentValue: PickerOption \| PickerOption[], currentIndex: number \| number[]_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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
|
||||
|
||||
@ -283,7 +283,7 @@ export default {
|
||||
| rendered | Emitted when content first rendered in lazy-render mode | _name: string \| number, title: string_ |
|
||||
| scroll | Emitted when tab scrolling in sticky mode | _{ scrollTop: number, isFixed: boolean }_ |
|
||||
|
||||
> Tips：click and disabled event is deprecated，place use click-tab event instead.
|
||||
> Tips: click and disabled event is deprecated, place use click-tab event instead.
|
||||
|
||||
### Tabs Methods
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user