diff --git a/README.md b/README.md index eb62c1629..e68ca30a5 100644 --- a/README.md +++ b/README.md @@ -29,14 +29,14 @@ ## Features -* 60+ Reusable components -* 90% Unit test coverage -* Extensive documentation and demos -* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) -* Support Custom Theme -* Support i18n -* Support TS -* Support SSR +- 60+ Reusable components +- 90% Unit test coverage +- Extensive documentation and demos +- Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) +- Support Custom Theme +- Support i18n +- Support TS +- Support SSR ## Install @@ -71,17 +71,17 @@ Modern browsers and Android 4.0+, iOS 8.0+. ## Ecosystem | Project | Description | -|-----|------| +| --- | --- | | [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | -| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | +| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | | [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons | | [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers | ## Links -* [Documentation](https://youzan.github.io/vant) -* [Changelog](https://youzan.github.io/vant#/en-US/changelog) +- [Documentation](https://youzan.github.io/vant) +- [Changelog](https://youzan.github.io/vant#/en-US/changelog) ## Preview diff --git a/README.zh-CN.md b/README.zh-CN.md index 751095a9e..8b4179d5f 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -25,14 +25,14 @@ ## 特性 -* 60+ 高质量组件 -* 90% 单元测试覆盖率 -* 完善的中英文文档和示例 -* 支持按需引入 -* 支持主题定制 -* 支持国际化 -* 支持 TS -* 支持 SSR +- 60+ 高质量组件 +- 90% 单元测试覆盖率 +- 完善的中英文文档和示例 +- 支持按需引入 +- 支持主题定制 +- 支持国际化 +- 支持 TS +- 支持 SSR ## 安装 @@ -83,7 +83,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手 ## 生态 | 项目 | 描述 | -|-----|------| +| --- | --- | | [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | | [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | @@ -92,9 +92,9 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手 ## 链接 -* [详细文档](https://youzan.github.io/vant) -* [更新日志](https://youzan.github.io/vant#/zh-CN/changelog) -* [码云镜像](https://gitee.com/organizations/vant-contrib) +- [详细文档](https://youzan.github.io/vant) +- [更新日志](https://youzan.github.io/vant#/zh-CN/changelog) +- [码云镜像](https://gitee.com/organizations/vant-contrib) ## 手机预览 diff --git a/docs/markdown/home.en-US.md b/docs/markdown/home.en-US.md index 94c63eab9..3e710f5e7 100644 --- a/docs/markdown/home.en-US.md +++ b/docs/markdown/home.en-US.md @@ -31,12 +31,12 @@ Modern browsers and Android 4.0+, iOS 8.0+. ### Ecosystem -| Project | Description | -| ------------------------------------------------------------------------------------------- | ------------------------------ | -| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | -| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | -| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | -| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons | +| Project | Description | +| --- | --- | +| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | +| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | +| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | +| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons | | [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers | ### Links diff --git a/docs/markdown/home.zh-CN.md b/docs/markdown/home.zh-CN.md index 7dda5c38d..91b56a0d9 100644 --- a/docs/markdown/home.zh-CN.md +++ b/docs/markdown/home.zh-CN.md @@ -47,12 +47,12 @@ ### 生态 -| 项目 | 描述 | -| ------------------------------------------------------------------------------------------- | -------------------------- | -| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | -| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | -| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | -| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 | +| 项目 | 描述 | +| --- | --- | +| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | +| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | +| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | +| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 | | [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 | ### 链接 diff --git a/package.json b/package.json index 96853afb2..156e7f33f 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ } }, "lint-staged": { + "*.md": ["prettier --write"], "*.{ts,tsx,js,vue,less}": [ "prettier --write", "git add" @@ -92,7 +93,8 @@ ] }, "prettier": { - "singleQuote": true + "singleQuote": true, + "proseWrap": "never" }, "browserslist": [ "Android >= 4.0", diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index 826afacb0..b6c00b64d 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -29,16 +29,16 @@ export default { actions: [ { name: 'Option' }, { name: 'Option' }, - { name: 'Option', subname: 'Description' } - ] + { name: 'Option', subname: 'Description' }, + ], }; }, methods: { onSelect(item) { this.show = false; Toast(item.name); - } - } + }, + }, }; ``` @@ -59,15 +59,15 @@ import { Toast } from 'vant'; export default { data() { return { - show: false + show: false, }; }, methods: { onCancel() { this.show = false; Toast('cancel'); - } - } + }, + }, }; ``` @@ -96,10 +96,10 @@ export default { actions: [ { name: 'Option', color: '#07c160' }, { loading: true }, - { name: 'Disabled Option', disabled: true } - ] + { name: 'Disabled Option', disabled: true }, + ], }; - } + }, }; ``` @@ -111,9 +111,9 @@ export default { ``` @@ -122,40 +122,40 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model (value) | Whether to show ActionSheet | *boolean* | `false` | -| actions | Options | *Action[]* | `[]` | -| title | Title | *string* | - | -| cancel-text | Text of cancel button | *string* | - | -| description `v2.2.8` | Description above the options | *string* | - | -| close-icon `v2.2.13` | Close icon name | *string* | `cross` | -| duration `v2.0.3` | Transition duration, unit second | *number \| string* | `0.3` | -| round `v2.0.9` | Whether to show round corner | *boolean* | `true` | -| overlay | Whether to show overlay | *boolean* | `true` | -| lock-scroll | Whether to lock background scroll | *boolean* | `true` | -| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | -| close-on-popstate `v2.5.3` | Whether to close when popstate | *boolean* | `false` | -| close-on-click-action | Whether to close when click action | *boolean* | `false` | -| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | -| get-container | Return the mount node for ActionSheet | *string \| () => Element* | - | +| --- | --- | --- | --- | +| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` | +| actions | Options | _Action[]_ | `[]` | +| title | Title | _string_ | - | +| cancel-text | Text of cancel button | _string_ | - | +| description `v2.2.8` | Description above the options | _string_ | - | +| close-icon `v2.2.13` | Close icon name | _string_ | `cross` | +| duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` | +| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | +| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | +| close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` | +| close-on-click-action | Whether to close when click action | _boolean_ | `false` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | +| get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - | ### Data Structure of Action -| Key | Description | Type | -|------|------|------| -| name | Title | *string* | -| subname | Subtitle | *string* | -| color | Text color | *string* | -| className | className for the option | *any* | -| loading | Whether to be loading status | *boolean* | -| disabled | Whether to be disabled | *boolean* | +| Key | Description | Type | +| --------- | ---------------------------- | --------- | +| name | Title | _string_ | +| subname | Subtitle | _string_ | +| color | Text color | _string_ | +| className | className for the option | _any_ | +| loading | Whether to be loading status | _boolean_ | +| disabled | Whether to be disabled | _boolean_ | ### Events | Event | Description | Arguments | -|------|------|------| -| select | Triggered when click option | *action: Action, index: number* | +| --- | --- | --- | +| select | Triggered when click option | _action: Action, index: number_ | | cancel | Triggered when click cancel button | - | | open | Triggered when open ActionSheet | - | | close | Triggered when close ActionSheet | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index a30300fd5..ce6f29471 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -33,8 +33,8 @@ export default { actions: [ { name: '选项' }, { name: '选项' }, - { name: '选项', subname: '描述信息' } - ] + { name: '选项', subname: '描述信息' }, + ], }; }, methods: { @@ -43,9 +43,9 @@ export default { // 可以通过 close-on-click-action 属性开启自动收起 this.show = false; Toast(item.name); - } - } -} + }, + }, +}; ``` ### 展示取消按钮 @@ -67,16 +67,16 @@ import { Toast } from 'vant'; export default { data() { return { - show: false + show: false, }; }, methods: { onCancel() { this.show = false; Toast('cancel'); - } - } -} + }, + }, +}; ``` ### 展示描述信息 @@ -112,11 +112,11 @@ export default { actions: [ { name: '选项', color: '#07c160' }, { loading: true }, - { name: '禁用选项', disabled: true } - ] + { name: '禁用选项', disabled: true }, + ], }; - } -} + }, +}; ``` ### 自定义面板 @@ -129,9 +129,9 @@ export default { ``` @@ -140,42 +140,42 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model (value) | 是否显示动作面板 | *boolean* | `false` | -| actions | 面板选项列表 | *Action[]* | `[]` | -| title | 顶部标题 | *string* | - | -| cancel-text | 取消按钮文字 | *string* | - | -| description `v2.2.8` | 选项上方的描述信息 | *string* | - | -| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | *string* | `cross` | -| duration `v2.0.3` | 动画时长，单位秒 | *number \| string* | `0.3` | -| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` | -| overlay | 是否显示遮罩层 | *boolean* | `true` | -| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | -| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | -| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | +| --- | --- | --- | --- | +| v-model (value) | 是否显示动作面板 | _boolean_ | `false` | +| actions | 面板选项列表 | _Action[]_ | `[]` | +| title | 顶部标题 | _string_ | - | +| cancel-text | 取消按钮文字 | _string_ | - | +| description `v2.2.8` | 选项上方的描述信息 | _string_ | - | +| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` | +| duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` | +| round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` | +| overlay | 是否显示遮罩层 | _boolean_ | `true` | +| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` | +| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` | +| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` | +| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Action 数据结构 `actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值： -| 键名 | 说明 | 类型 | -|------|------|------| -| name | 标题 | *string* | -| subname | 二级标题 | *string* | -| color | 选项文字颜色 | *string* | -| className | 为对应列添加额外的 class | *any* | -| loading | 是否为加载状态 | *boolean* | -| disabled | 是否为禁用状态 | *boolean* | +| 键名 | 说明 | 类型 | +| --------- | ------------------------ | --------- | +| name | 标题 | _string_ | +| subname | 二级标题 | _string_ | +| color | 选项文字颜色 | _string_ | +| className | 为对应列添加额外的 class | _any_ | +| loading | 是否为加载状态 | _boolean_ | +| disabled | 是否为禁用状态 | _boolean_ | ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| -| select | 点击选项时触发，禁用或加载状态下不会触发 | *action: Action, index: number* | +| --- | --- | --- | +| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ | | cancel | 点击取消按钮时触发 | - | | open | 打开面板时触发 | - | | close | 关闭面板时触发 | - | diff --git a/src/address-edit/README.md b/src/address-edit/README.md index fe9810e5d..bc3f262d0 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -35,8 +35,8 @@ export default { data() { return { areaList, - searchResult: [] - } + searchResult: [], + }; }, methods: { onSave() { @@ -47,16 +47,18 @@ export default { }, onChangeDetail(val) { if (val) { - this.searchResult = [{ - name: '黄龙万科中心', - address: '杭州市西湖区' - }]; + this.searchResult = [ + { + name: '黄龙万科中心', + address: '杭州市西湖区', + }, + ]; } else { this.searchResult = []; } - } - } -} + }, + }, +}; ``` ## API @@ -64,33 +66,33 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| area-list | Area List | *object* | - | -| area-columns-placeholder `v2.2.5` | placeholder of area columns | *string[]* | `[]` | -| area-placeholder | placeholder of area input field | *string* | `Area` | -| address-info | Address Info | *AddressInfo* | `{}` | -| search-result | Address search result | *SearchResult[]* | `[]` | -| show-postal | Whether to show postal field | *boolean* | `false` | -| show-delete | Whether to show delete button | *boolean* | `false` | -| show-set-default | Whether to show default address switch | *boolean* | `false` | -| show-search-result | Whether to show address search result | *boolean* | `false` | -| show-area | Whether to show area cell | *boolean* | `true` | -| show-detail | Whether to show detail field | *boolean* | `true` | -| disable-area `v2.5.0` | Whether to disable area select | *boolean* | `false` | -| save-button-text | Save button text | *string* | `Save` | -| delete-button-text | Delete button text | *string* | `Delete` | -| detail-rows | Detail input rows | *number \| string* | `1` | -| detail-maxlength `v2.0.4` | Detail maxlength | *number \| string* | `200` | -| is-saving | Whether to show save button loading status | *boolean* | `false` | -| is-deleting | Whether to show delete button loading status | *boolean* | `false` | -| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | -| postal-validator `v2.1.2` | The method to validate postal | *(tel: string) => boolean* | - | -| validator | Custom validator | *(key, val) => string* | - | +| --- | --- | --- | --- | +| area-list | Area List | _object_ | - | +| area-columns-placeholder `v2.2.5` | placeholder of area columns | _string[]_ | `[]` | +| area-placeholder | placeholder of area input field | _string_ | `Area` | +| address-info | Address Info | _AddressInfo_ | `{}` | +| search-result | Address search result | _SearchResult[]_ | `[]` | +| show-postal | Whether to show postal field | _boolean_ | `false` | +| show-delete | Whether to show delete button | _boolean_ | `false` | +| show-set-default | Whether to show default address switch | _boolean_ | `false` | +| show-search-result | Whether to show address search result | _boolean_ | `false` | +| show-area | Whether to show area cell | _boolean_ | `true` | +| show-detail | Whether to show detail field | _boolean_ | `true` | +| disable-area `v2.5.0` | Whether to disable area select | _boolean_ | `false` | +| save-button-text | Save button text | _string_ | `Save` | +| delete-button-text | Delete button text | _string_ | `Delete` | +| detail-rows | Detail input rows | _number \| string_ | `1` | +| detail-maxlength `v2.0.4` | Detail maxlength | _number \| string_ | `200` | +| is-saving | Whether to show save button loading status | _boolean_ | `false` | +| is-deleting | Whether to show delete button loading status | _boolean_ | `false` | +| tel-validator | The method to validate tel | _(tel: string) => boolean_ | - | +| postal-validator `v2.1.2` | The method to validate postal | _(tel: string) => boolean_ | - | +| validator | Custom validator | _(key, val) => string_ | - | ### Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | save | Triggered when click save button | content：form content | | focus | Triggered when focus field | key: field name | | delete | Triggered when confirm delete | content：form content | @@ -103,39 +105,39 @@ export default { ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | --------------------------- | | default | Custom content below postal | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| setAddressDetail | Set address detail | addressDetail: string | - | +| Name | Description | Attribute | Return value | +| ---------------- | ------------------ | --------------------- | ------------ | +| setAddressDetail | Set address detail | addressDetail: string | - | ### AddressInfo Data Structure -| key | Description | Type | -|------|------|------| -| id | Address Id | *number \| string* | -| name | Name | *string* | -| tel | Phone | *string* | -| province | Province | *string* | -| city | City | *string* | -| county | County | *string* | -| addressDetail | Detailed Address | *string* | -| areaCode | Area code | *string* | -| postalCode | Postal code | *string* | -| isDefault | Is default address | *boolean* | +| key | Description | Type | +| ------------- | ------------------ | ------------------ | +| id | Address Id | _number \| string_ | +| name | Name | _string_ | +| tel | Phone | _string_ | +| province | Province | _string_ | +| city | City | _string_ | +| county | County | _string_ | +| addressDetail | Detailed Address | _string_ | +| areaCode | Area code | _string_ | +| postalCode | Postal code | _string_ | +| isDefault | Is default address | _boolean_ | ### SearchResult Data Structure -| key | Description | Type | -|------|------|------| -| name | Name | *string* | -| address | Address | *string* | +| key | Description | Type | +| ------- | ----------- | -------- | +| name | Name | _string_ | +| address | Address | _string_ | ### Area Data Structure diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index a6aecdcba..fc19dfd89 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -35,8 +35,8 @@ export default { data() { return { areaList, - searchResult: [] - } + searchResult: [], + }; }, methods: { onSave() { @@ -47,16 +47,18 @@ export default { }, onChangeDetail(val) { if (val) { - this.searchResult = [{ - name: '黄龙万科中心', - address: '杭州市西湖区' - }]; + this.searchResult = [ + { + name: '黄龙万科中心', + address: '杭州市西湖区', + }, + ]; } else { this.searchResult = []; } - } - } -} + }, + }, +}; ``` ## API @@ -64,33 +66,33 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| area-list | 地区列表 | *object* | - | -| area-columns-placeholder `v2.2.5` | 地区选择列占位提示文字 | *string[]* | `[]` | -| area-placeholder | 地区输入框占位提示文字 | *string* | `选择省 / 市 / 区` | -| address-info | 收货人信息初始值 | *AddressInfo* | `{}` | -| search-result | 详细地址搜索结果 | *SearchResult[]* | `[]` | -| show-postal | 是否显示邮政编码 | *boolean* | `false` | -| show-delete | 是否显示删除按钮 | *boolean* | `false` | -| show-set-default | 是否显示默认地址栏 | *boolean* | `false` | -| show-search-result | 是否显示搜索结果 | *boolean* | `false` | -| show-area | 是否显示地区 | *boolean* | `true` | -| show-detail | 是否显示详细地址 | *boolean* | `true` | -| disable-area `v2.5.0` | 是否禁用地区选择 | *boolean* | `false` | -| save-button-text | 保存按钮文字 | *string* | `保存` | -| delete-button-text | 删除按钮文字 | *string* | `删除` | -| detail-rows | 详细地址输入框行数 | *number \| string* | `1` | -| detail-maxlength `v2.0.4` | 详细地址最大长度 | *number \| string* | `200` | -| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | -| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | -| tel-validator | 手机号格式校验函数 | *string => boolean* | - | -| postal-validator `v2.1.2` | 邮政编码格式校验函数 | *string => boolean* | - | -| validator | 自定义校验函数 | *(key, val) => string* | - | +| --- | --- | --- | --- | +| area-list | 地区列表 | _object_ | - | +| area-columns-placeholder `v2.2.5` | 地区选择列占位提示文字 | _string[]_ | `[]` | +| area-placeholder | 地区输入框占位提示文字 | _string_ | `选择省 / 市 / 区` | +| address-info | 收货人信息初始值 | _AddressInfo_ | `{}` | +| search-result | 详细地址搜索结果 | _SearchResult[]_ | `[]` | +| show-postal | 是否显示邮政编码 | _boolean_ | `false` | +| show-delete | 是否显示删除按钮 | _boolean_ | `false` | +| show-set-default | 是否显示默认地址栏 | _boolean_ | `false` | +| show-search-result | 是否显示搜索结果 | _boolean_ | `false` | +| show-area | 是否显示地区 | _boolean_ | `true` | +| show-detail | 是否显示详细地址 | _boolean_ | `true` | +| disable-area `v2.5.0` | 是否禁用地区选择 | _boolean_ | `false` | +| save-button-text | 保存按钮文字 | _string_ | `保存` | +| delete-button-text | 删除按钮文字 | _string_ | `删除` | +| detail-rows | 详细地址输入框行数 | _number \| string_ | `1` | +| detail-maxlength `v2.0.4` | 详细地址最大长度 | _number \| string_ | `200` | +| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` | +| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` | +| tel-validator | 手机号格式校验函数 | _string => boolean_ | - | +| postal-validator `v2.1.2` | 邮政编码格式校验函数 | _string => boolean_ | - | +| validator | 自定义校验函数 | _(key, val) => string_ | - | ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| +| --- | --- | --- | | save | 点击保存按钮时触发 | content：表单内容 | | focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key | | delete | 确认删除地址时触发 | content：表单内容 | @@ -103,41 +105,41 @@ export default { ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | ---------------------- | | default | 在邮政编码下方插入内容 | ### 方法 通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| setAddressDetail | 设置详细地址 | addressDetail: string | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ---------------- | ------------ | --------------------- | ------ | +| setAddressDetail | 设置详细地址 | addressDetail: string | - | ### AddressInfo 数据格式 注意：AddressInfo 仅作为初始值传入，表单最终内容可以在 save 事件中获取 -| key | 说明 | 类型 | -|------|------|------| -| id | 每条地址的唯一标识 | *number \| string* | -| name | 收货人姓名 | *string* | -| tel | 收货人手机号 | *string* | -| province | 省份 | *string* | -| city | 城市 | *string* | -| county | 区县 | *string* | -| addressDetail | 详细地址 | *string* | -| areaCode | 地区编码，通过`省市区选择`获取（必填） | *string* | -| postalCode | 邮政编码 | *string* | -| isDefault | 是否为默认地址 | *boolean* | +| key | 说明 | 类型 | +| ------------- | -------------------------------------- | ------------------ | +| id | 每条地址的唯一标识 | _number \| string_ | +| name | 收货人姓名 | _string_ | +| tel | 收货人手机号 | _string_ | +| province | 省份 | _string_ | +| city | 城市 | _string_ | +| county | 区县 | _string_ | +| addressDetail | 详细地址 | _string_ | +| areaCode | 地区编码，通过`省市区选择`获取（必填） | _string_ | +| postalCode | 邮政编码 | _string_ | +| isDefault | 是否为默认地址 | _boolean_ | ### SearchResult 数据格式 -| key | 说明 | 类型 | -|------|------|------| -| name | 地名 | *string* | -| address | 详细地址 | *string* | +| key | 说明 | 类型 | +| ------- | -------- | -------- | +| name | 地名 | _string_ | +| address | 详细地址 | _string_ | ### 省市县列表数据格式 diff --git a/src/address-edit/index.js b/src/address-edit/index.js index 2358aee50..623ca6d49 100644 --- a/src/address-edit/index.js +++ b/src/address-edit/index.js @@ -107,7 +107,7 @@ export default createComponent({ if (province && province === city) { arr.splice(1, 1); } - return arr.filter(text => text).join('/'); + return arr.filter((text) => text).join('/'); } return ''; }, @@ -145,9 +145,9 @@ export default createComponent({ }, onAreaConfirm(values) { - values = values.filter(value => !!value); + values = values.filter((value) => !!value); - if (values.some(value => !value.code)) { + if (values.some((value) => !value.code)) { Toast(t('areaEmpty')); return; } @@ -183,7 +183,7 @@ export default createComponent({ items.push('postalCode'); } - const isValid = items.every(item => { + const isValid = items.every((item) => { const msg = this.getErrorMessage(item); if (msg) { this.errorInfo[item] = msg; @@ -261,7 +261,7 @@ export default createComponent({ render() { const { data, errorInfo, searchResult, disableArea } = this; - const onFocus = name => () => this.onFocus(name); + const onFocus = (name) => () => this.onFocus(name); // hide bottom field when use search && detail get focused const hideBottomFields = @@ -314,7 +314,7 @@ export default createComponent({ onFocus={onFocus('addressDetail')} onBlur={this.onDetailBlur} onInput={this.onChangeDetail} - onSelect-search={event => { + onSelect-search={(event) => { this.$emit('select-search', event); }} /> @@ -338,7 +338,7 @@ export default createComponent({ vModel={data.isDefault} vShow={!hideBottomFields} title={t('defaultAddress')} - onChange={event => { + onChange={(event) => { this.$emit('change-default', event); }} /> diff --git a/src/address-list/README.md b/src/address-list/README.md index 6d8e80750..90d31b1a4 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -37,24 +37,24 @@ export default { id: '1', name: 'John Snow', tel: '13000000000', - address: 'Somewhere' + address: 'Somewhere', }, { id: '2', name: 'Ned Stark', tel: '1310000000', - address: 'Somewhere' - } + address: 'Somewhere', + }, ], disabledList: [ { id: '3', name: 'Tywin', tel: '1320000000', - address: 'Somewhere' - } - ] - } + address: 'Somewhere', + }, + ], + }; }, methods: { onAdd() { @@ -62,9 +62,9 @@ export default { }, onEdit(item, index) { Toast('Edit:' + index); - } - } -} + }, + }, +}; ``` ## API @@ -72,19 +72,19 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Id of chosen address | *string* | - | -| list | Address list | *Address[]* | `[]` | -| disabled-list | Disabled address list | *Address[]* | `[]` | -| disabled-text | Disabled text | *string* | - | -| switchable | Whether to allow switch address | *boolean* | `true` | -| add-button-text | Add button text | *string* | `Add new address` | -| default-tag-text `v2.3.0` | Default tag text | *string* | - | +| --- | --- | --- | --- | +| v-model | Id of chosen address | _string_ | - | +| list | Address list | _Address[]_ | `[]` | +| disabled-list | Disabled address list | _Address[]_ | `[]` | +| disabled-text | Disabled text | _string_ | - | +| switchable | Whether to allow switch address | _boolean_ | `true` | +| add-button-text | Add button text | _string_ | `Add new address` | +| default-tag-text `v2.3.0` | Default tag text | _string_ | - | ### Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | add | Triggered when click add button | - | | edit | Triggered when edit address | item: address object，index | | select | Triggered when select address | item: address object，index | @@ -94,18 +94,18 @@ export default { ### Data Structure of Address -| Key | Description | Type | -|------|------|------| -| id | Id | *number \| string* | -| name | Name | *string* | -| tel | Phone | *number \| string* | -| address | Address | *string* | -| isDefault | Is default address | *boolean* | +| Key | Description | Type | +| --------- | ------------------ | ------------------ | +| id | Id | _number \| string_ | +| name | Name | _string_ | +| tel | Phone | _number \| string_ | +| address | Address | _string_ | +| isDefault | Is default address | _boolean_ | ### Slots -| Name | Description | SlotProps | -|------|------|------| -| default | Custom content after list | - | -| top | Custom content before list | - | -| item-bottom `v2.5.0` | Custom content after list item | item | +| Name | Description | SlotProps | +| -------------------- | ------------------------------ | --------- | +| default | Custom content after list | - | +| top | Custom content before list | - | +| item-bottom `v2.5.0` | Custom content after list item | item | diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 1821b117b..195d1ba5d 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -37,24 +37,24 @@ export default { id: '1', name: '张三', tel: '13000000000', - address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' + address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室', }, { id: '2', name: '李四', tel: '1310000000', - address: '浙江省杭州市拱墅区莫干山路 50 号' - } + address: '浙江省杭州市拱墅区莫干山路 50 号', + }, ], disabledList: [ { id: '3', name: '王五', tel: '1320000000', - address: '浙江省杭州市滨江区江南大道 15 号' - } - ] - } + address: '浙江省杭州市滨江区江南大道 15 号', + }, + ], + }; }, methods: { onAdd() { @@ -62,50 +62,50 @@ export default { }, onEdit(item, index) { Toast('编辑地址:' + index); - } - } -} + }, + }, +}; ``` ## API ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前选中地址的 id | *string* | - | -| list | 地址列表 | *Address[]* | `[]` | -| disabled-list | 不可配送地址列表 | *Address[]* | `[]` | -| disabled-text | 不可配送提示文案 | *string* | - | -| switchable | 是否允许切换地址 | *boolean* | `true` | -| add-button-text | 底部按钮文字 | *string* | `新增地址` | -| default-tag-text `v2.3.0` | 默认地址标签文字 | *string* | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------------- | ----------------- | ----------- | ---------- | +| v-model | 当前选中地址的 id | _string_ | - | +| list | 地址列表 | _Address[]_ | `[]` | +| disabled-list | 不可配送地址列表 | _Address[]_ | `[]` | +| disabled-text | 不可配送提示文案 | _string_ | - | +| switchable | 是否允许切换地址 | _boolean_ | `true` | +| add-button-text | 底部按钮文字 | _string_ | `新增地址` | +| default-tag-text `v2.3.0` | 默认地址标签文字 | _string_ | - | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------|------| -| add | 点击新增按钮时触发 | - | -| edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 | -| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 | -| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 | +| 事件名 | 说明 | 回调参数 | +| --------------- | ------------------------ | --------------------------- | +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | item: 地址对象，index: 索引 | +| select | 切换选中的地址时触发 | item: 地址对象，index: 索引 | +| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 | | select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 | -| click-item | 点击任意地址时触发 | item: 地址对象，index: 索引 | +| click-item | 点击任意地址时触发 | item: 地址对象，index: 索引 | ### Address 数据结构 -| 键名 | 说明 | 类型 | -|------|------|------| -| id | 每条地址的唯一标识 | *number \| string* | -| name | 收货人姓名 | *string* | -| tel | 收货人手机号 | *number \| string* | -| address | 收货地址 | *string* | -| isDefault | 是否为默认地址 | *boolean* | +| 键名 | 说明 | 类型 | +| --------- | ------------------ | ------------------ | +| id | 每条地址的唯一标识 | _number \| string_ | +| name | 收货人姓名 | _string_ | +| tel | 收货人手机号 | _number \| string_ | +| address | 收货地址 | _string_ | +| isDefault | 是否为默认地址 | _boolean_ | ### Slots -| 名称 | 说明 | SlotProps | -|------|------|------| -| default | 在列表下方插入内容 | - | -| top | 在顶部插入内容 | - | +| 名称 | 说明 | SlotProps | +| -------------------- | -------------------- | ---------- | +| default | 在列表下方插入内容 | - | +| top | 在顶部插入内容 | - | | item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 | diff --git a/src/area/README.md b/src/area/README.md index be2f1affc..4d1feadc0 100644 --- a/src/area/README.md +++ b/src/area/README.md @@ -17,7 +17,7 @@ Vue.use(Area); ### Basic Usage -To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. +To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. ```html @@ -33,8 +33,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop ### Columns Number -`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. -Set `columns-num` with 2, you'll have a 2 level picker. +`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker. ```html @@ -57,48 +56,47 @@ Set `columns-num` with 2, you'll have a 2 level picker. ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| value | the `code` of selected area | *string* | - | -| title | Toolbar title | *string* | - | -| confirm-button-text | Text of confirm button | *string* | `Confirm` | -| cancel-button-text | Text of cancel button | *string* | `Cancel` | -| area-list | Area list data | *object* | - | -| columns-placeholder `v2.2.5` | Placeholder of columns | *string[]* | `[]` | -| loading | Whether to show loading prompt | *boolean* | `false` | -| item-height | Option height | *number \| string* | `44` | -| columns-num | Level of picker | *number \| string* | `3` | -| visible-item-count | Count of visible columns | *number \| string* | `5` | -| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | -| is-oversea-code `v2.1.4` | The method to validate oversea code | *() => boolean* | - | +| --- | --- | --- | --- | +| value | the `code` of selected area | _string_ | - | +| title | Toolbar title | _string_ | - | +| confirm-button-text | Text of confirm button | _string_ | `Confirm` | +| cancel-button-text | Text of cancel button | _string_ | `Cancel` | +| area-list | Area list data | _object_ | - | +| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` | +| loading | Whether to show loading prompt | _boolean_ | `false` | +| item-height | Option height | _number \| string_ | `44` | +| columns-num | Level of picker | _number \| string_ | `3` | +| visible-item-count | Count of visible columns | _number \| string_ | `5` | +| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | +| is-oversea-code `v2.1.4` | The method to validate oversea code | _() => boolean_ | - | ### Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | confirm | triggers when clicking the confirm button | an array | | cancel | triggers when clicking the cancel button | - | | change | Triggered when current option changed | Picker instance, current values，column index | ### Slots -| Name | Description | -|------|------| -| title `v2.5.3` | Custom title | -| columns-top `v2.5.3` | Custom content above columns | +| Name | Description | +| ----------------------- | ---------------------------- | +| title `v2.5.3` | Custom title | +| columns-top `v2.5.3` | Custom content above columns | | columns-bottom `v2.5.3` | Custom content below columns | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| reset | Reset all options by code | code?: string | - | +| Name | Description | Attribute | Return value | +| ----- | ------------------------- | ------------- | ------------ | +| reset | Reset all options by code | code?: string | - | ### areaList Data Structure -An object contains three properties: `province_list`, `city_list` and `county_list`. -Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0. +An object contains three properties: `province_list`, `city_list` and `county_list`. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0. Example of `AreaList` @@ -131,15 +129,20 @@ All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/src/area/ An array contains selected area objects. `code` - code of selected area, `name` - name of selected area + ```js -[{ - code: '330000', - name: 'Zhejiang Province' -}, { - code: '330100', - name: 'Hangzhou' -},{ - code: '330105', - name: 'Xihu District' -}] +[ + { + code: '330000', + name: 'Zhejiang Province', + }, + { + code: '330100', + name: 'Hangzhou', + }, + { + code: '330105', + name: 'Xihu District', + }, +]; ``` diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index f61467579..d17bfcf66 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -56,34 +56,34 @@ Vue.use(Area); ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| value | 当前选中的省市区`code` | *string* | - | -| title | 顶部栏标题 | *string* | - | -| confirm-button-text | 确认按钮文字 | *string* | `确认` | -| cancel-button-text | 取消按钮文字 | *string* | `取消` | -| area-list | 省市区数据，格式见下方 | *object* | - | -| columns-placeholder `v2.2.5` | 列占位提示文字 | *string[]* | `[]` | -| loading | 是否显示加载状态 | *boolean* | `false` | -| item-height | 选项高度 | *number \| string* | `44` | -| columns-num | 显示列数，3-省市区，2-省市，1-省 | *number \| string* | `3` | -| visible-item-count | 可见的选项个数 | *number \| string* | `5` | -| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | -| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | *() => boolean* | - | +| --- | --- | --- | --- | +| value | 当前选中的省市区`code` | _string_ | - | +| title | 顶部栏标题 | _string_ | - | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | +| area-list | 省市区数据，格式见下方 | _object_ | - | +| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| item-height | 选项高度 | _number \| string_ | `44` | +| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` | +| visible-item-count | 可见的选项个数 | _number \| string_ | `5` | +| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` | +| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | _() => boolean_ | - | ### Events -| 事件 | 说明 | 回调参数 | -| --- | --- | --- | -| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | -| cancel | 点击取消按钮时 | - | -| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 | +| 事件 | 说明 | 回调参数 | +| ------- | ------------------ | ------------------------------------------- | +| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | +| cancel | 点击取消按钮时 | - | +| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 | ### Slots -| 名称 | 说明 | -|------|------| -| title `v2.5.3` | 自定义标题内容 | -| columns-top `v2.5.3` | 自定义选项上方内容 | +| 名称 | 说明 | +| ----------------------- | ------------------ | +| title `v2.5.3` | 自定义标题内容 | +| columns-top `v2.5.3` | 自定义选项上方内容 | | columns-bottom `v2.5.3` | 自定义选项下方内容 | ### 方法 @@ -91,7 +91,7 @@ Vue.use(Area); 通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | reset | 根据 code 重置所有选项，若不传 code，则重置到第一项 | code?: string | - | ### 省市区列表数据格式 @@ -141,16 +141,16 @@ Vue.use(Area); [ { code: '110000', - name: '北京市' + name: '北京市', }, { code: '110100', - name: '北京市' + name: '北京市', }, { code: '110101', - name: '东城区' - } + name: '东城区', + }, ]; ``` diff --git a/src/button/README.md b/src/button/README.md index 6d1636ba6..3414b3b30 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -44,7 +44,7 @@ Vue.use(Button); ### Loading -```html +```html @@ -52,22 +52,24 @@ Vue.use(Button); ### Shape -```html +```html Square Round ``` ### Icon -```html +```html Button -Button +Button ``` ### Size -```html +```html Large Normal Small @@ -92,7 +94,9 @@ Vue.use(Button); ```html Pure Pure -Gradient +Gradient ``` ## API @@ -100,31 +104,31 @@ Vue.use(Button); ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| type | Can be set to `primary` `info` `warning` `danger` | *string* | `default` | -| size | Can be set to `large` `small` `mini` | *string* | `normal` | -| text | Text | *string* | - | -| color `v2.1.8` | Color, support linear-gradient | *string* | - | -| icon | Left Icon | *string* | - | -| icon-prefix `v2.6.0` | Icon className prefix | *string* | `van-icon` | -| tag | HTML Tag | *string* | `button` | -| native-type | Native Type Attribute | *string* | `''` | -| plain | Whether to be plain button | *boolean* | `false` | -| block | Whether to set display block | *boolean* | `false` | -| round | Whether to be round button | *boolean* | `false` | -| square | Whether to be square button | *boolean* | `false` | -| disabled | Whether to disable button | *boolean* | `false` | -| loading | Whether show loading status | *boolean* | `false` | -| loading-text | Loading text | *string* | - | -| loading-type | Loading type, can be set to `spinner` | *string* | `circular` | -| loading-size | Loading icon size | *string* | `20px` | -| 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` | +| --- | --- | --- | --- | +| type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` | +| size | Can be set to `large` `small` `mini` | _string_ | `normal` | +| text | Text | _string_ | - | +| color `v2.1.8` | Color, support linear-gradient | _string_ | - | +| icon | Left Icon | _string_ | - | +| icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` | +| tag | HTML Tag | _string_ | `button` | +| native-type | Native Type Attribute | _string_ | `''` | +| plain | Whether to be plain button | _boolean_ | `false` | +| block | Whether to set display block | _boolean_ | `false` | +| round | Whether to be round button | _boolean_ | `false` | +| square | Whether to be square button | _boolean_ | `false` | +| disabled | Whether to disable button | _boolean_ | `false` | +| loading | Whether show loading status | _boolean_ | `false` | +| loading-text | Loading text | _string_ | - | +| loading-type | Loading type, can be set to `spinner` | _string_ | `circular` | +| loading-size | Loading icon size | _string_ | `20px` | +| 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` | ### Events | Event | Description | Arguments | -|------|------|------| -| click | Triggered when click button and not disabled or loading | *event: Event* | -| touchstart | Triggered when touch start | *event: TouchEvent* | +| --- | --- | --- | +| click | Triggered when click button and not disabled or loading | _event: Event_ | +| touchstart | Triggered when touch start | _event: TouchEvent_ | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 319adbfdb..092bd1211 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -54,7 +54,7 @@ Vue.use(Button); 通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字 -```html +```html @@ -64,7 +64,7 @@ Vue.use(Button); 通过`square`设置方形按钮，通过`round`设置圆形按钮 -```html +```html 方形按钮 圆形按钮 ``` @@ -73,17 +73,19 @@ Vue.use(Button); 通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL -```html +```html 按钮 -按钮 +按钮 ``` ### 按钮尺寸 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal` -```html +```html 大号按钮 普通按钮 小型按钮 @@ -114,7 +116,9 @@ Vue.use(Button); ```html 单色按钮 单色按钮 -渐变色按钮 +渐变色按钮 ``` ## API @@ -122,32 +126,32 @@ Vue.use(Button); ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type | 类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | -| size | 尺寸，可选值为 `large` `small` `mini` | *string* | `normal` | -| text | 按钮文字 | *string* | - | -| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| tag | 根节点的 HTML 标签 | *string* | `button` | -| native-type | 原生 button 标签的 type 属性 | *string* | - | -| block | 是否为块级元素 | *boolean* | `false` | -| plain | 是否为朴素按钮 | *boolean* | `false` | -| square | 是否为方形按钮 | *boolean* | `false` | -| round | 是否为圆形按钮 | *boolean* | `false` | -| disabled | 是否禁用按钮 | *boolean* | `false` | -| hairline | 是否使用 0.5px 边框 | *boolean* | `false` | -| loading | 是否显示为加载状态 | *boolean* | `false` | -| loading-text | 加载状态提示文字 | *string* | - | -| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | *string* | `circular` | -| loading-size | 加载图标大小 | *string* | `20px` | -| url | 点击后跳转的链接地址 | *string* | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | -| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | +| --- | --- | --- | --- | +| type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | +| size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` | +| text | 按钮文字 | _string_ | - | +| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | +| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| tag | 根节点的 HTML 标签 | _string_ | `button` | +| native-type | 原生 button 标签的 type 属性 | _string_ | - | +| block | 是否为块级元素 | _boolean_ | `false` | +| plain | 是否为朴素按钮 | _boolean_ | `false` | +| square | 是否为方形按钮 | _boolean_ | `false` | +| round | 是否为圆形按钮 | _boolean_ | `false` | +| disabled | 是否禁用按钮 | _boolean_ | `false` | +| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | +| loading | 是否显示为加载状态 | _boolean_ | `false` | +| loading-text | 加载状态提示文字 | _string_ | - | +| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | _string_ | `circular` | +| loading-size | 加载图标大小 | _string_ | `20px` | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击按钮，且按钮状态不为加载或禁用时触发 | *event: Event* | -| touchstart | 开始触摸按钮时触发 | *event: TouchEvent* | +| 事件名 | 说明 | 回调参数 | +| ---------- | ---------------------------------------- | ------------------- | +| click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ | +| touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ | diff --git a/src/calendar/README.md b/src/calendar/README.md index 28e4defd3..7c8628aad 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -29,7 +29,7 @@ export default { data() { return { date: '', - show: false + show: false, }; }, methods: { @@ -39,8 +39,8 @@ export default { onConfirm(date) { this.show = false; this.date = this.formatDate(date); - } - } + }, + }, }; ``` @@ -56,21 +56,21 @@ export default { data() { return { text: '', - show: false + show: false, }; }, methods: { onConfirm(date) { this.show = false; this.text = `${date.length} dates selected`; - } - } + }, + }, }; ``` ### Select Date Range -You can select a date range after setting `type` to` range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time. +You can select a date range after setting `type` to`range`. In range mode, the date returned by the `confirm` event is an array, the first item in the array is the start time and the second item is the end time. ```html @@ -82,7 +82,7 @@ export default { data() { return { date: '', - show: false + show: false, }; }, methods: { @@ -93,14 +93,14 @@ export default { const [start, end] = date; this.show = false; this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`; - } - } + }, + }, }; ``` ### Quick Select -Set `show-confirm` to` false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed. +Set `show-confirm` to`false` to hide the confirm button. In this case, the `confirm` event will be triggered immediately after the selection is completed. ```html @@ -119,11 +119,7 @@ Use `color` prop to custom calendar color Use `min-date` and `max-date` to custom date range ```html - + ``` ```js @@ -132,9 +128,9 @@ export default { return { show: false, minDate: new Date(2010, 0, 1), - maxDate: new Date(2010, 0, 31) + maxDate: new Date(2010, 0, 31), }; - } + }, }; ``` @@ -156,11 +152,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text Use `formatter` to custom day text ```html - + ``` ```js @@ -187,9 +179,9 @@ export default { } return day; - } - } -} + }, + }, +}; ``` ### Custom Position @@ -197,11 +189,7 @@ export default { Use `position` to custom popup position，can be set to `top`、`left`、`right` ```html - + ``` ### Max Range @@ -209,11 +197,7 @@ Use `position` to custom popup position，can be set to `top`、`left`、`right` When selecting a date range, you can use the `max-range` prop to specify the maximum number of selectable days ```html - + ``` ### Tiled display @@ -234,35 +218,35 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| type `v2.5.4` | 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 | -| max-date | Max date | *Date* | Six months after the today | -| default-date | Default selected date | *Date \| Date[]* | Today | -| row-height | Row height | *number \| string* | `64` | -| formatter | Day formatter | *(day: Day) => Day* | - | -| poppable | Whether to show the calendar inside a popup | *boolean* | `true` | -| show-mark | Whether to show background month mark | *boolean* | `true` | -| show-title `v2.5.5` | Whether to show title | *boolean* | `true` | -| show-subtitle `v2.5.5` | Whether to show subtitle | *boolean* | `true` | -| show-confirm | Whether to show confirm button | *boolean* | `true` | -| confirm-text | Confirm button text | *string* | `Confirm` | -| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` | +| --- | --- | --- | --- | +| type `v2.5.4` | 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 | +| max-date | Max date | _Date_ | Six months after the today | +| default-date | Default selected date | _Date \| Date[]_ | Today | +| row-height | Row height | _number \| string_ | `64` | +| formatter | Day formatter | _(day: Day) => Day_ | - | +| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` | +| show-mark | Whether to show background month mark | _boolean_ | `true` | +| show-title `v2.5.5` | Whether to show title | _boolean_ | `true` | +| show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` | +| show-confirm | Whether to show confirm button | _boolean_ | `true` | +| confirm-text | Confirm button text | _string_ | `Confirm` | +| confirm-disabled-text | Confirm button text when disabled | _string_ | `Confirm` | ### Poppable Props Following props are supported when the poppable is true | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Whether to show calendar | *boolean* | `false` | -| position | Popup position, can be set to `top` `right` `left` | *string* | `bottom` | -| round | Whether to show round corner | *boolean* | `true` | -| close-on-popstate `v2.4.4` | Whether to close when popstate | *boolean* | `false` | -| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | Whether to show calendar | _boolean_ | `false` | +| position | Popup position, can be set to `top` `right` `left` | _string_ | `bottom` | +| round | Whether to show round corner | _boolean_ | `true` | +| close-on-popstate `v2.4.4` | Whether to close when popstate | _boolean_ | `false` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | | get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - | ### Range Props @@ -270,28 +254,28 @@ Following props are supported when the poppable is true Following props are supported when the type is range | Attribute | Description | Type | Default | -|------|------|------|------| -| max-range `v2.4.3` | Number of selectable days | *number \| string* | - | -| range-prompt `v2.4.3` | Error message when exceeded max range | *string* | `Choose no more than xx days` | -| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | *boolean* | `fasle` | +| --- | --- | --- | --- | +| max-range `v2.4.3` | Number of selectable days | _number \| string_ | - | +| range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` | +| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` | ### Data Structure of Day | Key | Description | Type | -|------|------|------| -| date | Date | *Date* | -| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | *string* | -| text | Text | *string* | -| topInfo | Top info | *string* | -| bottomInfo | Bottom info | *string* | -| className | Extra className | *string* | +| --- | --- | --- | +| date | Date | _Date_ | +| type | Type, can be set to `selected`、`start`、`middle`、`end`、`disabled` | _string_ | +| text | Text | _string_ | +| topInfo | Top info | _string_ | +| bottomInfo | Bottom info | _string_ | +| className | Extra className | _string_ | ### Events | Event | Description | Arguments | -|------|------|------| -| select | Triggered when select date | *value: Date \| Date[]* | -| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | *value: Date \| Date[]* | +| --- | --- | --- | +| select | Triggered when select date | _value: Date \| Date[]_ | +| confirm | Triggered after date selection is complete，if `show-confirm` is`true`, it is triggered after clicking the confirm button | _value: Date \| Date[]_ | | open `v2.5.2` | Triggered when open Popup | - | | close `v2.5.2` | Triggered when close Popup | - | | opened `v2.5.2` | Triggered when opened Popup | - | @@ -299,15 +283,15 @@ Following props are supported when the type is range ### Slots -| Name | Description | -|------|------| -| title | Custom title | +| Name | Description | +| ------ | ------------- | +| title | Custom title | | footer | Custom fotter | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| reset | Reset selected date to default date | - | - | +| Name | Description | Attribute | Return value | +| ----- | ----------------------------------- | --------- | ------------ | +| reset | Reset selected date to default date | - | - | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 648525321..ba74dd84c 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -29,7 +29,7 @@ export default { data() { return { date: '', - show: false + show: false, }; }, methods: { @@ -39,8 +39,8 @@ export default { onConfirm(date) { this.show = false; this.date = this.formatDate(date); - } - } + }, + }, }; ``` @@ -58,15 +58,15 @@ export default { data() { return { text: '', - show: false + show: false, }; }, methods: { onConfirm(date) { this.show = false; this.text = `选择了 ${date.length} 个日期`; - } - } + }, + }, }; ``` @@ -84,7 +84,7 @@ export default { data() { return { date: '', - show: false + show: false, }; }, methods: { @@ -95,8 +95,8 @@ export default { const [start, end] = date; this.show = false; this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`; - } - } + }, + }, }; ``` @@ -121,11 +121,7 @@ export default { 通过`min-date`和`max-date`定义日历的范围 ```html - + ``` ```js @@ -134,9 +130,9 @@ export default { return { show: false, minDate: new Date(2010, 0, 1), - maxDate: new Date(2010, 0, 31) + maxDate: new Date(2010, 0, 31), }; - } + }, }; ``` @@ -158,11 +154,7 @@ export default { 通过传入`formatter`函数来对日历上每一格的内容进行格式化 ```html - + ``` ```js @@ -189,9 +181,9 @@ export default { } return day; - } - } -} + }, + }, +}; ``` ### 自定义弹出位置 @@ -199,11 +191,7 @@ export default { 通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right` ```html - + ``` ### 日期区间最大范围 @@ -211,11 +199,7 @@ export default { 选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案 ```html - + ``` ### 平铺展示 @@ -236,66 +220,66 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type `v2.5.4` | 选择类型:
`single`表示选择单个日期，
`multiple`表示选择多个日期，
`range`表示选择日期区间 | *string* | `single` | -| title | 日历标题 | *string* | `日期选择` | -| color | 主题色，对底部按钮和选中日期生效 | *string* | `#ee0a24` | -| min-date | 可选择的最小日期 | *Date* | 当前日期 | -| max-date | 可选择的最大日期 | *Date* | 当前日期的六个月后 | -| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | *Date \| Date[]* | 今天 | -| row-height | 日期行高 | *number \| string* | `64` | -| formatter | 日期格式化函数 | *(day: Day) => Day* | - | -| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` | -| show-mark | 是否显示月份背景水印 | *boolean* | `true` | -| show-title `v2.5.5` | 是否展示日历标题 | *boolean* | `true` | -| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | *boolean* | `true` | -| show-confirm | 是否展示确认按钮 | *boolean* | `true` | -| confirm-text | 确认按钮的文字 | *string* | `确定` | -| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` | +| --- | --- | --- | --- | +| type `v2.5.4` | 选择类型:
`single`表示选择单个日期，
`multiple`表示选择多个日期，
`range`表示选择日期区间 | _string_ | `single` | +| title | 日历标题 | _string_ | `日期选择` | +| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` | +| min-date | 可选择的最小日期 | _Date_ | 当前日期 | +| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 | +| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _Date \| Date[]_ | 今天 | +| row-height | 日期行高 | _number \| string_ | `64` | +| formatter | 日期格式化函数 | _(day: Day) => Day_ | - | +| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` | +| show-mark | 是否显示月份背景水印 | _boolean_ | `true` | +| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` | +| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` | +| show-confirm | 是否展示确认按钮 | _boolean_ | `true` | +| confirm-text | 确认按钮的文字 | _string_ | `确定` | +| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` | ### Poppable Props 当 Canlendar 的 `poppable` 为 `true` 时，支持以下 props: | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 是否显示日历弹窗 | *boolean* | `false` | -| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` | -| round | 是否显示圆角弹窗 | *boolean* | `true` | -| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | -| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | +| --- | --- | --- | --- | +| v-model | 是否显示日历弹窗 | _boolean_ | `false` | +| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` | +| round | 是否显示圆角弹窗 | _boolean_ | `true` | +| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | +| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Range Props 当 Canlendar 的 `type` 为 `range` 时，支持以下 props: | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - | -| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | *string* | `选择天数不能超过 xx 天` | -| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | *boolean* | `fasle` | +| --- | --- | --- | --- | +| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - | +| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` | +| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` | ### Day 数据结构 日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容 | 键名 | 说明 | 类型 | -|------|------|------| -| date | 日期对应的 Date 对象 | *Date* | -| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | *string* | -| text | 中间显示的文字 | *string* | -| topInfo | 上方的提示信息 | *string* | -| bottomInfo | 下方的提示信息 | *string* | -| className | 额外类名 | *string* | +| --- | --- | --- | +| date | 日期对应的 Date 对象 | _Date_ | +| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ | +| text | 中间显示的文字 | _string_ | +| topInfo | 上方的提示信息 | _string_ | +| bottomInfo | 下方的提示信息 | _string_ | +| className | 额外类名 | _string_ | ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| -| select | 点击任意日期时触发 | *value: Date \| Date[]* | -| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* | +| --- | --- | --- | +| select | 点击任意日期时触发 | _value: Date \| Date[]_ | +| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | | open `v2.5.2` | 打开弹出层时触发 | - | | close `v2.5.2` | 关闭弹出层时触发 | - | | opened `v2.5.2` | 打开弹出层且动画结束后触发 | - | @@ -303,18 +287,18 @@ export default { ### Slots -| 名称 | 说明 | -|------|------| -| title | 自定义标题 | +| 名称 | 说明 | +| ------ | ------------------ | +| title | 自定义标题 | | footer | 自定义底部区域内容 | ### 方法 通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| reset | 重置选中的日期到默认值 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | ---------------------- | ---- | ------ | +| reset | 重置选中的日期到默认值 | - | - | ## 常见问题 diff --git a/src/card/README.md b/src/card/README.md index a1db3be97..952af913a 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -65,38 +65,38 @@ Use slot to custom content. ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| thumb | Left thumb image URL | *string* | - | -| title | Title | *string* | - | -| desc | Description | *string* | - | -| tag | Tag | *string* | - | -| num | number | *number \| string* | - | -| price | Price | *number \| string* | - | -| origin-price | Origin price | *number \| string* | - | -| 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` | +| --- | --- | --- | --- | +| thumb | Left thumb image URL | _string_ | - | +| title | Title | _string_ | - | +| desc | Description | _string_ | - | +| tag | Tag | _string_ | - | +| num | number | _number \| string_ | - | +| price | Price | _number \| string_ | - | +| origin-price | Origin price | _number \| string_ | - | +| 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` | ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when clicked | *event: Event* | -| click-thumb | Triggered when thumb clicked | *event: Event* | +| Event | Description | Arguments | +| ----------- | ---------------------------- | -------------- | +| click | Triggered when clicked | _event: Event_ | +| click-thumb | Triggered when thumb clicked | _event: Event_ | ### Slots -| Name | Description | -|------|------| -| title | Custom title | -| desc | Custom description | -| num | Custom num | -| price | Custom price | +| Name | Description | +| ------------ | ------------------- | +| title | Custom title | +| desc | Custom description | +| num | Custom num | +| price | Custom price | | origin-price | Custom origin price | -| price-top | Custom price top | -| bottom | Custom price bottom | -| thumb | Custom thumb | -| tag | Custom thumb tag | -| tags | Custom tags | -| footer | Custom footer | +| price-top | Custom price top | +| bottom | Custom price bottom | +| thumb | Custom thumb | +| tag | Custom thumb tag | +| tags | Custom tags | +| footer | Custom footer | diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index 282eb9351..91d51d029 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -67,38 +67,38 @@ Vue.use(Card); ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| thumb | 左侧图片 URL | *string* | - | -| title | 标题 | *string* | - | -| desc | 描述 | *string* | - | -| tag | 图片角标 | *string* | - | -| num | 商品数量 | *number \| string* | - | -| price | 商品价格 | *number \| string* | - | -| origin-price | 商品划线原价 | *number \| string* | - | -| centered | 内容是否垂直居中 | *boolean* | `false` | -| currency | 货币符号 | *string* | `¥` | -| thumb-link | 点击左侧图片后跳转的链接地址 | *string* | - | -| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | +| --- | --- | --- | --- | +| thumb | 左侧图片 URL | _string_ | - | +| title | 标题 | _string_ | - | +| desc | 描述 | _string_ | - | +| tag | 图片角标 | _string_ | - | +| num | 商品数量 | _number \| string_ | - | +| price | 商品价格 | _number \| string_ | - | +| origin-price | 商品划线原价 | _number \| string_ | - | +| centered | 内容是否垂直居中 | _boolean_ | `false` | +| currency | 货币符号 | _string_ | `¥` | +| thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - | +| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | *event: Event* | -| click-thumb | 点击自定义图片时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ----------- | -------------------- | -------------- | +| click | 点击时触发 | _event: Event_ | +| click-thumb | 点击自定义图片时触发 | _event: Event_ | ### Slots -| 名称 | 说明 | -|------|------| -| title | 自定义标题 | -| desc | 自定义描述 | -| num | 自定义数量 | -| price | 自定义价格 | -| origin-price | 自定义商品原价 | -| price-top | 自定义价格上方区域 | -| bottom | 自定义价格下方区域 | -| thumb | 自定义图片 | -| tag | 自定义图片角标 | -| tags | 自定义描述下方标签区域 | -| footer | 自定义右下角内容 | +| 名称 | 说明 | +| ------------ | ---------------------- | +| title | 自定义标题 | +| desc | 自定义描述 | +| num | 自定义数量 | +| price | 自定义价格 | +| origin-price | 自定义商品原价 | +| price-top | 自定义价格上方区域 | +| bottom | 自定义价格下方区域 | +| thumb | 自定义图片 | +| tag | 自定义图片角标 | +| tags | 自定义描述下方标签区域 | +| footer | 自定义右下角内容 | diff --git a/src/cell/README.md b/src/cell/README.md index 50fc59cb8..b52a3c95a 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -26,7 +26,12 @@ Vue.use(CellGroup); ```html - + ``` @@ -90,10 +95,7 @@ Vue.use(CellGroup); ``` @@ -108,54 +110,54 @@ Vue.use(CellGroup); ### CellGroup Props -| Attribute | Description | Type | Default | -|------|------|------|------| -| title | Group title | *string* | - | -| border | Whether to show outer border | *boolean* | `true` | +| Attribute | Description | Type | Default | +| --------- | ---------------------------- | --------- | ------- | +| title | Group title | _string_ | - | +| border | Whether to show outer border | _boolean_ | `true` | ### Cell Props | Attribute | Description | Type | Default | -|------|------|------|------| -| title | Title | *number \| string* | - | -| value | Right text | *number \| string* | - | -| label | Description below the title | *string* | - | -| size | Size，can be set to `large` | *string* | - | -| icon | Left Icon | *string* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | -| border | Whether to show inner border | *boolean* | `true` | -| center | Whether to center content vertically | *boolean* | `true` | -| 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` | -| clickable | Whether to show click feedback when clicked | *boolean* | `false` | -| is-link | Whether to show link icon | *boolean* | `false` | -| required | Whether to show required mark | *boolean* | `false` | -| arrow-direction | Can be set to `left` `up` `down` | *string* | `right` | -| title-style | Title style | *any* | - | -| title-class | Title className | *any* | - | -| value-class | Value className | *any* | - | -| label-class | Label className | *any* | - | +| --- | --- | --- | --- | +| title | Title | _number \| string_ | - | +| value | Right text | _number \| string_ | - | +| label | Description below the title | _string_ | - | +| size | Size，can be set to `large` | _string_ | - | +| icon | Left Icon | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| border | Whether to show inner border | _boolean_ | `true` | +| center | Whether to center content vertically | _boolean_ | `true` | +| 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` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | +| is-link | Whether to show link icon | _boolean_ | `false` | +| required | Whether to show required mark | _boolean_ | `false` | +| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` | +| title-style | Title style | _any_ | - | +| title-class | Title className | _any_ | - | +| value-class | Value className | _any_ | - | +| label-class | Label className | _any_ | - | ### Cell Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click cell | *event: Event* | +| Event | Description | Arguments | +| ----- | ------------------------- | -------------- | +| click | Triggered when click cell | _event: Event_ | ### CellGroup Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | ------------ | | default | Default slot | -| title | Custom title | +| title | Custom title | ### Cell Slots -| Name | Description | -|------|------| -| default | Custom value | -| icon | Custom icon | -| title | Custom title | -| label | Custom label | +| Name | Description | +| ---------- | ----------------- | +| default | Custom value | +| icon | Custom icon | +| title | Custom title | +| label | Custom label | | right-icon | Custom right icon | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 86d1e93b3..989677d53 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -96,10 +96,7 @@ Vue.use(CellGroup); ``` @@ -112,59 +109,58 @@ Vue.use(CellGroup); ``` - ## API ### CellGroup Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 分组标题 | *string* | `-` | -| border | 是否显示外边框 | *boolean* | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------------- | --------- | ------ | +| title | 分组标题 | _string_ | `-` | +| border | 是否显示外边框 | _boolean_ | `true` | ### Cell Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 左侧标题 | *number \| string* | - | -| value | 右侧内容 | *number \| string* | - | -| label | 标题下方的描述信息 | *string* | - | -| size | 单元格大小，可选值为 `large` | *string* | - | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| url | 点击后跳转的链接地址 | *string* | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | -| border | 是否显示内边框 | *boolean* | `true` | -| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | -| clickable | 是否开启点击反馈 | *boolean* | `false` | -| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | -| required | 是否显示表单必填星号 | *boolean* | `false` | -| center | 是否使内容垂直居中 | *boolean* | `false` | -| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | -| title-style | 左侧标题额外样式 | *any* | - | -| title-class | 左侧标题额外类名 | *any* | - | -| value-class | 右侧内容额外类名 | *any* | - | -| label-class | 描述信息额外类名 | *any* | - | +| --- | --- | --- | --- | +| title | 左侧标题 | _number \| string_ | - | +| value | 右侧内容 | _number \| string_ | - | +| label | 标题下方的描述信息 | _string_ | - | +| size | 单元格大小，可选值为 `large` | _string_ | - | +| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| center | 是否使内容垂直居中 | _boolean_ | `false` | +| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | +| title-style | 左侧标题额外样式 | _any_ | - | +| title-class | 左侧标题额外类名 | _any_ | - | +| value-class | 右侧内容额外类名 | _any_ | - | +| label-class | 描述信息额外类名 | _any_ | - | ### Cell Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击单元格时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------- | -------------- | +| click | 点击单元格时触发 | _event: Event_ | ### CellGroup Slots -| 名称 | 说明 | -|------|------| -| default | 默认插槽 | -| title | 自定义分组标题 | +| 名称 | 说明 | +| ------- | -------------- | +| default | 默认插槽 | +| title | 自定义分组标题 | ### Cell Slots -| 名称 | 说明 | -|------|------| -| default | 自定义右侧内容 | -| title | 自定义左侧标题 | -| label | 自定义标题下方描述 | -| icon | 自定义左侧图标 | +| 名称 | 说明 | +| ---------- | ----------------------------- | +| default | 自定义右侧内容 | +| title | 自定义左侧标题 | +| label | 自定义标题下方描述 | +| icon | 自定义左侧图标 | | right-icon | 自定义右侧按钮，默认为`arrow` | diff --git a/src/checkbox/README.md b/src/checkbox/README.md index e0b879117..a5219aec7 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -22,9 +22,9 @@ Vue.use(CheckboxGroup); export default { data() { return { - checked: true + checked: true, }; - } + }, }; ``` @@ -60,18 +60,14 @@ Use icon slot to custom icon customize icon - + + ``` @@ -81,9 +77,9 @@ export default { return { checked: true, activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', - inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', }; - } + }, }; ``` @@ -108,9 +104,9 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an export default { data() { return { - result: ['a', 'b'] + result: ['a', 'b'], }; - } + }, }; ``` @@ -127,9 +123,9 @@ export default { export default { data() { return { - result: [] + result: [], }; - } + }, }; ``` @@ -160,8 +156,8 @@ export default { export default { data() { return { - result: [] - } + result: [], + }; }, methods: { checkAll() { @@ -169,9 +165,9 @@ export default { }, toggleAll() { this.$refs.checkboxGroup.toggleAll(); - } - } -} + }, + }, +}; ``` ### Inside a Cell @@ -186,9 +182,9 @@ export default { :title="`Checkbox ${item}`" @click="toggle(index)" > - + @@ -215,60 +211,60 @@ export default { ### Checkbox Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model (value) | Check status | *boolean* | `false` | -| name | Checkbox name | *any* | - | -| shape | Can be set to `square` | *string* | `round` | -| disabled | Disable checkbox | *boolean* | `false` | -| label-disabled | Whether to disable label click | *boolean* | `false` | -| label-position | Can be set to `left` | *string* | `right` | -| icon-size | Icon size | *number \| string* | `20px` | -| checked-color | Checked color | *string* | `#1989fa` | - | -| bind-group `v2.2.4` | Whether to bind with CheckboxGroup | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model (value) | Check status | _boolean_ | `false` | +| name | Checkbox name | _any_ | - | +| shape | Can be set to `square` | _string_ | `round` | +| disabled | Disable checkbox | _boolean_ | `false` | +| label-disabled | Whether to disable label click | _boolean_ | `false` | +| label-position | Can be set to `left` | _string_ | `right` | +| icon-size | Icon size | _number \| string_ | `20px` | +| checked-color | Checked color | _string_ | `#1989fa` | - | +| bind-group `v2.2.4` | Whether to bind with CheckboxGroup | _boolean_ | `true` | ### CheckboxGroup Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model (value) | Names of all checked checkboxes | *any[]* | - | -| disabled | Whether to disable all checkboxes | *boolean* | `false` | -| max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) | -| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` | -| icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` | -| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - | +| --- | --- | --- | --- | +| v-model (value) | Names of all checked checkboxes | _any[]_ | - | +| disabled | Whether to disable all checkboxes | _boolean_ | `false` | +| max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) | +| direction `v2.5.0` | Direction, can be set to `horizontal` | _string_ | `vertical` | +| icon-size `v2.2.3` | Icon size of all checkboxes | _number \| string_ | `20px` | +| checked-color `v2.2.3` | Checked color of all checkboxes | _string_ | `#1989fa` | - | ### Checkbox Events -| Event | Description | Parameters | -|------|------|------| -| change | Triggered when value changed | *checked: boolean* | -| click | Triggered when click checkbox | *event: Event* | +| Event | Description | Parameters | +| ------ | ----------------------------- | ------------------ | +| change | Triggered when value changed | _checked: boolean_ | +| click | Triggered when click checkbox | _event: Event_ | ### CheckboxGroup Events -| Event | Description | Parameters | -|------|------|------| -| change | Triggered when value changed | *names: any[]* | +| Event | Description | Parameters | +| ------ | ---------------------------- | -------------- | +| change | Triggered when value changed | _names: any[]_ | ### Checkbox Slots -| Name | Description | SlotProps | -|------|------|------| -| default | Custom label | - | -| icon | Custom icon | *checked: boolean* | +| Name | Description | SlotProps | +| ------- | ------------ | ------------------ | +| default | Custom label | - | +| icon | Custom icon | _checked: boolean_ | ### CheckboxGroup Methods Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods | Name | Description | Attribute | Return value | -|------|------|------|------| -| toggleAll | Toggle check status of all checkboxes | *checked?: boolean* | - | +| --- | --- | --- | --- | +| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - | ### Checkbox Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| toggle | Toggle check status | *checked?: boolean* | - | +| Name | Description | Attribute | Return value | +| ------ | ------------------- | ------------------- | ------------ | +| toggle | Toggle check status | _checked?: boolean_ | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 961b07a2b..b1ee0c89d 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -24,9 +24,9 @@ Vue.use(CheckboxGroup); export default { data() { return { - checked: true + checked: true, }; - } + }, }; ``` @@ -70,18 +70,14 @@ export default { 自定义图标 - + + ``` @@ -91,10 +87,10 @@ export default { return { checked: true, activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', - inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' - } - } -} + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', + }; + }, +}; ``` ### 禁用文本点击 @@ -120,9 +116,9 @@ export default { export default { data() { return { - result: ['a', 'b'] + result: ['a', 'b'], }; - } + }, }; ``` @@ -141,9 +137,9 @@ export default { export default { data() { return { - result: [] + result: [], }; - } + }, }; ``` @@ -178,8 +174,8 @@ export default { export default { data() { return { - result: [] - } + result: [], + }; }, methods: { checkAll() { @@ -187,9 +183,9 @@ export default { }, toggleAll() { this.$refs.checkboxGroup.toggleAll(); - } - } -} + }, + }, +}; ``` ### 搭配单元格组件使用 @@ -206,9 +202,9 @@ export default { :title="`复选框 ${item}`" @click="toggle(index)" > - + @@ -219,15 +215,15 @@ export default { data() { return { list: ['a', 'b'], - result: [] + result: [], }; }, methods: { toggle(index) { this.$refs.checkboxes[index].toggle(); - } - } -} + }, + }, +}; ``` ## API @@ -235,60 +231,60 @@ export default { ### Checkbox Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model (value) | 是否为选中状态 | *boolean* | `false` | -| name | 标识符 | *any* | - | -| shape | 形状，可选值为 `square` | *string* | `round` | -| disabled | 是否禁用复选框 | *boolean* | `false` | -| label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` | -| label-position | 文本位置，可选值为 `left` | *string* | `right` | -| icon-size | 图标大小，默认单位为`px` | *number \| string* | `20px` | -| checked-color | 选中状态颜色 | *string* | `#1989fa` | -| bind-group `v2.2.4` | 是否与复选框组绑定 | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model (value) | 是否为选中状态 | _boolean_ | `false` | +| name | 标识符 | _any_ | - | +| shape | 形状，可选值为 `square` | _string_ | `round` | +| disabled | 是否禁用复选框 | _boolean_ | `false` | +| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` | +| label-position | 文本位置，可选值为 `left` | _string_ | `right` | +| icon-size | 图标大小，默认单位为`px` | _number \| string_ | `20px` | +| checked-color | 选中状态颜色 | _string_ | `#1989fa` | +| bind-group `v2.2.4` | 是否与复选框组绑定 | _boolean_ | `true` | ### CheckboxGroup Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model (value) | 所有选中项的标识符 | *any[]* | - | -| disabled | 是否禁用所有复选框 | *boolean* | `false` | -| max | 最大可选数，`0`为无限制 | *number \| string* | `0` | -| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` | -| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` | -| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` | +| --- | --- | --- | --- | +| v-model (value) | 所有选中项的标识符 | _any[]_ | - | +| disabled | 是否禁用所有复选框 | _boolean_ | `false` | +| max | 最大可选数，`0`为无限制 | _number \| string_ | `0` | +| direction `v2.5.0` | 排列方向，可选值为`horizontal` | _string_ | `vertical` | +| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | _number \| string_ | `20px` | +| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | _string_ | `#1989fa` | ### Checkbox Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 当绑定值变化时触发的事件 | *checked: boolean* | -| click | 点击复选框时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------------ | ------------------ | +| change | 当绑定值变化时触发的事件 | _checked: boolean_ | +| click | 点击复选框时触发 | _event: Event_ | ### CheckboxGroup Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 当绑定值变化时触发的事件 | *names: any[]* | +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------------ | -------------- | +| change | 当绑定值变化时触发的事件 | _names: any[]_ | ### Checkbox Slots -| 名称 | 说明 | SlotProps | -|------|------|------| -| default | 自定义文本 | - | -| icon | 自定义图标 | *checked: boolean* | +| 名称 | 说明 | SlotProps | +| ------- | ---------- | ------------------ | +| default | 自定义文本 | - | +| icon | 自定义图标 | _checked: boolean_ | ### CheckboxGroup 方法 通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - | +| --- | --- | --- | --- | +| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - | ### Checkbox 方法 通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - | +| --- | --- | --- | --- | +| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - | diff --git a/src/circle/README.md b/src/circle/README.md index 854f62582..4c8e6d67e 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -14,26 +14,21 @@ Vue.use(Circle); ### Basic Usage ```html - + ``` ```js export default { data() { return { - currentRate: 0 + currentRate: 0, }; }, computed: { text() { - return this.currentRate.toFixed(0) + '%' - } - } + return this.currentRate.toFixed(0) + '%'; + }, + }, }; ``` @@ -77,10 +72,10 @@ export default { currentRate: 0, gradientColor: { '0%': '#3fecff', - '100%': '#6149f6' - } + '100%': '#6149f6', + }, }; - } + }, }; ``` @@ -111,21 +106,21 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Current rate | *number* | - | -| rate | Target rate | *number \| string* | `100` | -| size | Circle size | *number \| string* | `100px` | -| color `v2.1.4` | Progress color, passing object to render gradient | *string \| object* | `#1989fa` | -| layer-color | Layer color | *string* | `white` | -| fill | Fill color | *string* | `none` | -| speed | Animate speed（rate/s）| *number \| string* | `0` | -| text | Text | *string* | - | -| stroke-width | Stroke width | *number \| string* | `40` | -| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | *string* | `round` | -| clockwise | Whether to be clockwise | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | Current rate | _number_ | - | +| rate | Target rate | _number \| string_ | `100` | +| size | Circle size | _number \| string_ | `100px` | +| color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` | +| layer-color | Layer color | _string_ | `white` | +| fill | Fill color | _string_ | `none` | +| speed | Animate speed（rate/s） | _number \| string_ | `0` | +| text | Text | _string_ | - | +| stroke-width | Stroke width | _number \| string_ | `40` | +| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` | +| clockwise | Whether to be clockwise | _boolean_ | `true` | ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | ------------------- | | default | custom text content | diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index e1a63f416..ac2380639 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -16,26 +16,21 @@ Vue.use(Circle); `rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。 ```html - + ``` ```js export default { data() { return { - currentRate: 0 + currentRate: 0, }; }, computed: { text() { - return this.currentRate.toFixed(0) + '%' - } - } + return this.currentRate.toFixed(0) + '%'; + }, + }, }; ``` @@ -85,10 +80,10 @@ export default { currentRate: 0, gradientColor: { '0%': '#3fecff', - '100%': '#6149f6' - } + '100%': '#6149f6', + }, }; - } + }, }; ``` @@ -110,12 +105,7 @@ export default { 通过`size`属性设置圆环直径 ```html - + ``` ## API @@ -123,21 +113,21 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前进度 | *number* | - | -| rate | 目标进度 | *number \| string* | `100` | -| size | 圆环直径，默认单位为 `px` | *number \| string* | `100px` | -| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | -| layer-color | 轨道颜色 | *string* | `white` | -| fill | 填充颜色 | *string* | `none` | -| speed | 动画速度（单位为 rate/s）| *number \| string* | `0` | -| text | 文字 | *string* | - | -| stroke-width | 进度条宽度 | *number \| string* | `40` | -| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | *string* | `round` | -| clockwise | 是否顺时针增加 | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | 当前进度 | _number_ | - | +| rate | 目标进度 | _number \| string_ | `100` | +| size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` | +| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | +| layer-color | 轨道颜色 | _string_ | `white` | +| fill | 填充颜色 | _string_ | `none` | +| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` | +| text | 文字 | _string_ | - | +| stroke-width | 进度条宽度 | _number \| string_ | `40` | +| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` | +| clockwise | 是否顺时针增加 | _boolean_ | `true` | ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | -------------- | | default | 自定义文字内容 | diff --git a/src/col/README.md b/src/col/README.md index 99ff5584f..d6be11217 100644 --- a/src/col/README.md +++ b/src/col/README.md @@ -38,12 +38,10 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of ``` - ### Column Spacing Set grid spacing using `gutter` attribute. The default value is 0 - ```html span: 8 @@ -93,29 +91,29 @@ Setting `type` to `flex` to enable flex layout ### Row Props | Attribute | Description | Type | Default | -|------|------|------|------| -| type | Layout type, can be set to `flex` | *string* | - | -| 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` | -| align | Flex cross axis, be set to center/bottom | *string* | `top` | +| --- | --- | --- | --- | +| type | Layout type, can be set to `flex` | _string_ | - | +| 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` | +| align | Flex cross axis, be set to center/bottom | _string_ | `top` | ### Col Props | Attribute | Description | Type | Default | -|------|------|------|------| -| span | number of column the grid spans | *number \| string* | - | -| offset | number of spacing on the left side of the grid | *number \| string* | - | -| tag | Custom element tag | *string* | `div` | +| --- | --- | --- | --- | +| span | number of column the grid spans | _number \| string_ | - | +| offset | number of spacing on the left side of the grid | _number \| string_ | - | +| tag | Custom element tag | _string_ | `div` | ### Row Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click row | *event: Event* | +| Event | Description | Arguments | +| ----- | ------------------------ | -------------- | +| click | Triggered when click row | _event: Event_ | ### Col Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click col | *event: Event* | +| Event | Description | Arguments | +| ----- | ------------------------ | -------------- | +| click | Triggered when click col | _event: Event_ | diff --git a/src/col/README.zh-CN.md b/src/col/README.zh-CN.md index 08e02ebf6..7eb405993 100644 --- a/src/col/README.zh-CN.md +++ b/src/col/README.zh-CN.md @@ -18,7 +18,7 @@ Vue.use(Row); ### 基础用法 -Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 +Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比 此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同 ```html @@ -96,29 +96,29 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 ### Row Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type | 布局方式，可选值为`flex` | *string* | - | -| gutter | 列元素之间的间距（单位为px） | *number \| string* | - | -| tag | 自定义元素标签 | *string* | `div` | -| justify | Flex 主轴对齐方式，可选值为 `end` `center`
`space-around` `space-between` | *string* | `start` | -| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | *string* | `top` | +| --- | --- | --- | --- | +| type | 布局方式，可选值为`flex` | _string_ | - | +| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - | +| tag | 自定义元素标签 | _string_ | `div` | +| justify | Flex 主轴对齐方式，可选值为 `end` `center`
`space-around` `space-between` | _string_ | `start` | +| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` | ### Col Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| span | 列元素宽度 | *number \| string* | - | -| offset | 列元素偏移距离 | *number \| string* | - | -| tag | 自定义元素标签 | *string* | `div` | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------------- | ------------------ | ------ | +| span | 列元素宽度 | _number \| string_ | - | +| offset | 列元素偏移距离 | _number \| string_ | - | +| tag | 自定义元素标签 | _string_ | `div` | ### Row Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | -------------- | +| click | 点击时触发 | _event: Event_ | ### Col Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | -------------- | +| click | 点击时触发 | _event: Event_ | diff --git a/src/collapse/README.md b/src/collapse/README.md index ee73fae73..88d681e39 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -20,7 +20,9 @@ Use `v-model` to control the name of active panels Content Content - Content + Content ``` @@ -28,9 +30,9 @@ Use `v-model` to control the name of active panels export default { data() { return { - activeNames: ['1'] + activeNames: ['1'], }; - } + }, }; ``` @@ -50,9 +52,9 @@ In accordion mode, only one panel can be expanded at the same time. export default { data() { return { - activeName: '1' + activeName: '1', }; - } + }, }; ``` @@ -76,9 +78,9 @@ export default { export default { data() { return { - activeNames: ['1'] + activeNames: ['1'], }; - } + }, }; ``` @@ -87,40 +89,40 @@ export default { ### Collapse Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Names of current active panels | accordion mode： *number \| string*
non-accordion mode：*(number \| string)[]* | - | -| accordion | Whether to be accordion mode | *boolean* | `false` | -| border | Whether to show outer border | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | Names of current active panels | accordion mode： _number \| string_
non-accordion mode：_(number \| string)[]_ | - | +| accordion | Whether to be accordion mode | _boolean_ | `false` | +| border | Whether to show outer border | _boolean_ | `true` | ### Collapse Events -| Event | Description | Arguments | -|------|------|------| +| Event | Description | Arguments | +| ------ | --------------------------- | ----------- | | change | Triggered when switch panel | activeNames | ### CollapseItem Props | Attribute | Description | Type | Default | -|------|------|------|------| -| name | Name | *number \| string* | `index` | -| icon | Left Icon | *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* | - | -| border | Whether to show inner border | *boolean* | `true` | -| disabled | Whether to disabled collapse | *boolean* | `false` | -| is-link | Whether to show link icon | *boolean* | `true` | -| title-class | Title className | *string* | - | -| value-class | Value className | *string* | - | -| label-class | Label className | *string* | - | +| --- | --- | --- | --- | +| name | Name | _number \| string_ | `index` | +| icon | Left Icon | _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_ | - | +| border | Whether to show inner border | _boolean_ | `true` | +| disabled | Whether to disabled collapse | _boolean_ | `false` | +| is-link | Whether to show link icon | _boolean_ | `true` | +| title-class | Title className | _string_ | - | +| value-class | Value className | _string_ | - | +| label-class | Label className | _string_ | - | ### CollapseItem Slots -| Name | Description | -|------|------| -| default | Content | -| value | Custom value | -| icon | Custom icon | -| title | Custom title | +| Name | Description | +| ---------- | ----------------- | +| default | Content | +| value | Custom value | +| icon | Custom icon | +| title | Custom title | | right-icon | Custom right icon | diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 1a5a2fa7f..7931c22c8 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -28,9 +28,9 @@ Vue.use(CollapseItem); export default { data() { return { - activeNames: ['1'] + activeNames: ['1'], }; - } + }, }; ``` @@ -50,9 +50,9 @@ export default { export default { data() { return { - activeName: '1' + activeName: '1', }; - } + }, }; ``` @@ -76,9 +76,9 @@ export default { export default { data() { return { - activeNames: ['1'] + activeNames: ['1'], }; - } + }, }; ``` @@ -87,40 +87,40 @@ export default { ### Collapse Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前展开面板的 name | 手风琴模式：*number \| string*
非手风琴模式：*(number \| string)[]* | - | -| accordion | 是否开启手风琴模式 | *boolean* | `false` | -| border | 是否显示外边框 | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | 当前展开面板的 name | 手风琴模式：_number \| string_
非手风琴模式：_(number \| string)[]_ | - | +| accordion | 是否开启手风琴模式 | _boolean_ | `false` | +| border | 是否显示外边框 | _boolean_ | `true` | ### Collapse Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | ---------------------------------------- | | change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 | ### CollapseItem Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| name | 唯一标识符，默认为索引值 | *number \| string* | `index` | -| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| size | 标题栏大小，可选值为 `large` | *string* | - | -| title | 标题栏左侧内容 | *number \| string* | - | -| value | 标题栏右侧内容 | *number \| string* | - | -| label | 标题栏描述信息 | *number \| string* | - | -| border | 是否显示内边框 | *boolean* | `true` | -| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | *boolean* | `true` | -| disabled | 是否禁用面板 | *boolean* | `false` | -| title-class | 左侧标题额外类名 | *string* | - | -| value-class | 右侧内容额外类名 | *string* | - | -| label-class | 描述信息额外类名 | *string* | - | +| --- | --- | --- | --- | +| name | 唯一标识符，默认为索引值 | _number \| string_ | `index` | +| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| size | 标题栏大小，可选值为 `large` | _string_ | - | +| title | 标题栏左侧内容 | _number \| string_ | - | +| value | 标题栏右侧内容 | _number \| string_ | - | +| label | 标题栏描述信息 | _number \| string_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` | +| disabled | 是否禁用面板 | _boolean_ | `false` | +| title-class | 左侧标题额外类名 | _string_ | - | +| value-class | 右侧内容额外类名 | _string_ | - | +| label-class | 描述信息额外类名 | _string_ | - | ### CollapseItem Slots -| 名称 | 说明 | -|------|------| -| default | 面板内容 | -| value | 自定义显示内容 | -| icon | 自定义`icon` | -| title | 自定义`title` | +| 名称 | 说明 | +| ---------- | ----------------------------- | +| default | 面板内容 | +| value | 自定义显示内容 | +| icon | 自定义`icon` | +| title | 自定义`title` | | right-icon | 自定义右侧按钮，默认是`arrow` | diff --git a/src/contact-card/README.md b/src/contact-card/README.md index 84880d732..1b2b91dff 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -55,11 +55,13 @@ export default { showList: false, showEdit: false, isEdit: false, - list: [{ - name: 'John Snow', - tel: '13000000000', - id: 0 - }] + list: [ + { + name: 'John Snow', + tel: '13000000000', + id: 0, + }, + ], }; }, @@ -70,8 +72,8 @@ export default { currentContact() { const id = this.chosenContactId; - return id !== null ? this.list.filter(item => item.id === id)[0] : {}; - } + return id !== null ? this.list.filter((item) => item.id === id)[0] : {}; + }, }, methods: { @@ -84,7 +86,7 @@ export default { // edit contact onEdit(item) { - this.isEdit = true; + this.isEdit = true; this.showEdit = true; this.editingContact = item; }, @@ -98,9 +100,11 @@ export default { onSave(info) { this.showEdit = false; this.showList = false; - + if (this.isEdit) { - this.list = this.list.map(item => item.id === info.id ? info : item); + this.list = this.list.map((item) => + item.id === info.id ? info : item + ); } else { this.list.push(info); } @@ -110,12 +114,12 @@ export default { // delete contact onDelete(info) { this.showEdit = false; - this.list = this.list.filter(item => item.id !== info.id); + this.list = this.list.filter((item) => item.id !== info.id); if (this.chosenContactId === info.id) { this.chosenContactId = null; } - } - } + }, + }, }; ``` @@ -134,61 +138,60 @@ export default { ### ContactCard Props -| Attribute | Description | Type | Default | -|------|------|------|------| -| type | Can be set to `add` `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 `add` `edit` | _string_ | `add` | +| name | Name | _string_ | - | +| tel | Phone | _string_ | - | +| add-text | Add card text | _string_ | `Add contact info` | ### ContactCard Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when clicked | *event: Event* | +| Event | Description | Arguments | +| ----- | ---------------------- | -------------- | +| click | Triggered when clicked | _event: Event_ | ### ContactList Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Id of chosen contact | *number \| string* | - | -| list | Contact list | *Contact[]* | `[]` | -| add-text | Add button text | *string* | `Add new contact` | -| default-tag-text `v2.3.0` | Default tag text | *string* | - | +| --- | --- | --- | --- | +| v-model | Id of chosen contact | _number \| string_ | - | +| list | Contact list | _Contact[]_ | `[]` | +| add-text | Add button text | _string_ | `Add new contact` | +| default-tag-text `v2.3.0` | Default tag text | _string_ | - | ### ContactList Events -| Event | Description | Arguments | -|------|------|------| -| add | Triggered when click add button | - | -| edit | Triggered when click edit button | item: contact object，index | -| select | Triggered when select contact | item: contact object | - +| Event | Description | Arguments | +| ------ | -------------------------------- | --------------------------- | +| add | Triggered when click add button | - | +| edit | Triggered when click edit button | item: contact object，index | +| select | Triggered when select contact | item: contact object | ### ContactEdit Props | Attribute | Description | Type | Default | -|------|------|------|------| -| contact-info | Contact Info | *object* | `[]` | -| is-edit | Whether is editing | *boolean* | `false` | -| is-saving | Whether to show save button loading status | *boolean* | `false` | -| is-deleting | Whether to show delete button loading status | *boolean* | `false` | -| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | -| show-set-default `v2.3.0` | Whether to show default contact switch | *boolean* | `false` | -| set-default-label `v2.3.0` | default contact switch label | *string* | - | +| --- | --- | --- | --- | +| contact-info | Contact Info | _object_ | `[]` | +| is-edit | Whether is editing | _boolean_ | `false` | +| is-saving | Whether to show save button loading status | _boolean_ | `false` | +| is-deleting | Whether to show delete button loading status | _boolean_ | `false` | +| tel-validator | The method to validate tel | _(tel: string) => boolean_ | - | +| show-set-default `v2.3.0` | Whether to show default contact switch | _boolean_ | `false` | +| set-default-label `v2.3.0` | default contact switch label | _string_ | - | ### ContactEdit Events -| Event | Description | Arguments | -|------|------|------| -| save | Triggered when click save button | content：contact info | +| Event | Description | Arguments | +| ------ | ---------------------------------- | --------------------- | +| save | Triggered when click save button | content：contact info | | delete | Triggered when click delete button | content：contact info | ### Data Structure of Contact -| key | Description | Type | -|------|------|------| -| id | ID | *number \| string* | -| name | Name | *string* | -| tel | Phone | *string* | -| isDefault | Is default contact | *boolean* | +| key | Description | Type | +| --------- | ------------------ | ------------------ | +| id | ID | _number \| string_ | +| name | Name | _string_ | +| tel | Phone | _string_ | +| isDefault | Is default contact | _boolean_ | diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 2f2d65837..ed9e441af 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -59,11 +59,13 @@ export default { showList: false, showEdit: false, isEdit: false, - list: [{ - name: '张三', - tel: '13000000000', - id: 0 - }] + list: [ + { + name: '张三', + tel: '13000000000', + id: 0, + }, + ], }; }, @@ -74,8 +76,8 @@ export default { currentContact() { const id = this.chosenContactId; - return id !== null ? this.list.filter(item => item.id === id)[0] : {}; - } + return id !== null ? this.list.filter((item) => item.id === id)[0] : {}; + }, }, methods: { @@ -88,7 +90,7 @@ export default { // 编辑联系人 onEdit(item) { - this.isEdit = true; + this.isEdit = true; this.showEdit = true; this.editingContact = item; }, @@ -102,9 +104,11 @@ export default { onSave(info) { this.showEdit = false; this.showList = false; - + if (this.isEdit) { - this.list = this.list.map(item => item.id === info.id ? info : item); + this.list = this.list.map((item) => + item.id === info.id ? info : item + ); } else { this.list.push(info); } @@ -114,84 +118,79 @@ export default { // 删除联系人 onDelete(info) { this.showEdit = false; - this.list = this.list.filter(item => item.id !== info.id); + this.list = this.list.filter((item) => item.id !== info.id); if (this.chosenContactId === info.id) { this.chosenContactId = null; } - } - } + }, + }, }; ``` ### 不可编辑 ```html - + ``` ## API ### ContactCard Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type | 类型，可选值为 `add` `edit` | *string* | `add` | -| name | 联系人姓名 | *string* | - | -| tel | 联系人手机号 | *string* | - | -| add-text | 添加时的文案提示 | *string* | `添加订单联系人信息` | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | --------------------------- | -------- | -------------------- | +| type | 类型，可选值为 `add` `edit` | _string_ | `add` | +| name | 联系人姓名 | _string_ | - | +| tel | 联系人手机号 | _string_ | - | +| add-text | 添加时的文案提示 | _string_ | `添加订单联系人信息` | ### ContactCard Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | -------------- | +| click | 点击时触发 | _event: Event_ | ### ContactList Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前选中联系人的 id | *number \| string* | - | -| list | 联系人列表 | *Contact[]* | `[]` | -| add-text | 新建按钮文案 | *string* | `新建联系人` | -| default-tag-text `v2.3.0` | 默认联系人标签文案 | *string* | - | +| --- | --- | --- | --- | +| v-model | 当前选中联系人的 id | _number \| string_ | - | +| list | 联系人列表 | _Contact[]_ | `[]` | +| add-text | 新建按钮文案 | _string_ | `新建联系人` | +| default-tag-text `v2.3.0` | 默认联系人标签文案 | _string_ | - | ### ContactList Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| add | 点击新增按钮时触发 | - | -| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------------- | --------------------------------- | +| add | 点击新增按钮时触发 | - | +| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 | | select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 | ### ContactEdit Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| contact-info | 联系人信息 | *object* | `[]` | -| is-edit | 是否为编辑联系人 | *boolean* | `false` | -| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | -| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | -| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | -| show-set-default `v2.3.0` | 是否显示默认联系人栏 | *boolean* | `false` | -| set-default-label `v2.3.0` | 默认联系人栏文案 | *string* | - | +| --- | --- | --- | --- | +| contact-info | 联系人信息 | _object_ | `[]` | +| is-edit | 是否为编辑联系人 | _boolean_ | `false` | +| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` | +| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` | +| tel-validator | 手机号格式校验函数 | _(tel: string) => boolean_ | - | +| show-set-default `v2.3.0` | 是否显示默认联系人栏 | _boolean_ | `false` | +| set-default-label `v2.3.0` | 默认联系人栏文案 | _string_ | - | ### ContactEdit Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| save | 点击保存按钮时触发 | content：表单内容 | +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------ | ----------------- | +| save | 点击保存按钮时触发 | content：表单内容 | | delete | 点击删除按钮时触发 | content：表单内容 | ### Contact 数据结构 -| 键名 | 说明 | 类型 | -|------|------|------| -| id | 每位联系人的唯一标识 | *number \| string* | -| name | 联系人姓名 | *string* | -| tel | 联系人手机号 | *number \| string* | -| isDefault | 是否为默认联系人 | *boolean* | +| 键名 | 说明 | 类型 | +| --------- | -------------------- | ------------------ | +| id | 每位联系人的唯一标识 | _number \| string_ | +| name | 联系人姓名 | _string_ | +| tel | 联系人手机号 | _number \| string_ | +| isDefault | 是否为默认联系人 | _boolean_ | diff --git a/src/count-down/README.md b/src/count-down/README.md index 6d3e618f7..6764f5dbb 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -21,10 +21,10 @@ Vue.use(CountDown); export default { data() { return { - time: 30 * 60 * 60 * 1000 + time: 30 * 60 * 60 * 1000, }; - } -} + }, +}; ``` ### Custom Format @@ -51,15 +51,15 @@ export default { ``` @@ -97,9 +97,9 @@ export default { }, finish() { Toast('Finished'); - } - } -} + }, + }, +}; ``` ## API @@ -107,53 +107,53 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| time | Total time | *number \| string* | `0` | -| format | Time format | *string* | `HH:mm:ss` | -| auto-start | Whether to auto start count down | *boolean* | `true` | -| millisecond | Whether to enable millisecond render | *boolean* | `false` | +| --- | --- | --- | --- | +| time | Total time | _number \| string_ | `0` | +| format | Time format | _string_ | `HH:mm:ss` | +| auto-start | Whether to auto start count down | _boolean_ | `true` | +| millisecond | Whether to enable millisecond render | _boolean_ | `false` | ### Available formats -| Format | Description | -|------|------| -| DD | Day | -| HH | Hour | -| mm | Minute | -| ss | Second | -| S | Millisecond, 1-digit | -| SS | Millisecond, 2-digits | -| SSS | Millisecond, 3-digits | +| Format | Description | +| ------ | --------------------- | +| DD | Day | +| HH | Hour | +| mm | Minute | +| ss | Second | +| S | Millisecond, 1-digit | +| SS | Millisecond, 2-digits | +| SSS | Millisecond, 3-digits | ### Events -| Event | Description | Arguments | -|------|------|------| -| finish | Triggered when count down finished | - | -| change `v2.4.4` | Triggered when count down changed | *timeData: TimeData* | +| Event | Description | Arguments | +| --------------- | ---------------------------------- | -------------------- | +| finish | Triggered when count down finished | - | +| change `v2.4.4` | Triggered when count down changed | _timeData: TimeData_ | ### Slots -| Name | Description | SlotProps | -|------|------|------| -| default | Custom Content | *timeData: TimeData* | +| Name | Description | SlotProps | +| ------- | -------------- | -------------------- | +| default | Custom Content | _timeData: TimeData_ | ### TimeData Structure -| Name | Description | Type | -|------|------|------| -| days | Remain days | *number* | -| hours | Remain hours | *number* | -| minutes | Remain minutes | *number* | -| seconds | Remain seconds | *number* | -| milliseconds | Remain milliseconds | *number* | +| Name | Description | Type | +| ------------ | ------------------- | -------- | +| days | Remain days | _number_ | +| hours | Remain hours | _number_ | +| minutes | Remain minutes | _number_ | +| seconds | Remain seconds | _number_ | +| milliseconds | Remain milliseconds | _number_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| start | Start count down | - | - | -| pause | Pause count down | - | - | -| reset | Reset count down | - | - | +| Name | Description | Attribute | Return value | +| ----- | ---------------- | --------- | ------------ | +| start | Start count down | - | - | +| pause | Pause count down | - | - | +| reset | Reset count down | - | - | diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index 00f90ff52..7068fae52 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -23,10 +23,10 @@ Vue.use(CountDown); export default { data() { return { - time: 30 * 60 * 60 * 1000 + time: 30 * 60 * 60 * 1000, }; - } -} + }, +}; ``` ### 自定义格式 @@ -59,15 +59,15 @@ export default { ``` @@ -107,63 +107,63 @@ export default { }, finish() { Toast('倒计时结束'); - } - } -} + }, + }, +}; ``` ## API ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| time | 倒计时时长，单位毫秒 | *number \| string* | `0` | -| format | 时间格式 | *string* | `HH:mm:ss` | -| auto-start | 是否自动开始倒计时 | *boolean* | `true` | -| millisecond | 是否开启毫秒级渲染 | *boolean* | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | -------------------- | ------------------ | ---------- | +| time | 倒计时时长，单位毫秒 | _number \| string_ | `0` | +| format | 时间格式 | _string_ | `HH:mm:ss` | +| auto-start | 是否自动开始倒计时 | _boolean_ | `true` | +| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | ### format 格式 -| 格式 | 说明 | -|------|------| -| DD | 天数 | -| HH | 小时 | -| mm | 分钟 | -| ss | 秒数 | -| S | 毫秒（1 位） | -| SS | 毫秒（2 位） | -| SSS | 毫秒（3 位） | +| 格式 | 说明 | +| ---- | ------------ | +| DD | 天数 | +| HH | 小时 | +| mm | 分钟 | +| ss | 秒数 | +| S | 毫秒（1 位） | +| SS | 毫秒（2 位） | +| SSS | 毫秒（3 位） | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| finish | 倒计时结束时触发 | - | -| change `v2.4.4` | 倒计时变化时触发 | *timeData: TimeData* | +| 事件名 | 说明 | 回调参数 | +| --------------- | ---------------- | -------------------- | +| finish | 倒计时结束时触发 | - | +| change `v2.4.4` | 倒计时变化时触发 | _timeData: TimeData_ | ### Slots -| 名称 | 说明 | SlotProps | -|------|------|------| -| default | 自定义内容 | *timeData: TimeData* | +| 名称 | 说明 | SlotProps | +| ------- | ---------- | -------------------- | +| default | 自定义内容 | _timeData: TimeData_ | ### TimeData 格式 -| 名称 | 说明 | 类型 | -|------|------|------| -| days | 剩余天数 | *number* | -| hours | 剩余小时 | *number* | -| minutes | 剩余分钟 | *number* | -| seconds | 剩余秒数 | *number* | -| milliseconds | 剩余毫秒 | *number* | +| 名称 | 说明 | 类型 | +| ------------ | -------- | -------- | +| days | 剩余天数 | _number_ | +| hours | 剩余小时 | _number_ | +| minutes | 剩余分钟 | _number_ | +| seconds | 剩余秒数 | _number_ | +| milliseconds | 剩余毫秒 | _number_ | ### 方法 通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | start | 开始倒计时 | - | - | | pause | 暂停倒计时 | - | - | | reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - | diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index fa3a38b8d..b26f2efac 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -48,7 +48,7 @@ const coupon = { startAt: 1489104000, endAt: 1514592000, valueDesc: '1.5', - unitDesc: '元' + unitDesc: '元', }; export default { @@ -56,8 +56,8 @@ export default { return { chosenCoupon: -1, coupons: [coupon], - disabledCoupons: [coupon] - } + disabledCoupons: [coupon], + }; }, methods: { onChange(index) { @@ -66,9 +66,9 @@ export default { }, onExchange(code) { this.coupons.push(coupon); - } - } -} + }, + }, +}; ``` ## API @@ -76,53 +76,53 @@ export default { ### CouponCell Props | Attribute | Description | Type | Default | -|------|------|------|------| -| title | Cell title | *string* | `Coupon` | -| chosen-coupon | Index of chosen coupon | *number \| string* | `-1` | -| coupons | Coupon list | *Coupon[]* | `[]` | -| editable | Cell editable | *boolean* | `true` | -| border | Whether to show innner border | *boolean* | `true` | -| currency | Currency symbol | *string* | `¥` | +| --- | --- | --- | --- | +| title | Cell title | _string_ | `Coupon` | +| chosen-coupon | Index of chosen coupon | _number \| string_ | `-1` | +| coupons | Coupon list | _Coupon[]_ | `[]` | +| editable | Cell editable | _boolean_ | `true` | +| border | Whether to show innner border | _boolean_ | `true` | +| currency | Currency symbol | _string_ | `¥` | ### CouponList Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Current exchange code | *string* | - | -| chosen-coupon | Index of chosen coupon | *number* | `-1` | -| coupons | Coupon list | *Coupon[]* | `[]` | -| disabled-coupons | Disabled coupon list | *Coupon[]* | `[]` | -| enabled-title | Title of coupon list | *string* | `Available` | - | -| disabled-title | Title of disabled coupon list | *string* | `Unavailable` | - | -| exchange-button-text | Exchange button text | *string* | `Exchange` | -| exchange-button-loading | Whether to show loading in exchange button | *boolean* | `false` | -| exchange-button-disabled | Whether to disable exchange button | *boolean* | `false` | -| exchange-min-length | Min length to enable exchange button | *number* | `1` | -| displayed-coupon-index | Index of displayed coupon | *number* | - | -| close-button-text | Close button text | *string* | `Close` | -| input-placeholder | Input placeholder | *string* | `Coupon code` | -| currency | Currency symbol | *string* | `¥` | -| empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | -| show-count `v2.3.0` | Whether to show coupon count in tab title | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | Current exchange code | _string_ | - | +| chosen-coupon | Index of chosen coupon | _number_ | `-1` | +| coupons | Coupon list | _Coupon[]_ | `[]` | +| disabled-coupons | Disabled coupon list | _Coupon[]_ | `[]` | +| enabled-title | Title of coupon list | _string_ | `Available` | - | +| disabled-title | Title of disabled coupon list | _string_ | `Unavailable` | - | +| exchange-button-text | Exchange button text | _string_ | `Exchange` | +| exchange-button-loading | Whether to show loading in exchange button | _boolean_ | `false` | +| exchange-button-disabled | Whether to disable exchange button | _boolean_ | `false` | +| exchange-min-length | Min length to enable exchange button | _number_ | `1` | +| displayed-coupon-index | Index of displayed coupon | _number_ | - | +| close-button-text | Close button text | _string_ | `Close` | +| input-placeholder | Input placeholder | _string_ | `Coupon code` | +| currency | Currency symbol | _string_ | `¥` | +| empty-image | Placeholder image when list is empty | _string_ | `https://img.yzcdn.cn/vant/coupon-empty.png` | +| show-count `v2.3.0` | Whether to show coupon count in tab title | _boolean_ | `true` | ### CouponList Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | change | Triggered when change chosen coupon | index: index of chosen coupon | | exchange | Triggered when exchange coupon | code: exchange code | ### Data Structure of Coupon -| Key | Description | Type | -|------|------|------| -| id | Id | *string* | -| name | Name | *string* | -| condition | Condition | *string* | -| startAt | Start time (Timestmap, unit second) | *number* | -| endAt | End time (Timestmap, unit second) | *number* | -| description | Description | *string* | -| reason | Unavailable reason | *string* | -| value | Value | *number* | -| valueDesc | Value Text | *string* | -| unitDesc | Unit Text | *string* | +| Key | Description | Type | +| ----------- | ----------------------------------- | -------- | +| id | Id | _string_ | +| name | Name | _string_ | +| condition | Condition | _string_ | +| startAt | Start time (Timestmap, unit second) | _number_ | +| endAt | End time (Timestmap, unit second) | _number_ | +| description | Description | _string_ | +| reason | Unavailable reason | _string_ | +| value | Value | _number_ | +| valueDesc | Value Text | _string_ | +| unitDesc | Unit Text | _string_ | diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index 7728f2fb5..383eee5b1 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -48,7 +48,7 @@ const coupon = { startAt: 1489104000, endAt: 1514592000, valueDesc: '1.5', - unitDesc: '元' + unitDesc: '元', }; export default { @@ -56,8 +56,8 @@ export default { return { chosenCoupon: -1, coupons: [coupon], - disabledCoupons: [coupon] - } + disabledCoupons: [coupon], + }; }, methods: { onChange(index) { @@ -66,65 +66,65 @@ export default { }, onExchange(code) { this.coupons.push(coupon); - } - } -} + }, + }, +}; ``` ## API ### CouponCell Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 单元格标题 | *string* | `优惠券` | -| chosen-coupon | 当前选中优惠券的索引 | *number \| string* | `-1` | -| coupons | 可用优惠券列表 | *Coupon[]* | `[]` | -| editable | 能否切换优惠券 | *boolean* | `true` | -| border | 是否显示内边框 | *boolean* | `true` | -| currency | 货币符号 | *string* | `¥` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | -------------------- | ------------------ | -------- | +| title | 单元格标题 | _string_ | `优惠券` | +| chosen-coupon | 当前选中优惠券的索引 | _number \| string_ | `-1` | +| coupons | 可用优惠券列表 | _Coupon[]_ | `[]` | +| editable | 能否切换优惠券 | _boolean_ | `true` | +| border | 是否显示内边框 | _boolean_ | `true` | +| currency | 货币符号 | _string_ | `¥` | - | ### CouponList Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前输入的兑换码 | *string* | - | -| chosen-coupon | 当前选中优惠券的索引 | *number* | `-1` | -| coupons | 可用优惠券列表 | *Coupon[]* | `[]` | -| disabled-coupons | 不可用优惠券列表 | *Coupon[]* | `[]` | -| enabled-title | 可用优惠券列表标题 | *string* | `可使用优惠券` | -| disabled-title | 不可用优惠券列表标题 | *string* | `不可使用优惠券` | -| exchange-button-text | 兑换按钮文字 | *string* | `兑换` | -| exchange-button-loading | 是否显示兑换按钮加载动画 | *boolean* | `false` | -| exchange-button-disabled | 是否禁用兑换按钮 | *boolean* | `false` | -| exchange-min-length | 兑换码最小长度 | *number* | `1` | -| displayed-coupon-index | 滚动至特定优惠券位置 | *number* | - | -| show-close-button | 是否显示列表底部按钮 | *boolean* | `true` | -| close-button-text | 列表底部按钮文字 | *string* | `不使用优惠` | -| input-placeholder | 输入框文字提示 | *string* | `请输入优惠码` | -| show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | -| currency | 货币符号 | *string* | `¥` | -| empty-image `v2.1.0` | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | -| show-count `v2.3.0` | 是否展示可用 / 不可用数量 | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | 当前输入的兑换码 | _string_ | - | +| chosen-coupon | 当前选中优惠券的索引 | _number_ | `-1` | +| coupons | 可用优惠券列表 | _Coupon[]_ | `[]` | +| disabled-coupons | 不可用优惠券列表 | _Coupon[]_ | `[]` | +| enabled-title | 可用优惠券列表标题 | _string_ | `可使用优惠券` | +| disabled-title | 不可用优惠券列表标题 | _string_ | `不可使用优惠券` | +| exchange-button-text | 兑换按钮文字 | _string_ | `兑换` | +| exchange-button-loading | 是否显示兑换按钮加载动画 | _boolean_ | `false` | +| exchange-button-disabled | 是否禁用兑换按钮 | _boolean_ | `false` | +| exchange-min-length | 兑换码最小长度 | _number_ | `1` | +| displayed-coupon-index | 滚动至特定优惠券位置 | _number_ | - | +| show-close-button | 是否显示列表底部按钮 | _boolean_ | `true` | +| close-button-text | 列表底部按钮文字 | _string_ | `不使用优惠` | +| input-placeholder | 输入框文字提示 | _string_ | `请输入优惠码` | +| show-exchange-bar | 是否展示兑换栏 | _boolean_ | `true` | +| currency | 货币符号 | _string_ | `¥` | +| empty-image `v2.1.0` | 列表为空时的占位图 | _string_ | `https://img.yzcdn.cn/vant/coupon-empty.png` | +| show-count `v2.3.0` | 是否展示可用 / 不可用数量 | _boolean_ | `true` | ### CouponList Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 优惠券切换回调 | index, 选中优惠券的索引 | -| exchange | 兑换优惠券回调 | code, 兑换码 | +| 事件名 | 说明 | 回调参数 | +| -------- | -------------- | ----------------------- | +| change | 优惠券切换回调 | index, 选中优惠券的索引 | +| exchange | 兑换优惠券回调 | code, 兑换码 | ### Coupon 数据结构 -| 键名 | 说明 | 类型 | -|------|------|------| -| id | 优惠券 id | *string* | -| name | 优惠券名称 | *string* | -| condition | 满减条件 | *string* | -| startAt | 卡有效开始时间 (时间戳, 单位秒) | *number* | -| endAt | 卡失效日期 (时间戳, 单位秒) | *number* | -| description | 描述信息，优惠券可用时展示 | *string* | -| reason | 不可用原因，优惠券不可用时展示 | *string* | -| value | 折扣券优惠金额，单位分 | *number* | -| valueDesc | 折扣券优惠金额文案 | *string* | -| unitDesc | 单位文案 | *string* | +| 键名 | 说明 | 类型 | +| ----------- | ------------------------------- | -------- | +| id | 优惠券 id | _string_ | +| name | 优惠券名称 | _string_ | +| condition | 满减条件 | _string_ | +| startAt | 卡有效开始时间 (时间戳, 单位秒) | _number_ | +| endAt | 卡失效日期 (时间戳, 单位秒) | _number_ | +| description | 描述信息，优惠券可用时展示 | _string_ | +| reason | 不可用原因，优惠券不可用时展示 | _string_ | +| value | 折扣券优惠金额，单位分 | _number_ | +| valueDesc | 折扣券优惠金额文案 | _string_ | +| unitDesc | 单位文案 | _string_ | diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index 3c0701c8e..d8b26763a 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -32,9 +32,9 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; - } + }, }; ``` @@ -55,10 +55,10 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; - } -} + }, +}; ``` ### Choose Year-Month @@ -79,7 +79,7 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; }, methods: { @@ -87,12 +87,12 @@ export default { if (type === 'year') { return `${val} Year`; } else if (type === 'month') { - return `${val} Month` + return `${val} Month`; } return val; - } - } -} + }, + }, +}; ``` ### Choose Time @@ -110,39 +110,35 @@ export default { export default { data() { return { - currentTime: '12:00' + currentTime: '12:00', }; - } -} + }, +}; ``` ### Option Filter ```html - + ``` ```js export default { data() { return { - currentTime: '12:00' + currentTime: '12:00', }; }, methods: { filter(type, options) { if (type === 'minute') { - return options.filter(option => option % 5 === 0) + return options.filter((option) => option % 5 === 0); } return options; - } - } -} + }, + }, +}; ``` ## API @@ -150,51 +146,51 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| type | Can be set to `date` `time`
`year-month` | *string* | `datetime` | -| title | Toolbar title | *string* | `''` | -| confirm-button-text | Text of confirm button | *string* | `Confirm` | -| cancel-button-text | Text of cancel button | *string* | `Cancel` | -| show-toolbar | Whether to show toolbar | *boolean* | `true` | -| loading | Whether to show loading prompt | *boolean* | `false` | -| filter | Option filter | *(type, vals) => vals* | - | -| formatter | Option text formatter | *(type, val) => val* | - | -| item-height | Option height | *number \| string* | `44` | -| visible-item-count | Count of visible columns | *number \| string* | `5` | -| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | +| --- | --- | --- | --- | +| type | Can be set to `date` `time`
`year-month` | _string_ | `datetime` | +| title | Toolbar title | _string_ | `''` | +| confirm-button-text | Text of confirm button | _string_ | `Confirm` | +| cancel-button-text | Text of cancel button | _string_ | `Cancel` | +| show-toolbar | Whether to show toolbar | _boolean_ | `true` | +| loading | Whether to show loading prompt | _boolean_ | `false` | +| filter | Option filter | _(type, vals) => vals_ | - | +| formatter | Option text formatter | _(type, val) => val_ | - | +| item-height | Option height | _number \| string_ | `44` | +| visible-item-count | Count of visible columns | _number \| string_ | `5` | +| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | ### DatePicker Props Following props are supported when the type is date or datetime -| Attribute | Description | Type | Default | -|------|------|------|------| -| min-date | Min date | *Date* | Ten years ago on January 1 | -| max-date | Max date | *Date* | Ten years later on December 31 | +| Attribute | Description | Type | Default | +| --------- | ----------- | ------ | ------------------------------ | +| min-date | Min date | _Date_ | Ten years ago on January 1 | +| max-date | Max date | _Date_ | Ten years later on December 31 | ### TimePicker Props Following props are supported when the type is time -| Attribute | Description | Type | Default | -|------|------|------|------| -| min-hour | Min hour for `time` type | *number \| string* | `0` | -| max-hour | Max hour for `time` type | *number \| string* | `23` | -| min-minute | Max minute for `time` type | *number \| string* | `0` | -| max-minute | Max minute for `time` type | *number \| string* | `59` | +| Attribute | Description | Type | Default | +| ---------- | -------------------------- | ------------------ | ------- | +| min-hour | Min hour for `time` type | _number \| string_ | `0` | +| max-hour | Max hour for `time` type | _number \| string_ | `23` | +| min-minute | Max minute for `time` type | _number \| string_ | `0` | +| max-minute | Max minute for `time` type | _number \| string_ | `59` | ### Events -| Event | Description | Arguments | -|------|------|------| -| change | Triggered when value changed | picker: Picker instance | -| confirm | Triggered when click confirm button | value: current value | -| cancel | Triggered when click cancel button | - | +| Event | Description | Arguments | +| ------- | ----------------------------------- | ----------------------- | +| change | Triggered when value changed | picker: Picker instance | +| confirm | Triggered when click confirm button | value: current value | +| cancel | Triggered when click cancel button | - | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| getPicker `v2.5.3` | get Picker instance | - | - | +| Name | Description | Attribute | Return value | +| ------------------ | ------------------- | --------- | ------------ | +| getPicker `v2.5.3` | get Picker instance | - | - | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 87cba26c6..10bfcc72a 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -32,9 +32,9 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; - } + }, }; ``` @@ -55,9 +55,9 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; - } + }, }; ``` @@ -81,7 +81,7 @@ export default { return { minDate: new Date(2020, 0, 1), maxDate: new Date(2025, 10, 1), - currentDate: new Date() + currentDate: new Date(), }; }, methods: { @@ -89,12 +89,12 @@ export default { if (type === 'year') { return `${val}年`; } else if (type === 'month') { - return `${val}月` + return `${val}月`; } return val; - } - } -} + }, + }, +}; ``` ### 选择时间 @@ -112,9 +112,9 @@ export default { export default { data() { return { - currentTime: '12:00' + currentTime: '12:00', }; - } + }, }; ``` @@ -123,29 +123,25 @@ export default { 通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔 ```html - + ``` ```js export default { data() { return { - currentTime: '12:00' + currentTime: '12:00', }; }, methods: { filter(type, options) { if (type === 'minute') { - return options.filter(option => option % 5 === 0); + return options.filter((option) => option % 5 === 0); } return options; - } - } + }, + }, }; ``` @@ -154,53 +150,53 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type | 类型，可选值为 `date`
`time` `year-month` | *string* | `datetime` | -| title | 顶部栏标题 | *string* | `''` | -| confirm-button-text | 确认按钮文字 | *string* | `确认` | -| cancel-button-text | 取消按钮文字 | *string* | `取消` | -| show-toolbar | 是否显示顶部栏 | *boolean* | `true` | -| loading | 是否显示加载状态 | *boolean* | `false` | -| filter | 选项过滤函数 | *(type, vals) => vals* | - | -| formatter | 选项格式化函数 | *(type, val) => val* | - | -| item-height | 选项高度 | *number \| string* | `44` | -| visible-item-count | 可见的选项个数 | *number \| string* | `5` | -| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | +| --- | --- | --- | --- | +| type | 类型，可选值为 `date`
`time` `year-month` | _string_ | `datetime` | +| title | 顶部栏标题 | _string_ | `''` | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | +| show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| filter | 选项过滤函数 | _(type, vals) => vals_ | - | +| formatter | 选项格式化函数 | _(type, val) => val_ | - | +| item-height | 选项高度 | _number \| string_ | `44` | +| visible-item-count | 可见的选项个数 | _number \| string_ | `5` | +| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` | ### DatePicker Props 当时间选择器类型为 date 或 datetime 时，支持以下 props: -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| min-date | 可选的最小时间，精确到分钟 | *Date* | 十年前 | -| max-date | 可选的最大时间，精确到分钟 | *Date* | 十年后 | +| 参数 | 说明 | 类型 | 默认值 | +| -------- | -------------------------- | ------ | ------ | +| min-date | 可选的最小时间，精确到分钟 | _Date_ | 十年前 | +| max-date | 可选的最大时间，精确到分钟 | _Date_ | 十年后 | ### TimePicker Props 当时间选择器类型为 time 时，支持以下 props: -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| min-hour | 可选的最小小时 | *number \| string* | `0` | -| max-hour | 可选的最大小时 | *number \| string* | `23` | -| min-minute | 可选的最小分钟 | *number \| string* | `0` | -| max-minute | 可选的最大分钟 | *number \| string* | `59` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | -------------- | ------------------ | ------ | +| min-hour | 可选的最小小时 | _number \| string_ | `0` | +| max-hour | 可选的最大小时 | _number \| string_ | `23` | +| min-minute | 可选的最小分钟 | _number \| string_ | `0` | +| max-minute | 可选的最大分钟 | _number \| string_ | `59` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 当值变化时触发的事件 | picker: Picker 实例 | +| 事件名 | 说明 | 回调参数 | +| ------- | ------------------------ | --------------------- | +| change | 当值变化时触发的事件 | picker: Picker 实例 | | confirm | 点击完成按钮时触发的事件 | value: 当前选中的时间 | -| cancel | 点击取消按钮时触发的事件 | - | +| cancel | 点击取消按钮时触发的事件 | - | ### 方法 通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | getPicker `v2.5.3` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - | ## 常见问题 diff --git a/src/dialog/README.md b/src/dialog/README.md index bb01770df..8e4ab7066 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -18,13 +18,13 @@ Used to prompt for some messages, only including one confirm button ```js Dialog.alert({ title: 'Title', - message: 'Content' + message: 'Content', }).then(() => { // on close }); Dialog.alert({ - message: 'Content' + message: 'Content', }).then(() => { // on close }); @@ -35,14 +35,16 @@ Dialog.alert({ Used to confirm some messages, including a confirm button and a cancel button ```js - Dialog.confirm({ +Dialog.confirm({ title: 'Title', - message: 'Content' -}).then(() => { - // on confirm -}).catch(() => { - // on cancel -}); + message: 'Content', +}) + .then(() => { + // on confirm + }) + .catch(() => { + // on cancel + }); ``` ### Asnyc Close @@ -59,22 +61,22 @@ function beforeClose(action, done) { Dialog.confirm({ title: 'Title', message: 'Content', - beforeClose + beforeClose, }); ``` -### $dialog Method +### \$dialog Method -After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. +After import the Dialog component, the \$dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. ```js export default { mounted() { this.$dialog.alert({ - message: 'Content' + message: 'Content', }); - } -} + }, +}; ``` ### Advanced Usage @@ -83,7 +85,7 @@ If you need to render vue components within a dialog, you can use dialog compone ```html - + ``` @@ -91,10 +93,10 @@ If you need to render vue components within a dialog, you can use dialog compone export default { data() { return { - show: false + show: false, }; - } -} + }, +}; ``` ## API @@ -102,7 +104,7 @@ export default { ### Methods | Name | Description | Attribute | Return value | -|------|------|------|------| +| --- | --- | --- | --- | | Dialog | Show dialog | `options` | `Promise` | | Dialog.alert | Show alert dialog | `options` | `Promise` | | Dialog.confirm | Show confim dialog | `options` | `Promise` | @@ -113,68 +115,68 @@ export default { ### Options | Attribute | Description | Type | Default | -|------|------|------|------| -| title | Title | *string* | - | -| width `v2.2.7` | Width | *number \| string* | `320px` | -| message | Message | *string* | - | -| messageAlign | Message text align，can be set to `left` `right` | *string* | `center` | -| className | Custom className | *any* | - | -| showConfirmButton | Whether to show confirm button | *boolean* | `true` | -| showCancelButton | Whether to show cancel button | *boolean* | `false` | -| cancelButtonText | Cancel button text | *string* | `Cancel` | -| cancelButtonColor | Cancel button color | *string* | `black` | -| confirmButtonText | Confirm button text | *string* | `Confirm` | -| confirmButtonColor | Confirm button color | *string* | `#1989fa` | -| overlay | Whether to show overlay | *boolean* | `true` | -| overlayClass `v2.2.7` | Custom overlay class | *string* | - | -| overlayStyle `v2.2.7` | Custom overlay style | *object* | - | -| closeOnPopstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` | -| closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` | -| lockScroll | Whether to lock body scroll | *boolean* | `true` | +| --- | --- | --- | --- | +| title | Title | _string_ | - | +| width `v2.2.7` | Width | _number \| string_ | `320px` | +| message | Message | _string_ | - | +| messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` | +| className | Custom className | _any_ | - | +| showConfirmButton | Whether to show confirm button | _boolean_ | `true` | +| showCancelButton | Whether to show cancel button | _boolean_ | `false` | +| cancelButtonText | Cancel button text | _string_ | `Cancel` | +| cancelButtonColor | Cancel button color | _string_ | `black` | +| confirmButtonText | Confirm button text | _string_ | `Confirm` | +| confirmButtonColor | Confirm button color | _string_ | `#1989fa` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| overlayClass `v2.2.7` | Custom overlay class | _string_ | - | +| overlayStyle `v2.2.7` | Custom overlay style | _object_ | - | +| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` | +| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` | +| lockScroll | Whether to lock body scroll | _boolean_ | `true` | | beforeClose | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | -| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | -| getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` | +| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | +| getContainer | Return the mount node for Dialog | _string \| () => Element_ | `body` | ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Whether to show dialog | *boolean* | - | -| title | Title | *string* | - | -| width `v2.2.7` | Width | *number \| string* | `320px` | -| message | Message | *string* | - | -| message-align | Message align，can be set to `left` `right` | *string* | `center` | -| 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` | -| cancel-button-color | Cancel button color | *string* | `black` | -| confirm-button-text | Confirm button text | *string* | `Confirm` | -| confirm-button-color | Confirm button color | *string* | `#1989fa` | -| overlay | Whether to show overlay | *boolean* | `true` | -| overlay-class `v2.2.7` | Custom overlay class | *string* | - | -| overlay-style `v2.2.7` | Custom overlay style | *object* | - | -| close-on-popstate `v2.0.5` | Whether to close when popstate | *boolean* | `false` | -| close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` | -| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | -| lock-scroll | Whether to lock background scroll | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model | Whether to show dialog | _boolean_ | - | +| title | Title | _string_ | - | +| width `v2.2.7` | Width | _number \| string_ | `320px` | +| message | Message | _string_ | - | +| message-align | Message align，can be set to `left` `right` | _string_ | `center` | +| 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` | +| cancel-button-color | Cancel button color | _string_ | `black` | +| confirm-button-text | Confirm button text | _string_ | `Confirm` | +| confirm-button-color | Confirm button color | _string_ | `#1989fa` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| overlay-class `v2.2.7` | Custom overlay class | _string_ | - | +| overlay-style `v2.2.7` | Custom overlay style | _object_ | - | +| close-on-popstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` | +| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | +| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | | before-close | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | -| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | -| get-container | Return the mount node for Dialog | *string \| () => Element* | - | +| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | +| get-container | Return the mount node for Dialog | _string \| () => Element_ | - | ### Events -| Event | Description | Parameters | -|------|------|------| -| confirm | Triggered when click confirm button | - | -| cancel | Triggered when click cancel button | - | -| open | Triggered when open Dialog | - | -| close | Triggered when close Dialog | - | -| opened | Triggered when opened Dialog | - | -| closed | Triggered when closed Dialog | - | +| Event | Description | Parameters | +| ------- | ----------------------------------- | ---------- | +| confirm | Triggered when click confirm button | - | +| cancel | Triggered when click cancel button | - | +| open | Triggered when open Dialog | - | +| close | Triggered when close Dialog | - | +| opened | Triggered when opened Dialog | - | +| closed | Triggered when closed Dialog | - | ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | -------------- | | default | Custom message | -| title | Custom title | +| title | Custom title | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 296cbff68..d5c177c04 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -30,9 +30,9 @@ Vue.use(Dialog); // 局部注册 export default { components: { - [Dialog.Component.name]: Dialog.Component - } -} + [Dialog.Component.name]: Dialog.Component, + }, +}; ``` ## 代码演示 @@ -44,13 +44,13 @@ export default { ```js Dialog.alert({ title: '标题', - message: '弹窗内容' + message: '弹窗内容', }).then(() => { // on close }); Dialog.alert({ - message: '弹窗内容' + message: '弹窗内容', }).then(() => { // on close }); @@ -63,12 +63,14 @@ Dialog.alert({ ```js Dialog.confirm({ title: '标题', - message: '弹窗内容' -}).then(() => { - // on confirm -}).catch(() => { - // on cancel -}); + message: '弹窗内容', +}) + .then(() => { + // on confirm + }) + .catch(() => { + // on cancel + }); ``` ### 异步关闭 @@ -85,22 +87,22 @@ function beforeClose(action, done) { Dialog.confirm({ title: '标题', message: '弹窗内容', - beforeClose + beforeClose, }); ``` ### 全局方法 -引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法 +引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 \$dialog 方法，在所有组件内部都可以直接调用此方法 ```js export default { mounted() { this.$dialog.alert({ - message: '弹窗内容' + message: '弹窗内容', }); - } -} + }, +}; ``` ### 组件调用 @@ -109,7 +111,7 @@ export default { ```html - + ``` @@ -117,19 +119,18 @@ export default { export default { data() { return { - show: false + show: false, }; - } -} + }, +}; ``` - ## API ### 方法 | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | Dialog | 展示弹窗 | `options` | `Promise` | | Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` | | Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` | @@ -142,74 +143,74 @@ export default { 通过函数调用 `Dialog` 时，支持传入以下选项： | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 标题 | *string* | - | -| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` | -| message | 文本内容，支持通过`\n`换行 | *string* | - | -| messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | -| className | 自定义类名 | *any* | - | -| showConfirmButton | 是否展示确认按钮 | *boolean* | `true` | -| showCancelButton | 是否展示取消按钮 | *boolean* | `false` | -| confirmButtonText | 确认按钮文案 | *string* | `确认` | -| confirmButtonColor | 确认按钮颜色 | *string* | `#1989fa` | -| cancelButtonText | 取消按钮文案 | *string* | `取消` | -| cancelButtonColor | 取消按钮颜色 | *string* | `black` | -| overlay | 是否展示遮罩层 | *boolean* | `true` | -| overlayClass `v2.2.7` | 自定义遮罩层类名 | *string* | - | -| overlayStyle `v2.2.7` | 自定义遮罩层样式 | *object* | - | -| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | -| lockScroll | 是否锁定背景滚动 | *boolean* | `true` | -| beforeClose | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | -| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | -| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | `body` | +| --- | --- | --- | --- | +| title | 标题 | _string_ | - | +| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` | +| message | 文本内容，支持通过`\n`换行 | _string_ | - | +| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| className | 自定义类名 | _any_ | - | +| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | +| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | +| confirmButtonText | 确认按钮文案 | _string_ | `确认` | +| confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` | +| cancelButtonText | 取消按钮文案 | _string_ | `取消` | +| cancelButtonColor | 取消按钮颜色 | _string_ | `black` | +| overlay | 是否展示遮罩层 | _boolean_ | `true` | +| overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - | +| overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - | +| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` | +| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` | +| beforeClose | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - | +| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | +| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` | ### Props 通过组件调用 `Dialog` 时，支持以下 Props： | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 是否显示弹窗 | *boolean* | - | -| title | 标题 | *string* | - | -| width `v2.2.7` | 弹窗宽度，默认单位为`px` | *number \| string* | `320px` | -| message | 文本内容，支持通过`\n`换行 | *string* | - | -| message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` | -| show-confirm-button | 是否展示确认按钮 | *boolean* | `true` | -| show-cancel-button | 是否展示取消按钮 | *boolean* | `false` | -| confirm-button-text | 确认按钮文案 | *string* | `确认` | -| confirm-button-color | 确认按钮颜色 | *string* | `#1989fa` | -| cancel-button-text | 取消按钮文案 | *string* | `取消` | -| cancel-button-color | 取消按钮颜色 | *string* | `black` | -| overlay | 是否展示遮罩层 | *boolean* | `true` | -| overlay-class `v2.2.7` | 自定义遮罩层类名 | *string* | - | -| overlay-style `v2.2.7` | 自定义遮罩层样式 | *object* | - | -| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | *boolean* | `false` | -| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | -| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | -| before-close | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | -| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | -| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | +| --- | --- | --- | --- | +| v-model | 是否显示弹窗 | _boolean_ | - | +| title | 标题 | _string_ | - | +| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` | +| message | 文本内容，支持通过`\n`换行 | _string_ | - | +| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` | +| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` | +| confirm-button-text | 确认按钮文案 | _string_ | `确认` | +| confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` | +| cancel-button-text | 取消按钮文案 | _string_ | `取消` | +| cancel-button-color | 取消按钮颜色 | _string_ | `black` | +| overlay | 是否展示遮罩层 | _boolean_ | `true` | +| overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - | +| overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - | +| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` | +| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` | +| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` | +| before-close | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - | +| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | +| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### Events 通过组件调用 `Dialog` 时，支持以下事件： -| 事件 | 说明 | 回调参数 | -|------|------|------| -| confirm | 点击确认按钮时触发 | - | -| cancel | 点击取消按钮时触发 | - | -| open | 打开弹窗时触发 | - | -| close | 关闭弹窗时触发 | - | -| opened | 打开弹窗且动画结束后触发 | - | -| closed | 关闭弹窗且动画结束后触发 | - | +| 事件 | 说明 | 回调参数 | +| ------- | ------------------------ | -------- | +| confirm | 点击确认按钮时触发 | - | +| cancel | 点击取消按钮时触发 | - | +| open | 打开弹窗时触发 | - | +| close | 关闭弹窗时触发 | - | +| opened | 打开弹窗且动画结束后触发 | - | +| closed | 关闭弹窗且动画结束后触发 | - | ### Slots 通过组件调用 `Dialog` 时，支持以下插槽： -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | ---------- | | default | 自定义内容 | -| title | 自定义标题 | +| title | 自定义标题 | diff --git a/src/divider/README.md b/src/divider/README.md index 427039cb3..78274ffcb 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -39,7 +39,9 @@ Vue.use(Divider); ### Custom Style ```html - + Text ``` @@ -49,13 +51,13 @@ Vue.use(Divider); ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| 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` | +| --- | --- | --- | --- | +| 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` | ### Slots -| Name | Description | -|------|------| -| default | content | +| Name | Description | +| ------- | ----------- | +| default | content | diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index d86f751eb..0a6b265b1 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -49,7 +49,9 @@ Vue.use(Divider); 可以直接通过`style`属性设置分割线的样式 ```html - + 文字 ``` @@ -58,14 +60,14 @@ Vue.use(Divider); ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| dashed | 是否使用虚线 | *boolean* | `false` | -| hairline | 是否使用 0.5px 线 | *boolean* | `true` | -| content-position | 内容位置，可选值为`left` `right` | *string* | `center` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------------------------------- | --------- | -------- | +| dashed | 是否使用虚线 | _boolean_ | `false` | +| hairline | 是否使用 0.5px 线 | _boolean_ | `true` | +| content-position | 内容位置，可选值为`left` `right` | _string_ | `center` | ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | ---- | | default | 内容 | diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 82978fc3b..a8118896c 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -30,15 +30,15 @@ export default { option1: [ { text: 'Option1', value: 0 }, { text: 'Option2', value: 1 }, - { text: 'Option3', value: 2 } + { text: 'Option3', value: 2 }, ], option2: [ { text: 'Option A', value: 'a' }, { text: 'Option B', value: 'b' }, { text: 'Option C', value: 'c' }, - ] - } - } + ], + }; + }, }; ``` @@ -65,15 +65,15 @@ export default { option: [ { text: 'Option1', value: 0 }, { text: 'Option2', value: 1 }, - { text: 'Option3', value: 2 } - ] - } + { text: 'Option3', value: 2 }, + ], + }; }, methods: { onConfirm() { this.$refs.item.toggle(); - } - } + }, + }, }; ``` @@ -111,55 +111,55 @@ Use `active-color` prop to custom active color of the title and options ### DropdownMenu Props | Attribute | Description | Type | Default | -|------|------|------|------| -| active-color | Active color of title and option | *string* | `#1989fa` | -| direction `v2.0.1` | Expand direction, can be set to `up` | *string* | `down` | -| z-index | z-index of menu item | *number \| string* | `10` | -| duration | Transition duration, unit second | *number \| string* | `0.2` | -| overlay | Whether to show overlay | *boolean* | `true` | -| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | -| close-on-click-outside `v2.0.7` | Whether to close when click outside | *boolean* | `true` | +| --- | --- | --- | --- | +| active-color | Active color of title and option | _string_ | `#1989fa` | +| direction `v2.0.1` | Expand direction, can be set to `up` | _string_ | `down` | +| z-index | z-index of menu item | _number \| string_ | `10` | +| duration | Transition duration, unit second | _number \| string_ | `0.2` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | +| close-on-click-outside `v2.0.7` | Whether to close when click outside | _boolean_ | `true` | ### DropdownItem Props | Attribute | Description | Type | Default | -|------|------|------|------| -| value | Value of current option，can use `v-model` | *number \| string* | - | -| title | Item title | *string* | Text of selected option | -| options | Options | *Option[]* | `[]` | -| disabled | Whether to disable dropdown item | *boolean* | `false` | -| title-class | Title class | *string* | - | -| get-container `v2.2.4` | Return the mount node for menu | *string \| () => Element* | - | +| --- | --- | --- | --- | +| value | Value of current option，can use `v-model` | _number \| string_ | - | +| title | Item title | _string_ | Text of selected option | +| options | Options | _Option[]_ | `[]` | +| disabled | Whether to disable dropdown item | _boolean_ | `false` | +| title-class | Title class | _string_ | - | +| get-container `v2.2.4` | Return the mount node for menu | _string \| () => Element_ | - | ### DropdownItem Events -| Event | Description | Arguments | -|------|------|------| -| change | Triggered select option and value changed | value | -| open | Triggered when open menu | - | -| close | Triggered when close menu | - | -| opened | Triggered when menu opened | - | -| closed | Triggered when menu closed | - | +| Event | Description | Arguments | +| ------ | ----------------------------------------- | --------- | +| change | Triggered select option and value changed | value | +| open | Triggered when open menu | - | +| close | Triggered when close menu | - | +| opened | Triggered when menu opened | - | +| closed | Triggered when menu closed | - | ### DropdownItem Slots -| Name | Description | -|------|------| -| default | Content | -| title | Custom title | +| Name | Description | +| ------- | ------------ | +| default | Content | +| title | Custom title | ### DropdownItem Methods Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| toggle | Toggle display | show: boolean | - | +| Name | Description | Attribute | Return value | +| ------ | -------------- | ------------- | ------------ | +| toggle | Toggle display | show: boolean | - | ### Data Structure of Option -| Key | Description | Type | -|------|------|------| -| text | Text | *string* | -| value | Value | *number \| string* | -| icon | Left icon | *string* | +| Key | Description | Type | +| ----- | ----------- | ------------------ | +| text | Text | _string_ | +| value | Value | _number \| string_ | +| icon | Left icon | _string_ | diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 11c2a1bcc..5dde3e49f 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -30,15 +30,15 @@ export default { option1: [ { text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, - { text: '活动商品', value: 2 } + { text: '活动商品', value: 2 }, ], option2: [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, - ] - } - } + ], + }; + }, }; ``` @@ -67,15 +67,15 @@ export default { option: [ { text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, - { text: '活动商品', value: 2 } - ] - } + { text: '活动商品', value: 2 }, + ], + }; }, methods: { onConfirm() { this.$refs.item.toggle(); - } - } + }, + }, }; ``` @@ -115,55 +115,55 @@ export default { ### DropdownMenu Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| active-color | 菜单标题和选项的选中态颜色 | *string* | `#1989fa` | -| direction `v2.0.1` | 菜单展开方向，可选值为`up` | *string* | `down` | -| z-index | 菜单栏 z-index 层级 | *number \| string* | `10` | -| duration | 动画时长，单位秒 | *number \| string* | `0.2` | -| overlay | 是否显示遮罩层 | *boolean* | `true` | -| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | *boolean* | `true` | -| close-on-click-outside `v2.0.7` | 是否在点击外部元素后关闭菜单 | *boolean* | `true` | +| --- | --- | --- | --- | +| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` | +| direction `v2.0.1` | 菜单展开方向，可选值为`up` | _string_ | `down` | +| z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` | +| duration | 动画时长，单位秒 | _number \| string_ | `0.2` | +| overlay | 是否显示遮罩层 | _boolean_ | `true` | +| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` | +| close-on-click-outside `v2.0.7` | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` | ### DropdownItem Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | *number \| string* | - | -| title | 菜单项标题 | *string* | 当前选中项文字 | -| options | 选项数组 | *Option[]* | `[]` | -| disabled | 是否禁用菜单 | *boolean* | `false` | -| title-class | 标题额外类名 | *string* | - | -| get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - | +| --- | --- | --- | --- | +| value | 当前选中项对应的 value，可以通过`v-model`双向绑定 | _number \| string_ | - | +| title | 菜单项标题 | _string_ | 当前选中项文字 | +| options | 选项数组 | _Option[]_ | `[]` | +| disabled | 是否禁用菜单 | _boolean_ | `false` | +| title-class | 标题额外类名 | _string_ | - | +| get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - | ### DropdownItem Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 点击选项导致 value 变化时触发 | value | -| open | 打开菜单栏时触发 | - | -| close | 关闭菜单栏时触发 | - | -| opened | 打开菜单栏且动画结束后触发 | - | -| closed | 关闭菜单栏且动画结束后触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | ----------------------------- | -------- | +| change | 点击选项导致 value 变化时触发 | value | +| open | 打开菜单栏时触发 | - | +| close | 关闭菜单栏时触发 | - | +| opened | 打开菜单栏且动画结束后触发 | - | +| closed | 关闭菜单栏且动画结束后触发 | - | ### DropdownItem Slots -| 名称 | 说明 | -|------|------| -| default | 菜单内容 | -| title | 自定义标题，不支持动态渲染 | +| 名称 | 说明 | +| ------- | -------------------------- | +| default | 菜单内容 | +| title | 自定义标题，不支持动态渲染 | ### DropdownItem 方法 通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - | ### Option 数据结构 -| 键名 | 说明 | 类型 | -|------|------|------| -| text | 文字 | *string* | -| value | 标识符 | *number \| string* | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | +| 键名 | 说明 | 类型 | +| ----- | -------------------------------------- | ------------------ | +| text | 文字 | _string_ | +| value | 标识符 | _number \| string_ | +| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | diff --git a/src/empty/README.md b/src/empty/README.md index 96b16f395..9d95227f2 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -40,9 +40,9 @@ Use the image prop to display different placeholder images /> ``` @@ -56,9 +56,9 @@ Use the image prop to display different placeholder images ``` @@ -67,14 +67,14 @@ Use the image prop to display different placeholder images ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| image | Image type，can be set to `error` `network` `search` or image URL | *string* | `default` | -| description | Desciption | *string* | - | +| --- | --- | --- | --- | +| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` | +| description | Desciption | _string_ | - | ### Slots -| Name | Description | -|------|------| -| default | Custom bottom content | -| image | Custom image | -| description | Custom description | +| Name | Description | +| ----------- | --------------------- | +| default | Custom bottom content | +| image | Custom image | +| description | Custom description | diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 5cba301b7..1b3be65f8 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -46,10 +46,10 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 /> ``` @@ -65,9 +65,9 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 ``` @@ -76,14 +76,14 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | *string* | `default` | -| description | 图片下方的描述文字 | *string* | - | +| --- | --- | --- | --- | +| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` | +| description | 图片下方的描述文字 | _string_ | - | ### Slots -| 名称 | 说明 | -|------|------| -| default | 自定义底部内容 | -| image | 自定义图标 | +| 名称 | 说明 | +| ----------- | -------------- | +| default | 自定义底部内容 | +| image | 自定义图标 | | description | 自定义描述文字 | diff --git a/src/field/README.md b/src/field/README.md index 7839507c6..e9b02bc60 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -25,10 +25,10 @@ The value of field is bound with v-model. export default { data() { return { - value: '' + value: '', }; - } -} + }, +}; ``` ### Custom Type @@ -51,10 +51,10 @@ export default { text: '', digit: '', number: '', - password: '' + password: '', }; - } -} + }, +}; ``` ### Disabled @@ -92,9 +92,9 @@ export default { data() { return { value1: '', - value2: '123' + value2: '123', }; - } + }, }; ``` @@ -126,13 +126,7 @@ Use `error` or `error-message` to show error info Use button slot to insert button ```html - + @@ -156,15 +150,15 @@ Use `formatter` prop to format the input value export default { data() { return { - value: '' + value: '', }; }, methods: { formatter(value) { return value.replace(/\d/g, ''); - } - } -} + }, + }, +}; ``` ### Auto Resize @@ -215,67 +209,67 @@ Use `input-align` prop to align the input value ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model (value) | Field value | *number \| string* | - | -| label | Field label | *string* | - | -| name `v2.5.0` | Name | *string* | - | -| type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | *string* | `text` | -| size | Size，can be set to `large` | *string* | - | -| maxlength | Max length of value | *number \| string* | - | -| placeholder | Placeholder | *string* | - | -| border | Whether to show inner border | *boolean* | `true` | -| disabled | Whether to disable field | *boolean* | `false` | -| readonly | Whether to be readonly | *boolean* | `false` | -| required | Whether to show required mark | *boolean* | `false` | -| clearable | Whether to be clearable | *boolean* | `false` | -| clickable | Whether to show click feedback when clicked | *boolean* | `false` | -| is-link | Whether to show link icon | *boolean* | `false` | -| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | -| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | -| error | Whether to show error info | *boolean* | `false` | -| error-message | Error message | *string* | - | -| formatter `v2.4.2` | Input value formatter | *Function* | - | -| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` | -| label-class | Label className | *any* | - | -| label-width | Label width | *number \| string* | `90px` | -| label-align | Label align, can be set to `center` `right` | *string* | `left` | -| input-align | Input align, can be set to `center` `right` | *string* | `left` | -| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` | -| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` | -| left-icon | Left side icon name | *string* | - | -| right-icon | Right side icon name | *string* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | -| rules `v2.5.0` | Form validation rules | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | Field value | _number \| string_ | - | +| label | Field label | _string_ | - | +| name `v2.5.0` | Name | _string_ | - | +| type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | _string_ | `text` | +| size | Size，can be set to `large` | _string_ | - | +| maxlength | Max length of value | _number \| string_ | - | +| placeholder | Placeholder | _string_ | - | +| border | Whether to show inner border | _boolean_ | `true` | +| disabled | Whether to disable field | _boolean_ | `false` | +| readonly | Whether to be readonly | _boolean_ | `false` | +| required | Whether to show required mark | _boolean_ | `false` | +| clearable | Whether to be clearable | _boolean_ | `false` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | +| is-link | Whether to show link icon | _boolean_ | `false` | +| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` | +| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` | +| error | Whether to show error info | _boolean_ | `false` | +| error-message | Error message | _string_ | - | +| formatter `v2.4.2` | Input value formatter | _Function_ | - | +| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` | +| label-class | Label className | _any_ | - | +| label-width | Label width | _number \| string_ | `90px` | +| label-align | Label align, can be set to `center` `right` | _string_ | `left` | +| input-align | Input align, can be set to `center` `right` | _string_ | `left` | +| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` | +| autosize | Textarea auto resize，can accpet an object,
e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` | +| left-icon | Left side icon name | _string_ | - | +| right-icon | Right side icon name | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| rules `v2.5.0` | Form validation rules | _Rule[]_ | - | ### Events Field support all native events of input tag | Event | Description | Parameters | -|------|------|------| -| input | Triggered when input value changed | *value: string* | -| focus | Triggered when input gets focus | *event: Event* | -| blur | Triggered when input loses focus | *event: Event* | -| clear | Triggered when click clear icon | *event: Event* | -| click | Triggered when click Field | *event: Event* | -| click-left-icon | Triggered when click the left icon of Field | *event: Event* | -| click-right-icon | Triggered when click the right icon of Field | *event: Event* | +| --- | --- | --- | +| input | Triggered when input value changed | _value: string_ | +| focus | Triggered when input gets focus | _event: Event_ | +| blur | Triggered when input loses focus | _event: Event_ | +| clear | Triggered when click clear icon | _event: Event_ | +| click | Triggered when click Field | _event: Event_ | +| click-left-icon | Triggered when click the left icon of Field | _event: Event_ | +| click-right-icon | Triggered when click the right icon of Field | _event: Event_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| focus | Trigger input focus | - | - | -| blur | Trigger input blur | - | - | +| Name | Description | Attribute | Return value | +| ----- | ------------------- | --------- | ------------ | +| focus | Trigger input focus | - | - | +| blur | Trigger input blur | - | - | ### Slots -| Name | Description | -|------|------| -| label | Custom label | -| input | Custom input | -| left-icon | Custom left icon | +| Name | Description | +| ---------- | ----------------- | +| label | Custom label | +| input | Custom input | +| left-icon | Custom left icon | | right-icon | Custom right icon | -| button | Insert button | +| button | Insert button | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 5d80e7fc7..3ab169b9b 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -30,10 +30,10 @@ Vue.use(Field); export default { data() { return { - value: '' + value: '', }; - } -} + }, +}; ``` ### 自定义类型 @@ -61,10 +61,10 @@ export default { text: '', digit: '', number: '', - password: '' + password: '', }; - } -} + }, +}; ``` > Tips: digit 类型从 2.4.2 版本开始支持 @@ -108,9 +108,9 @@ export default { data() { return { value1: '', - value2: '123' + value2: '123', }; - } + }, }; ``` @@ -172,16 +172,16 @@ export default { export default { data() { return { - value: '' + value: '', }; }, methods: { formatter(value) { // 过滤输入的数字 return value.replace(/\d/g, ''); - } - } -} + }, + }, +}; ``` ### 高度自适应 @@ -234,70 +234,70 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model (value) | 当前输入的值 | *number \| string* | - | -| label | 输入框左侧文本 | *string* | - | -| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - | -| type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | *string* | `text` | -| size | 大小，可选值为 `large` | *string* | - | -| maxlength | 输入的最大字符数 | *number \| string* | - | -| placeholder | 占位提示文字 | *string* | - | -| border | 是否显示内边框 | *boolean* | `true` | -| disabled | 是否禁用输入框 | *boolean* | `false` | -| readonly | 是否只读 | *boolean* | `false` | -| required | 是否显示表单必填星号 | *boolean* | `false` | -| clearable | 是否启用清除控件 | *boolean* | `false` | -| clickable | 是否开启点击反馈 | *boolean* | `false` | -| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | -| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | -| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | -| error | 是否将输入内容标红 | *boolean* | `false` | -| error-message | 底部错误提示文案，为空时不展示 | *string* | - | -| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - | -| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` | -| label-class | 左侧文本额外类名 | *any* | - | -| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` | -| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | -| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | -| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | -| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | *boolean \| object* | `false` | -| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - | +| --- | --- | --- | --- | +| v-model (value) | 当前输入的值 | _number \| string_ | - | +| label | 输入框左侧文本 | _string_ | - | +| name `v2.5.0` | 名称，提交表单的标识符 | _string_ | - | +| type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | _string_ | `text` | +| size | 大小，可选值为 `large` | _string_ | - | +| maxlength | 输入的最大字符数 | _number \| string_ | - | +| placeholder | 占位提示文字 | _string_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| disabled | 是否禁用输入框 | _boolean_ | `false` | +| readonly | 是否只读 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| clearable | 是否启用清除控件 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` | +| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | +| error | 是否将输入内容标红 | _boolean_ | `false` | +| error-message | 底部错误提示文案，为空时不展示 | _string_ | - | +| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - | +| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | +| label-class | 左侧文本额外类名 | _any_ | - | +| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` | +| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` | +| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | +| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | +| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` | +| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - | ### Events 除下列事件外，Field 默认支持 Input 标签所有的原生事件 -| 事件 | 说明 | 回调参数 | -|------|------|------| -| input | 输入框内容变化时触发 | *value: string (当前输入的值)* | -| focus | 输入框获得焦点时触发 | *event: Event* | -| blur | 输入框失去焦点时触发 | *event: Event* | -| clear | 点击清除按钮时触发 | *event: Event* | -| click | 点击时触发 | *event: Event* | -| click-left-icon | 点击左侧图标时触发 | *event: Event* | -| click-right-icon | 点击右侧图标时触发 | *event: Event* | +| 事件 | 说明 | 回调参数 | +| ---------------- | -------------------- | ------------------------------ | +| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ | +| focus | 输入框获得焦点时触发 | _event: Event_ | +| blur | 输入框失去焦点时触发 | _event: Event_ | +| clear | 点击清除按钮时触发 | _event: Event_ | +| click | 点击时触发 | _event: Event_ | +| click-left-icon | 点击左侧图标时触发 | _event: Event_ | +| click-right-icon | 点击右侧图标时触发 | _event: Event_ | ### 方法 通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| focus | 获取输入框焦点 | - | - | -| blur | 取消输入框焦点 | - | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | -------------- | ---- | ------ | +| focus | 获取输入框焦点 | - | - | +| blur | 取消输入框焦点 | - | - | ### Slots -| 名称 | 说明 | -|------|------| -| label | 自定义输入框标签 | -| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | -| left-icon | 自定义输入框头部图标 | -| right-icon | 自定义输入框尾部图标 | -| button | 自定义输入框尾部按钮 | +| 名称 | 说明 | +| ---------- | ---------------------------------------------------------- | +| label | 自定义输入框标签 | +| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | +| left-icon | 自定义输入框头部图标 | +| right-icon | 自定义输入框尾部图标 | +| button | 自定义输入框尾部按钮 | ## 常见问题 diff --git a/src/form/README.md b/src/form/README.md index a123fa0b9..dfb707667 100644 --- a/src/form/README.md +++ b/src/form/README.md @@ -101,7 +101,7 @@ export default { return /1\d{10}/.test(val); }, asyncValidator(val) { - return new Promise(resolve => { + return new Promise((resolve) => { Toast.loading('Validating...'); setTimeout(() => { @@ -194,7 +194,7 @@ export default { ```html ``` @@ -379,7 +379,7 @@ export default { }, methods: { onConfirm(values) { - this.value = values.map(item => item.name).join('/'); + this.value = values.map((item) => item.name).join('/'); this.showArea = false; }, }, @@ -423,49 +423,49 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| label-width | Field label width | *number \| string* | `90px` | -| 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 `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` | -| colon | Whether to display `:` after label | *boolean* | `false` | -| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` | -| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | *boolean* | `false` | -| show-error `v2.6.0` | Whether to highlight input when validation failed | *boolean* | `true` | -| show-error-message `v2.5.8` | Whether to show error message when validation failed | *boolean* | `true` | +| --- | --- | --- | --- | +| label-width | Field label width | _number \| string_ | `90px` | +| 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 `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` | +| colon | Whether to display `:` after label | _boolean_ | `false` | +| validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` | +| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | _boolean_ | `false` | +| show-error `v2.6.0` | Whether to highlight input when validation failed | _boolean_ | `true` | +| show-error-message `v2.5.8` | Whether to show error message when validation failed | _boolean_ | `true` | -### Data Structure of Rule +### Data Structure of Rule | Key | Description | Type | -|------|------|------| -| required | Whether to be a required field | *boolean* | -| message `v2.5.3` | Error message | *string \| (value, rule) => string* | -| validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* | -| pattern `v2.5.3` | Regex pattern | *RegExp* | -| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* | -| formatter `v2.5.3` | Format value before validate | *(value, rule) => any* | +| --- | --- | --- | +| required | Whether to be a required field | _boolean_ | +| message `v2.5.3` | Error message | _string \| (value, rule) => string_ | +| validator `v2.5.3` | Custom validator | _(value, rule) => boolean \| Promise_ | +| pattern `v2.5.3` | Regex pattern | _RegExp_ | +| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | _string_ | +| formatter `v2.5.3` | Format value before validate | _(value, rule) => any_ | ### Events | Event | Description | Arguments | -|------|------|------| -| submit | Triggered after submitting the form and validation passed | *values: object* | -| failed | Triggered after submitting the form and validation failed | *errorInfo: { values: object, errors: object[] }* | +| --- | --- | --- | +| submit | Triggered after submitting the form and validation passed | _values: object_ | +| failed | Triggered after submitting the form and validation failed | _errorInfo: { values: object, errors: object[] }_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| submit | Submit form | - | - | -| validate | Validate form | *name?: string* | *Promise* | -| resetValidation | Reset validation | *name?: string* | - | -| scrollToField `v2.5.2` | Scroll to field | *name: string* | - | +| Name | Description | Attribute | Return value | +| ---------------------- | ---------------- | --------------- | ------------ | +| submit | Submit form | - | - | +| validate | Validate form | _name?: string_ | _Promise_ | +| resetValidation | Reset validation | _name?: string_ | - | +| scrollToField `v2.5.2` | Scroll to field | _name: string_ | - | ### Slots -| Name | Description | -| ---- | ----------- | +| Name | Description | +| ------- | ------------ | | default | Form content | diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 2477b4c60..00ad6e42f 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -114,7 +114,7 @@ export default { }, // 异步校验函数返回 Promise asyncValidator(val) { - return new Promise(resolve => { + return new Promise((resolve) => { Toast.loading('验证中...'); setTimeout(() => { @@ -412,7 +412,7 @@ export default { }, methods: { onConfirm(values) { - this.value = values.map(item => item.name).join('/'); + this.value = values.map((item) => item.name).join('/'); this.showArea = false; }, }, @@ -458,17 +458,17 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| label-width | 表单项 label 宽度，默认单位为`px` | *number \| string* | `90px` | -| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` | -| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` | -| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | -| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` | -| colon | 是否在 label 后面添加冒号 | *boolean* | `false` | -| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` | -| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` | -| show-error `v2.6.0` | 是否在校验不通过时标红输入框 | *boolean* | `true` | -| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | *boolean* | `true` | +| --- | --- | --- | --- | +| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` | +| label-align |  表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` | +| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` | +| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` | +| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | _string_ | `onBlur` | +| colon | 是否在 label 后面添加冒号 | _boolean_ | `false` | +| validate-first | 是否在某一项校验不通过时停止校验 | _boolean_ | `false` | +| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` | +| show-error `v2.6.0` | 是否在校验不通过时标红输入框 | _boolean_ | `true` | +| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` | > 表单项的 API 参见：[Field 组件](#/zh-CN/field#api) @@ -477,36 +477,36 @@ export default { 使用 Field 的`rules`属性可以定义校验规则，可选属性如下: | 键名 | 说明 | 类型 | -|------|------|------| -| required | 是否为必选字段 | *boolean* | -| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* | -| validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* | -| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* | -| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* | -| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value, rule) => any* | +| --- | --- | --- | +| required | 是否为必选字段 | _boolean_ | +| message `v2.5.3` | 错误提示文案 | _string \| (value, rule) => string_ | +| validator `v2.5.3` | 通过函数进行校验 | _(value, rule) => boolean \| Promise_ | +| pattern `v2.5.3` | 通过正则表达式进行校验 | _RegExp_ | +| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | _string_ | +| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ | ### Events | 事件名 | 说明 | 回调参数 | -|------|------|------| -| submit | 提交表单且验证通过后触发 | *values: object* | -| failed | 提交表单且验证不通过后触发 | *errorInfo: { values: object, errors: object[] }* | +| --- | --- | --- | +| submit | 提交表单且验证通过后触发 | _values: object_ | +| failed | 提交表单且验证不通过后触发 | _errorInfo: { values: object, errors: object[] }_ | ### 方法 通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | submit | 提交表单，与点击提交按钮的效果等价 | - | - | -| validate | 验证表单，支持传入`name`来验证单个表单项 | *name?: string* | *Promise* | -| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | *name?: string* | - | -| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | *name: string* | - | +| validate | 验证表单，支持传入`name`来验证单个表单项 | _name?: string_ | _Promise_ | +| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - | +| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | _name: string_ | - | ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | -------- | | default | 表单内容 | ## 常见问题 diff --git a/src/goods-action/README.md b/src/goods-action/README.md index c169e1d63..40ebb9d00 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -19,8 +19,16 @@ Vue.use(GoodsActionIcon); - - + + ``` @@ -34,9 +42,9 @@ export default { }, onClickButton() { Toast('Click Button'); - } - } -} + }, + }, +}; ``` ### Icon Badge @@ -81,47 +89,47 @@ Use `badge` prop to show badge in icon ### GoodsAction Props | Attribute | Description | Type | Default | -|------|------|------|------| -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | +| --- | --- | --- | --- | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | ### GoodsActionIcon Props | Attribute | Description | Type | Default | -|------|------|------|------| -| text | Button text | *string* | - | -| icon | Icon | *string* | - | -| color `v2.4.2` | Icon color | *string* | `#323233` | -| icon-class | Icon class name | *any* | `''` | -| dot `2.5.5` | Whether to show red dot | *boolean* | - | -| badge `2.5.6` | Content of the badge | *number \| string* | - | -| 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` | +| --- | --- | --- | --- | +| text | Button text | _string_ | - | +| icon | Icon | _string_ | - | +| color `v2.4.2` | Icon color | _string_ | `#323233` | +| icon-class | Icon class name | _any_ | `''` | +| dot `2.5.5` | Whether to show red dot | _boolean_ | - | +| badge `2.5.6` | Content of the badge | _number \| string_ | - | +| 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` | ### GoodsActionButton Props | Attribute | Description | Type | Default | -|------|------|------|------| -| text | Button text | *string* | - | -| type | Button type, Can be set to `primary` `info` `warning` `danger` | *string* | `default` | -| color `v2.1.8` | Button color, support linear-gradient | *string* | - | -| icon `v2.4.4` | Left Icon | *string* | - | -| primary | Is primary button (red color) | *boolean* | `false` | -| disabled | Whether to disable button | *boolean* | `false` | -| loading | Whether show loading status | *boolean* | `false` | -| 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` | +| --- | --- | --- | --- | +| text | Button text | _string_ | - | +| type | Button type, Can be set to `primary` `info` `warning` `danger` | _string_ | `default` | +| color `v2.1.8` | Button color, support linear-gradient | _string_ | - | +| icon `v2.4.4` | Left Icon | _string_ | - | +| primary | Is primary button (red color) | _boolean_ | `false` | +| disabled | Whether to disable button | _boolean_ | `false` | +| loading | Whether show loading status | _boolean_ | `false` | +| 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` | ### GoodsActionIcon Slots -| Name | Description | -|------|------| -| default | Text | -| icon | Custom icon | +| Name | Description | +| ------- | ----------- | +| default | Text | +| icon | Custom icon | ### GoodsActionButton Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | -------------- | | default | Button content | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 04f81cccc..6ec54edcd 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -19,8 +19,16 @@ Vue.use(GoodsActionIcon); - - + + ``` @@ -34,9 +42,9 @@ export default { }, onClickButton() { Toast('点击按钮'); - } - } -} + }, + }, +}; ``` ### 徽标提示 @@ -85,47 +93,47 @@ export default { ### GoodsAction Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | +| --- | --- | --- | --- | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### GoodsActionIcon Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| text | 按钮文字 | *string* | - | -| icon | 图标 | *string* | - | -| color `v2.4.2` | 图标颜色 | *string* | `#323233` | -| icon-class | 图标额外类名 | *any* | - | -| dot `2.5.5` | 是否显示图标右上角小红点 | *boolean* | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | -| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | -| url | 点击后跳转的链接地址 | *string* | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | -| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | +| --- | --- | --- | --- | +| text | 按钮文字 | _string_ | - | +| icon | 图标 | _string_ | - | +| color `v2.4.2` | 图标颜色 | _string_ | `#323233` | +| icon-class | 图标额外类名 | _any_ | - | +| dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` | +| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | +| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | ### GoodsActionButton Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| text | 按钮文字 | *string* | - | -| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | -| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | -| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| disabled | 是否禁用按钮 | *boolean* | `false` | - | -| loading | 是否显示为加载状态 | *boolean* | `false` | - | -| url | 点击后跳转的链接地址 | *string* | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | -| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | +| --- | --- | --- | --- | +| text | 按钮文字 | _string_ | - | +| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | +| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | +| icon `v2.4.4` | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| disabled | 是否禁用按钮 | _boolean_ | `false` | - | +| loading | 是否显示为加载状态 | _boolean_ | `false` | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | ### GoodsActionIcon Slots -| 名称 | 说明 | -|------|------| -| default | 文本内容 | -| icon | 自定义图标 | +| 名称 | 说明 | +| ------- | ---------- | +| default | 文本内容 | +| icon | 自定义图标 | ### GoodsActionButton Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | ------------ | | default | 按钮显示内容 | diff --git a/src/grid/README.md b/src/grid/README.md index 9ec328725..e07219378 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -27,12 +27,7 @@ Vue.use(GridItem); ```html - + ``` @@ -56,12 +51,7 @@ Vue.use(GridItem); ```html - + ``` @@ -69,12 +59,7 @@ Vue.use(GridItem); ```html - + ``` @@ -101,38 +86,38 @@ Vue.use(GridItem); ### Grid Props | Attribute | Description | Type | Default | -|------|------|------|------| -| column-num `v2.0.4` | Column Num | *number \| string* | `4` | -| icon-size `v2.2.6` | Icon size | *number \| string* | `28px` | -| gutter | Gutter | *number \| string* | `0` | -| border | Whether to show border | *boolean* | `true` | -| center | Whether to center content | *boolean* | `true` | -| square | Whether to be square shape | *boolean* | `false` | -| clickable | Whether to show click feedback when clicked | *boolean* | `false` | +| --- | --- | --- | --- | +| column-num `v2.0.4` | Column Num | _number \| string_ | `4` | +| icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` | +| gutter | Gutter | _number \| string_ | `0` | +| border | Whether to show border | _boolean_ | `true` | +| center | Whether to center content | _boolean_ | `true` | +| square | Whether to be square shape | _boolean_ | `false` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `false` | ### GridItem Props | Attribute | Description | Type | Default | -|------|------|------|------| -| text | Text | *string* | - | -| icon | Icon name or URL | *string* | - | -| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` | -| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` | -| badge `v2.5.6` | Content of the badge | *number \| string* | - | -| 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` | +| --- | --- | --- | --- | +| text | Text | _string_ | - | +| icon | Icon name or URL | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` | +| badge `v2.5.6` | Content of the badge | _number \| string_ | - | +| 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` | ### GridItem Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when clicked | *event: Event* | +| Event | Description | Arguments | +| ----- | ---------------------- | -------------- | +| click | Triggered when clicked | _event: Event_ | ### GridItem Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | -------------- | | default | Custom content | -| icon | Custom icon | -| text | Custom text | +| icon | Custom icon | +| text | Custom text | diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index 86371d789..f766652b6 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -35,12 +35,7 @@ Vue.use(GridItem); ```html - + ``` @@ -68,12 +63,7 @@ Vue.use(GridItem); ```html - + ``` @@ -83,12 +73,7 @@ Vue.use(GridItem); ```html - + ``` @@ -119,39 +104,39 @@ Vue.use(GridItem); ### Grid Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| column-num `v2.0.4` | 列数 | *number \| string* | `4` | -| icon-size `v2.2.6` | 图标大小，默认单位为`px` | *number \| string* | `28px` | -| gutter | 格子之间的间距，默认单位为`px` | *number \| string* | `0` | -| border | 是否显示边框 | *boolean* | `true` | -| center | 是否将格子内容居中显示 | *boolean* | `true` | -| square | 是否将格子固定为正方形 | *boolean* | `false` | -| clickable | 是否开启格子点击反馈 | *boolean* | `false` | +| --- | --- | --- | --- | +| column-num `v2.0.4` | 列数 | _number \| string_ | `4` | +| icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` | +| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` | +| border | 是否显示边框 | _boolean_ | `true` | +| center | 是否将格子内容居中显示 | _boolean_ | `true` | +| square | 是否将格子固定为正方形 | _boolean_ | `false` | +| clickable | 是否开启格子点击反馈 | _boolean_ | `false` | ### GridItem Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| text | 文字 | *string* | - | -| icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` | -| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | -| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | -| url | 点击后跳转的链接地址 | *string* | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | -| replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | +| --- | --- | --- | --- | +| text | 文字 | _string_ | - | +| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` | +| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | +| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | ### GridItem Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击格子时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | -------------- | +| click | 点击格子时触发 | _event: Event_ | ### GridItem Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | -------------------- | | default | 自定义宫格的所有内容 | -| icon | 自定义图标 | -| text | 自定义文字 | +| icon | 自定义图标 | +| text | 自定义文字 | diff --git a/src/icon/README.md b/src/icon/README.md index 5717b8597..fac716683 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -22,7 +22,7 @@ Use `name` prop to set icon name or icon URL ### Show Badge -Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon. +Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon. Use `badge` prop, the badge will be displayed in the upper right corner of the icon. @@ -46,8 +46,7 @@ Use `color` prop to set icon color Use `size` prop to set icon size ```html - - + ``` ### Use local font file @@ -83,18 +82,18 @@ import 'vant/lib/icon/local.css'; ### Props -| Attribute | Description | Type | Default | -|------|------|------|------| -| name | Icon name or URL | *string* | `''` | -| dot `v2.2.1` | Whether to show red dot | *boolean* | `false` | -| badge `v2.5.6` | Content of the badge | *number \| string* | `''` | -| color | Icon color | *string* | `inherit` | -| size | Icon size | *number \| string* | `inherit` | -| class-prefix | ClassName prefix | *string* | `van-icon` | -| tag | HTML Tag | *string* | `i` | +| Attribute | Description | Type | Default | +| -------------- | ----------------------- | ------------------ | ---------- | +| name | Icon name or URL | _string_ | `''` | +| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` | +| badge `v2.5.6` | Content of the badge | _number \| string_ | `''` | +| color | Icon color | _string_ | `inherit` | +| size | Icon size | _number \| string_ | `inherit` | +| class-prefix | ClassName prefix | _string_ | `van-icon` | +| tag | HTML Tag | _string_ | `i` | ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click icon | *event: Event* | +| Event | Description | Arguments | +| ----- | ------------------------- | -------------- | +| click | Triggered when click icon | _event: Event_ | diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index bad4cd3eb..794490b64 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -48,8 +48,7 @@ Vue.use(Icon); `Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px` ```html - - + ``` ### 使用本地字体文件 @@ -90,18 +89,18 @@ import 'vant/lib/icon/local.css'; ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| name | 图标名称或图片链接 | *string* | - | -| dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` | -| badge `v2.5.6` | 图标右上角徽标的内容 | *number \| string* | - | -| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | *number \| string* | - | -| color | 图标颜色 | *string* | `inherit` | -| size | 图标大小，如 `20px` `2em`，默认单位为`px` | *number \| string* | `inherit` | -| class-prefix | 类名前缀，用于使用自定义图标 | *string* | `van-icon` | -| tag | HTML 标签 | *string* | `i` | +| --- | --- | --- | --- | +| name | 图标名称或图片链接 | _string_ | - | +| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` | +| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - | +| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - | +| color | 图标颜色 | _string_ | `inherit` | +| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` | +| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` | +| tag | HTML 标签 | _string_ | `i` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击图标时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | -------------- | +| click | 点击图标时触发 | _event: Event_ | diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 028f15d89..765e06aa5 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -16,7 +16,7 @@ Vue.use(ImagePreview); ```js ImagePreview([ 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg' + 'https://img.yzcdn.cn/vant/apple-2.jpg', ]); ``` @@ -26,12 +26,12 @@ ImagePreview([ ImagePreview({ images: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg' + 'https://img.yzcdn.cn/vant/apple-2.jpg', ], startPosition: 1, onClose() { // do something - } + }, }); ``` @@ -41,11 +41,8 @@ After setting the `closeable` attribute, the close icon will be displayed in the ```js ImagePreview({ - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ], - closeable: true + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], + closeable: true, }); ``` @@ -55,9 +52,9 @@ ImagePreview({ const instance = ImagePreview({ images: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg' + 'https://img.yzcdn.cn/vant/apple-2.jpg', ], - asyncClose: true + asyncClose: true, }); setTimeout(() => { @@ -79,19 +76,16 @@ export default { return { show: false, index: 0, - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ] + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], }; }, methods: { onChange(index) { this.index = index; - } - } -} + }, + }, +}; ``` ## API @@ -99,48 +93,48 @@ export default { ### Options | Attribute | Description | Type | Default | -|------|------|------|------| -| images | Images URL list | *string[]* | `[]` | -| startPosition | Start position | *number \| string* | `0` | -| showIndex | Whether to show index | *boolean* | `true` | -| showIndicators | Whether to show indicators | *boolean* | `false` | -| loop | Whether to enable loop | *boolean* | `true` | -| swipeDuration | Animation duration (ms) | *number \| string* | `500` | -| onClose | Triggered when close | *Function* | - | -| onChange `v2.0.3` | Triggered when current image change | *Function* | - | -| onScale | Triggered when current image scale | *Function* | - | -| closeOnPopstate | Whether to close when popstate | *boolean* | `false` | -| asyncClose | Whether to enable async close | *boolean* | `false` | -| className | Custom className | *any* | - | -| maxZoom | Max zoom | *number \| string* | `3` | -| 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` | +| --- | --- | --- | --- | +| images | Images URL list | _string[]_ | `[]` | +| startPosition | Start position | _number \| string_ | `0` | +| showIndex | Whether to show index | _boolean_ | `true` | +| showIndicators | Whether to show indicators | _boolean_ | `false` | +| loop | Whether to enable loop | _boolean_ | `true` | +| swipeDuration | Animation duration (ms) | _number \| string_ | `500` | +| onClose | Triggered when close | _Function_ | - | +| onChange `v2.0.3` | Triggered when current image change | _Function_ | - | +| onScale | Triggered when current image scale | _Function_ | - | +| closeOnPopstate | Whether to close when popstate | _boolean_ | `false` | +| asyncClose | Whether to enable async close | _boolean_ | `false` | +| className | Custom className | _any_ | - | +| maxZoom | Max zoom | _number \| string_ | `3` | +| 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` | ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| images | Images URL list | *string[]* | `[]` | -| start-position | Start position | *number \| string* | `0` | -| swipe-duration | Animation duration (ms) | *number \| string* | `500` | -| show-index | Whether to show index | *boolean* | `true` | -| show-indicators | Whether to show indicators | *boolean* | `false` | -| loop | Whether to enable loop | *boolean* | `true` | -| async-close | Whether to enable async close | *boolean* | `false` | -| close-on-popstate | Whether to close when popstate | *boolean* | `false` | -| class-name | Custom className | *any* | - | -| max-zoom | Max zoom | *number \| string* | `3` | -| min-zoom | Min zoom | *number \| string* | `1/3` | -| closeable `v2.5.0` | Whether to show close icon | *boolean* | `false` | -| close-icon `v2.5.0` | Close icon name | *string* | `clear` | -| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | Images URL list | _string[]_ | `[]` | +| start-position | Start position | _number \| string_ | `0` | +| swipe-duration | Animation duration (ms) | _number \| string_ | `500` | +| show-index | Whether to show index | _boolean_ | `true` | +| show-indicators | Whether to show indicators | _boolean_ | `false` | +| loop | Whether to enable loop | _boolean_ | `true` | +| async-close | Whether to enable async close | _boolean_ | `false` | +| close-on-popstate | Whether to close when popstate | _boolean_ | `false` | +| class-name | Custom className | _any_ | - | +| max-zoom | Max zoom | _number \| string_ | `3` | +| min-zoom | Min zoom | _number \| string_ | `1/3` | +| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` | +| close-icon `v2.5.0` | Close icon name | _string_ | `clear` | +| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | ### Events | Event | Description | Parameters | -|------|------|------| +| --- | --- | --- | | close | Triggered when close | { index, url } | | closed `v2.5.6` | Triggered after closed | - | | change | Triggered when current image change | index: index of current image | @@ -148,21 +142,21 @@ export default { ### Slots -| Name | Description | -|------|------| -| index | Custom index | +| Name | Description | +| ----- | -------------------------------------------- | +| index | Custom index | | cover | Custom content that covers the image preview | ### onClose Parematers -| Attribute | Description | Type | -|------|------|------| -| url | Url of current image | *number* | -| index | Index of current image | *number* | +| Attribute | Description | Type | +| --------- | ---------------------- | -------- | +| url | Url of current image | _number_ | +| index | Index of current image | _number_ | ### onScale Parematers -| Attribute | Description | Type | -|------|------|------| -| index | Index of current image | *number* | -| scale | scale of current image | *number* | +| Attribute | Description | Type | +| --------- | ---------------------- | -------- | +| index | Index of current image | _number_ | +| scale | scale of current image | _number_ | diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 99567607a..cdc3d1276 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -2,7 +2,7 @@ ### 引入 -`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。 +`ImagePreview`和其他组件不同，不是通过 HTML 结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。 ```js import Vue from 'vue'; @@ -18,10 +18,7 @@ Vue.use(ImagePreview); 直接传入图片数组，即可展示图片预览 ```js -ImagePreview([ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' -]); +ImagePreview(['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg']); ``` ### 传入配置项 @@ -30,14 +27,11 @@ ImagePreview([ ```js ImagePreview({ - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ], + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], startPosition: 1, onClose() { // do something - } + }, }); ``` @@ -47,11 +41,8 @@ ImagePreview({ ```js ImagePreview({ - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ], - closeable: true + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], + closeable: true, }); ``` @@ -61,11 +52,8 @@ ImagePreview({ ```js const instance = ImagePreview({ - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ], - asyncClose: true + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], + asyncClose: true, }); setTimeout(() => { @@ -89,19 +77,16 @@ export default { return { show: false, index: 0, - images: [ - 'https://img.yzcdn.cn/1.jpg', - 'https://img.yzcdn.cn/2.jpg' - ] + images: ['https://img.yzcdn.cn/1.jpg', 'https://img.yzcdn.cn/2.jpg'], }; }, methods: { onChange(index) { this.index = index; - } - } -} + }, + }, +}; ``` ## API @@ -111,52 +96,52 @@ export default { 通过函数调用 `ImagePreview` 时，支持传入以下选项： | 参数名 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| startPosition | 图片预览起始位置索引 | *number \| string* | `0` | -| swipeDuration | 动画时长，单位为`ms` | *number \| string* | `500` | -| showIndex | 是否显示页码 | *boolean* | `true` | -| showIndicators | 是否显示轮播指示器 | *boolean* | `false` | -| loop | 是否开启循环播放 | *boolean* | `true` | -| onClose | 关闭时的回调函数 | *Function* | - | -| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | *Function* | - | -| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | *Function* | - | -| asyncClose | 是否开启异步关闭 | *boolean* | `false` | -| closeOnPopstate | 是否在页面回退时自动关闭 | *boolean* | `false` | -| className | 自定义类名 | *any* | - | -| maxZoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | -| minZoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | -| closeable | 是否显示关闭图标 | *boolean* | `false` | -| closeIcon | 关闭图标名称或图片链接 | *string* | `clear` | -| closeIconPosition | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| startPosition | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipeDuration | 动画时长，单位为`ms` | _number \| string_ | `500` | +| showIndex | 是否显示页码 | _boolean_ | `true` | +| showIndicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| onClose | 关闭时的回调函数 | _Function_ | - | +| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - | +| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - | +| asyncClose | 是否开启异步关闭 | _boolean_ | `false` | +| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| className | 自定义类名 | _any_ | - | +| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable | 是否显示关闭图标 | _boolean_ | `false` | +| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` | +| closeIconPosition | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Props 通过组件调用 `ImagePreview` 时，支持以下 Props： | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| images | 需要预览的图片 URL 数组 | *string[]* | `[]` | -| start-position | 图片预览起始位置索引 | *number \| string* | `0` | -| swipe-duration | 动画时长，单位为 ms | *number \| string* | `500` | -| show-index | 是否显示页码 | *boolean* | `true` | -| show-indicators | 是否显示轮播指示器 | *boolean* | `false` | -| loop | 是否开启循环播放 | *boolean* | `true` | -| async-close | 是否开启异步关闭 | *boolean* | `false` | -| close-on-popstate | 是否在页面回退时自动关闭 | *boolean* | `false` | -| class-name | 自定义类名 | *any* | - | -| max-zoom | 手势缩放时，最大缩放比例 | *number \| string* | `3` | -| min-zoom | 手势缩放时，最小缩放比例 | *number \| string* | `1/3` | -| closeable `v2.5.0` | 是否显示关闭图标 | *boolean* | `false` | -| close-icon `v2.5.0` | 关闭图标名称或图片链接 | *string* | `clear` | -| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | +| --- | --- | --- | --- | +| images | 需要预览的图片 URL 数组 | _string[]_ | `[]` | +| start-position | 图片预览起始位置索引 | _number \| string_ | `0` | +| swipe-duration | 动画时长，单位为 ms | _number \| string_ | `500` | +| show-index | 是否显示页码 | _boolean_ | `true` | +| show-indicators | 是否显示轮播指示器 | _boolean_ | `false` | +| loop | 是否开启循环播放 | _boolean_ | `true` | +| async-close | 是否开启异步关闭 | _boolean_ | `false` | +| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| class-name | 自定义类名 | _any_ | - | +| max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` | +| min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` | +| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` | +| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` | +| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | ### Events 通过组件调用 `ImagePreview` 时，支持以下事件： | 事件 | 说明 | 回调参数 | -|------|------|------| +| --- | --- | --- | | close | 关闭时触发 | { index: 索引, url: 图片链接 } | | closed `v2.5.6` | 关闭且且动画结束后触发 | - | | change | 切换当前图片时触发 | index: 当前图片的索引 | @@ -166,24 +151,24 @@ export default { 通过组件调用 `ImagePreview` 时，支持以下插槽： -| 名称 | 说明 | -|------|------| -| index | 自定义页码内容 | +| 名称 | 说明 | +| ----- | ------------------------------ | +| index | 自定义页码内容 | | cover | 自定义覆盖在图片预览上方的内容 | ### onClose 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| url | 当前图片 URL | *string* | -| index | 当前图片的索引值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| url | 当前图片 URL | _string_ | +| index | 当前图片的索引值 | _number_ | ### onScale 回调参数 -| 参数名 | 说明 | 类型 | -|------|------|------| -| index | 当前图片的索引值 | *number* | -| scale | 当前图片的缩放值 | *number* | +| 参数名 | 说明 | 类型 | +| ------ | ---------------- | -------- | +| index | 当前图片的索引值 | _number_ | +| scale | 当前图片的缩放值 | _number_ | ## 常见问题 diff --git a/src/image/README.md b/src/image/README.md index 101d86206..97321ada7 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -14,11 +14,7 @@ Vue.use(Image); ### Basic Usage ```html - + ``` ### Fit Mode @@ -68,24 +64,24 @@ Vue.use(Lazyload); ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| src | Src | *string* | - | -| fit | Fit mode | *string* | `fill` | -| alt | Alt | *string* | - | -| width | Width | *number \| string* | - | -| height | Height | *number \| string* | - | -| radius `v2.1.6` | 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` | -| show-error `v2.0.9` | Whether to show error placeholder | *boolean* | `true` | -| show-loading `v2.0.9` | Whether to show loading placeholder | *boolean* | `true` | -| error-icon `v2.4.2` | Error icon | *string* | `warning-o` | -| loading-icon `v2.4.2` | Loading icon | *string* | `photo-o` | +| --- | --- | --- | --- | +| src | Src | _string_ | - | +| fit | Fit mode | _string_ | `fill` | +| alt | Alt | _string_ | - | +| width | Width | _number \| string_ | - | +| height | Height | _number \| string_ | - | +| radius `v2.1.6` | 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` | +| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` | +| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` | +| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` | +| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` | ### fit optional value | name | desctription | -|------|------| +| --- | --- | | contain | Keep aspect ratio, fully display the long side of the image | | cover | Keep aspect ratio, fully display the short side of the image, cutting the long side | | fill | Stretch and resize image to fill the content box | @@ -94,15 +90,15 @@ Vue.use(Lazyload); ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click image | *event: Event* | -| load | Triggered when image loaded | - | -| error | Triggered when image load failed | - | +| Event | Description | Arguments | +| ----- | -------------------------------- | -------------- | +| click | Triggered when click image | _event: Event_ | +| load | Triggered when image loaded | - | +| error | Triggered when image load failed | - | ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | -------------------------- | | loading | Custom loading placeholder | -| error | Custom error placeholder | +| error | Custom error placeholder | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index a3b2dc92d..85f001bfb 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -20,11 +20,7 @@ Vue.use(Image); 基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性 ```html - + ``` ### 填充模式 @@ -100,44 +96,44 @@ Vue.use(Lazyload); ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| src | 图片链接 | *string* | - | -| fit | 图片填充模式 | *string* | `fill` | -| alt | 替代文本 | *string* | - | -| width | 宽度，默认单位为`px` | *number \| string* | - | -| height | 高度，默认单位为`px` | *number \| string* | - | -| radius `v2.1.6` | 圆角大小，默认单位为`px` | *number \| string* | `0` | -| round | 是否显示为圆形 | *boolean* | `false` | -| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` | -| show-error `v2.0.9` | 是否展示图片加载失败提示 | *boolean* | `true` | -| show-loading `v2.0.9` | 是否展示图片加载中提示 | *boolean* | `true` | -| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `warning-o` | -| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `photo-o` | +| --- | --- | --- | --- | +| src | 图片链接 | _string_ | - | +| fit | 图片填充模式 | _string_ | `fill` | +| alt | 替代文本 | _string_ | - | +| width | 宽度，默认单位为`px` | _number \| string_ | - | +| height | 高度，默认单位为`px` | _number \| string_ | - | +| radius `v2.1.6` | 圆角大小，默认单位为`px` | _number \| string_ | `0` | +| round | 是否显示为圆形 | _boolean_ | `false` | +| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` | +| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` | +| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` | +| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` | +| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` | -### 图片填充模式 +### 图片填充模式  -| 名称 | 含义 | -|------|------| -| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | -| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | -| fill | 拉伸图片，使图片填满元素 | -| none | 保持图片原有尺寸 | -| scale-down | 取`none`或`contain`中较小的一个 | +| 名称 | 含义 | +| ---------- | ------------------------------------------------------ | +| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 | +| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 | +| fill | 拉伸图片，使图片填满元素 | +| none | 保持图片原有尺寸 | +| scale-down | 取`none`或`contain`中较小的一个 | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击图片时触发 | *event: Event* | -| load | 图片加载完毕时触发 | - | -| error | 图片加载失败时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------ | -------------- | +| click | 点击图片时触发 | _event: Event_ | +| load | 图片加载完毕时触发 | - | +| error | 图片加载失败时触发 | - | ### Slots -| 名称 | 说明 | -|------|------| -| loading | 自定义加载中的提示内容 | -| error | 自定义加载失败时的提示内容 | +| 名称 | 说明 | +| ------- | -------------------------- | +| loading | 自定义加载中的提示内容 | +| error | 自定义加载失败时的提示内容 | ## 常见问题 diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 5b016f8f4..371e89bf8 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -52,10 +52,10 @@ Vue.use(IndexAnchor); export default { data() { return { - indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - } - } -} + indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + }; + }, +}; ``` ## API @@ -63,27 +63,27 @@ export default { ### IndexBar Props | Attribute | Description | Type | Default | -|------|------|------|------| -| index-list | Index List | *string[] \| number[]* | `A-Z` | -| z-index | z-index | *number \| string* | `1` | -| sticky | Whether to enable anchor sticky top | *boolean* | `true` | -| sticky-offset-top `v2.0.7` | Anchor offset top when sticky | *number* | `0` | -| highlight-color | Index character highlight color | *string* | `#07c160` | - | +| --- | --- | --- | --- | +| index-list | Index List | _string[] \| number[]_ | `A-Z` | +| z-index | z-index | _number \| string_ | `1` | +| sticky | Whether to enable anchor sticky top | _boolean_ | `true` | +| sticky-offset-top `v2.0.7` | Anchor offset top when sticky | _number_ | `0` | +| highlight-color | Index character highlight color | _string_ | `#07c160` | - | ### IndexAnchor Props -| Attribute | Description | Type | Default | -|------|------|------|------| -| index | Index | *number \| string* | - | +| Attribute | Description | Type | Default | +| --------- | ----------- | ------------------ | ------- | +| index | Index | _number \| string_ | - | ### IndexBar Events -| Event | Description | Arguments | -|------|------|------| -| select | Triggered when select index | index | +| Event | Description | Arguments | +| ------ | --------------------------- | --------- | +| select | Triggered when select index | index | ### IndexAnchor Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | ------------------------------------- | | default | Anchor content, show index by default | diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index f4d1e280e..5b0b4ba10 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -56,10 +56,10 @@ Vue.use(IndexAnchor); export default { data() { return { - indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - } - } -} + indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + }; + }, +}; ``` ## API @@ -67,27 +67,27 @@ export default { ### IndexBar Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | -| z-index | z-index 层级 | *number \| string* | `1` | -| sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | -| sticky-offset-top `v2.0.7` | 锚点自动吸顶时与顶部的距离 | *number* | `0` | -| highlight-color | 索引字符高亮颜色 | *string* | `#07c160` | +| --- | --- | --- | --- | +| index-list | 索引字符列表 | _string[] \| number[]_ | `A-Z` | +| z-index | z-index 层级 | _number \| string_ | `1` | +| sticky | 是否开启锚点自动吸顶 | _boolean_ | `true` | +| sticky-offset-top `v2.0.7` | 锚点自动吸顶时与顶部的距离 | _number_ | `0` | +| highlight-color | 索引字符高亮颜色 | _string_ | `#07c160` | ### IndexAnchor Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| index | 索引字符 | *number \| string* | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | -------- | ------------------ | ------ | +| index | 索引字符 | _number \| string_ | - | ### IndexBar Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | --------------- | | select | 选中字符时触发 | index: 索引字符 | ### IndexAnchor Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | -------------------------------- | | default | 锚点位置显示内容，默认为索引字符 | diff --git a/src/lazyload/README.md b/src/lazyload/README.md index b85cd4a69..3c912c2d5 100644 --- a/src/lazyload/README.md +++ b/src/lazyload/README.md @@ -10,7 +10,7 @@ Vue.use(Lazyload); // with options Vue.use(Lazyload, { - lazyComponent: true + lazyComponent: true, }); ``` @@ -19,7 +19,7 @@ Vue.use(Lazyload, { ### Basic Usage ```html - + ``` ```js @@ -28,11 +28,11 @@ export default { return { imageList: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg' - ] + 'https://img.yzcdn.cn/vant/apple-2.jpg', + ], }; - } -} + }, +}; ``` ### Lazyload Background Image @@ -48,13 +48,13 @@ Use `v-lazy:background-image` to set background url, and declare the height of t ```js // set `lazyComponent` option Vue.use(Lazyload, { - lazyComponent: true + lazyComponent: true, }); ``` ```html - + ``` @@ -63,14 +63,14 @@ Vue.use(Lazyload, { ### Options | Attribute | Description | Type | Default | -|------|------|------|------| -| loading | Src of the image while loading | *string* | - | -| error | Src of the image upon load fail | *string* | - | -| preload | Proportion of pre-loading height | *string* | - | -| attempt | Attempts count | *number* | `3` | -| listenEvents | Events that you want vue listen for | *string[]* | `scroll`... | -| adapter | Dynamically modify the attribute of element | *object* | - | -| filter | The image's listener filter | *object* | - | -| lazyComponent | Lazyload component | *boolean* | `false` | +| --- | --- | --- | --- | +| loading | Src of the image while loading | _string_ | - | +| error | Src of the image upon load fail | _string_ | - | +| preload | Proportion of pre-loading height | _string_ | - | +| attempt | Attempts count | _number_ | `3` | +| listenEvents | Events that you want vue listen for | _string[]_ | `scroll`... | +| adapter | Dynamically modify the attribute of element | _object_ | - | +| filter | The image's listener filter | _object_ | - | +| lazyComponent | Lazyload component | _boolean_ | `false` | > See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload) diff --git a/src/lazyload/README.zh-CN.md b/src/lazyload/README.zh-CN.md index e6334dc21..4699684fb 100644 --- a/src/lazyload/README.zh-CN.md +++ b/src/lazyload/README.zh-CN.md @@ -12,7 +12,7 @@ Vue.use(Lazyload); // 注册时可以配置额外的选项 Vue.use(Lazyload, { - lazyComponent: true + lazyComponent: true, }); ``` @@ -23,7 +23,7 @@ Vue.use(Lazyload, { 将`v-lazy`指令的值设置为你需要懒加载的图片 ```html - + ``` ```js @@ -32,11 +32,11 @@ export default { return { imageList: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', - 'https://img.yzcdn.cn/vant/apple-2.jpg' - ] + 'https://img.yzcdn.cn/vant/apple-2.jpg', + ], }; - } -} + }, +}; ``` ### 背景图懒加载 @@ -54,13 +54,13 @@ export default { ```js // 注册时设置`lazyComponent`选项 Vue.use(Lazyload, { - lazyComponent: true + lazyComponent: true, }); ``` ```html - + ``` @@ -68,15 +68,15 @@ Vue.use(Lazyload, { ### Options -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| loading | 加载时的图片 | *string* | - | -| error | 错误时的图片 | *string* | - | -| preload | 预加载高度的比例 | *string* | - | -| attempt | 尝试次数 | *number* | `3` | -| listenEvents | 监听的事件 | *string[]* | `scroll`等 | -| adapter | 适配器 | *object* | - | -| filter | 图片 URL 过滤 | *object* | - | -| lazyComponent | 是否能懒加载模块 | *boolean* | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | ---------------- | ---------- | ---------- | +| loading | 加载时的图片 | _string_ | - | +| error | 错误时的图片 | _string_ | - | +| preload | 预加载高度的比例 | _string_ | - | +| attempt | 尝试次数 | _number_ | `3` | +| listenEvents | 监听的事件 | _string[]_ | `scroll`等 | +| adapter | 适配器 | _object_ | - | +| filter | 图片 URL 过滤 | _object_ | - | +| lazyComponent | 是否能懒加载模块 | _boolean_ | `false` | > 更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload) diff --git a/src/list/README.md b/src/list/README.md index 55407b119..b2b0f31a5 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -34,7 +34,7 @@ export default { return { list: [], loading: false, - finished: false + finished: false, }; }, methods: { @@ -49,9 +49,9 @@ export default { this.finished = true; } }, 1000); - } - } -} + }, + }, +}; ``` ### Error Info @@ -73,17 +73,17 @@ export default { return { list: [], error: false, - loading: false + loading: false, }; }, methods: { onLoad() { fetchSomeThing().catch(() => { this.error = true; - }) - } - } -} + }); + }, + }, +}; ``` ### PullRefresh @@ -108,7 +108,7 @@ export default { list: [], loading: false, finished: false, - refreshing: false + refreshing: false, }; }, methods: { @@ -133,9 +133,9 @@ export default { this.finished = false; this.loading = true; this.onLoad(); - } - } -} + }, + }, +}; ``` ## API @@ -143,36 +143,36 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Whether to show loading info，the `load` event will not be triggered when loading | *boolean* | `false` | -| finished | Whether loading is finished，the `load` event will not be triggered when finished | *boolean* | `false` | -| error | Whether loading is error，the `load` event will be triggered only when error text clicked, the `sync` modifier is needed | *boolean* | `false` | -| offset | The load event will be triggered 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` | +| --- | --- | --- | --- | +| v-model | Whether to show loading info，the `load` event will not be triggered when loading | _boolean_ | `false` | +| finished | Whether loading is finished，the `load` event will not be triggered when finished | _boolean_ | `false` | +| error | Whether loading is error，the `load` event will be triggered only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` | +| offset | The load event will be triggered 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` | ### Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | load | Triggered when the distance between the scrollbar and the bottom is less than offset | - | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| check | Check scroll position | - | - | +| Name | Description | Attribute | Return value | +| ----- | --------------------- | --------- | ------------ | +| check | Check scroll position | - | - | ### Slots -| Name | Description | -|------|------| -| default | List content | -| loading | Custom loading tips | +| Name | Description | +| -------- | -------------------- | +| default | List content | +| loading | Custom loading tips | | finished | Custom finished tips | -| error | Custom error tips | +| error | Custom error tips | diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index e7847e66b..ba1a0fe77 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -36,7 +36,7 @@ export default { return { list: [], loading: false, - finished: false + finished: false, }; }, methods: { @@ -56,9 +56,9 @@ export default { this.finished = true; } }, 1000); - } - } -} + }, + }, +}; ``` ### 错误提示 @@ -82,17 +82,17 @@ export default { return { list: [], error: false, - loading: false + loading: false, }; }, methods: { onLoad() { fetchSomeThing().catch(() => { this.error = true; - }) - } - } -} + }); + }, + }, +}; ``` ### 下拉刷新 @@ -119,7 +119,7 @@ export default { list: [], loading: false, finished: false, - refreshing: false + refreshing: false, }; }, methods: { @@ -148,9 +148,9 @@ export default { // 将 loading 设置为 true，表示处于加载状态 this.loading = true; this.onLoad(); - } - } -} + }, + }, +}; ``` ## API @@ -158,39 +158,39 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 是否处于加载状态，加载过程中不触发`load`事件 | *boolean* | `false` | -| finished | 是否已加载完成，加载完成后不再触发`load`事件 | *boolean* | `false` | -| error | 是否加载失败，加载失败后点击错误提示可以重新
触发`load`事件，必须使用`sync`修饰符 | *boolean* | `false` | -| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | *number \| string* | `300` | -| loading-text | 加载过程中的提示文案 | *string* | `加载中...` | -| finished-text | 加载完成后的提示文案 | *string* | - | -| error-text | 加载失败后的提示文案 | *string* | - | -| immediate-check | 是否在初始化时立即执行滚动位置检查 | *boolean* | `true` | -| direction | 滚动触发加载的方向，可选值为`up` | *string* | `down` | +| --- | --- | --- | --- | +| v-model | 是否处于加载状态，加载过程中不触发`load`事件 | _boolean_ | `false` | +| finished | 是否已加载完成，加载完成后不再触发`load`事件 | _boolean_ | `false` | +| error | 是否加载失败，加载失败后点击错误提示可以重新
触发`load`事件，必须使用`sync`修饰符 | _boolean_ | `false` | +| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | _number \| string_ | `300` | +| loading-text | 加载过程中的提示文案 | _string_ | `加载中...` | +| finished-text | 加载完成后的提示文案 | _string_ | - | +| error-text | 加载失败后的提示文案 | _string_ | - | +| immediate-check | 是否在初始化时立即执行滚动位置检查 | _boolean_ | `true` | +| direction | 滚动触发加载的方向，可选值为`up` | _string_ | `down` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| load | 滚动条与底部距离小于 offset 时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------------------------- | -------- | +| load | 滚动条与底部距离小于 offset 时触发 | - | ### 方法 通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | check | 检查当前的滚动位置，若已滚动至底部，则会触发 load 事件 | - | - | ### Slots -| 名称 | 说明 | -|------|------| -| default | 列表内容 | -| loading | 自定义底部加载中提示 | +| 名称 | 说明 | +| -------- | -------------------------- | +| default | 列表内容 | +| loading | 自定义底部加载中提示 | | finished | 自定义加载完成后的提示文案 | -| error | 自定义加载失败后的提示文案 | +| error | 自定义加载失败后的提示文案 | ## 常见问题 @@ -239,7 +239,6 @@ html, body { overflow-x: hidden; } - ``` 这个问题的原因是当元素设置了`overflow-x: hidden`样式时，该元素的`overflow-y`会被浏览器设置为`auto`，而不是默认值`visible`，导致 List 无法正确地判断滚动容器。解决方法是去除该样式，或者在 html 和 body 标签上添加`height: 100%`样式。 diff --git a/src/loading/README.md b/src/loading/README.md index 5952700f1..0f040966f 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -14,22 +14,19 @@ Vue.use(Loading); ### Type ```html - - + ``` ### Color ```html - - + ``` ### Size ```html - - + ``` ### Text @@ -49,15 +46,15 @@ Vue.use(Loading); ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| color | Loading color | *string* | `#c9c9c9` | -| type | Can be set to `spinner` | *string* | `circular` | -| size | Icon size | *number \| string* | `30px` | -| text-size | Text font size | *number \| string* | `14px` | -| vertical | Whether to arrange icons and text content vertically | *boolean* | `false` | +| --- | --- | --- | --- | +| color | Loading color | _string_ | `#c9c9c9` | +| type | Can be set to `spinner` | _string_ | `circular` | +| size | Icon size | _number \| string_ | `30px` | +| text-size | Text font size | _number \| string_ | `14px` | +| vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` | ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ------- | ------------ | | default | Loading text | diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index a6a37ce56..9531f5ddf 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -16,8 +16,7 @@ Vue.use(Loading); 通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner` ```html - - + ``` ### 自定义颜色 @@ -25,8 +24,7 @@ Vue.use(Loading); 通过`color`属性设置加载图标的颜色 ```html - - + ``` ### 自定义大小 @@ -34,8 +32,7 @@ Vue.use(Loading); 通过`size`属性设置加载图标的大小，默认单位为`px` ```html - - + ``` ### 加载文案 @@ -58,16 +55,16 @@ Vue.use(Loading); ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| color | 颜色 | *string* | `#c9c9c9` | -| type | 类型，可选值为 `spinner` | *string* | `circular` | -| size | 加载图标大小，默认单位为`px` | *number \| string* | `30px` | -| text-size | 文字大小，默认单位为`px` | *number \| string* | `14px` | -| vertical | 是否垂直排列图标和文字内容 | *boolean* | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------------------------- | ------------------ | ---------- | +| color | 颜色 | _string_ | `#c9c9c9` | +| type | 类型，可选值为 `spinner` | _string_ | `circular` | +| size | 加载图标大小，默认单位为`px` | _number \| string_ | `30px` | +| text-size | 文字大小，默认单位为`px` | _number \| string_ | `14px` | +| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ------- | -------- | | default | 加载文案 | diff --git a/src/locale/README.md b/src/locale/README.md index 3a699cdf1..f949d4c50 100644 --- a/src/locale/README.md +++ b/src/locale/README.md @@ -25,9 +25,9 @@ import { Locale } from 'vant'; const messages = { 'en-US': { vanPicker: { - confirm: 'Close' - } - } + confirm: 'Close', + }, + }, }; Locale.add(messages); @@ -37,14 +37,14 @@ Locale.add(messages); Current supported languages: -| Language | Filename | -|------|------| -| Chinese | zh-CN | -| Traditional Chinese (HK) | zh-HK | -| Traditional Chinese (TW) | zh-TW | -| English | en-US | -| Turkish | tr-TR | -| Spanish (Spain) | es-ES | -| Japanese | ja-JP | +| Language | Filename | +| ------------------------ | -------- | +| Chinese | zh-CN | +| Traditional Chinese (HK) | zh-HK | +| Traditional Chinese (TW) | zh-TW | +| English | en-US | +| Turkish | tr-TR | +| Spanish (Spain) | es-ES | +| Japanese | ja-JP | > View all language configs [Here](https://github.com/youzan/vant/tree/dev/src/locale/lang). diff --git a/src/locale/README.zh-CN.md b/src/locale/README.zh-CN.md index be86bbe62..90417e4b9 100644 --- a/src/locale/README.zh-CN.md +++ b/src/locale/README.zh-CN.md @@ -25,9 +25,9 @@ import { Locale } from 'vant'; const messages = { 'zh-CN': { vanPicker: { - confirm: '关闭' // 将'确认'修改为'关闭' - } - } + confirm: '关闭', // 将'确认'修改为'关闭' + }, + }, }; Locale.add(messages); @@ -37,15 +37,15 @@ Locale.add(messages); 目前支持的语言: -| 语言 | 文件名 | -|------|------| -| 简体中文 | zh-CN | -| 繁體中文（港） | zh-HK | -| 繁體中文（台） | zh-TW | -| 英语 | en-US | -| 土耳其语 | tr-TR | -| 西班牙语 | es-ES | -| 日语 | ja-JP | +| 语言 | 文件名 | +| -------------- | ------ | +| 简体中文 | zh-CN | +| 繁體中文（港） | zh-HK | +| 繁體中文（台） | zh-TW | +| 英语 | en-US | +| 土耳其语 | tr-TR | +| 西班牙语 | es-ES | +| 日语 | ja-JP | > 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的 i18n 配置文件。 diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 2fe034368..0a6e7fe44 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -34,9 +34,9 @@ export default { }, onClickRight() { Toast('Button'); - } - } -} + }, + }, +}; ``` ### Use Slot @@ -44,7 +44,7 @@ export default { ```html ``` @@ -54,27 +54,27 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| title | Title | *string* | `''` | -| left-text | Left Text | *string* | `''` | -| right-text | Right Text | *string* | `''` | -| left-arrow | Whether to show left arrow | *boolean* | `false` | -| border | Whether to show bottom border | *boolean* | `true` | -| fixed | Whether to fixed top | *boolean* | `false` | -| placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | *boolean* | `false` | -| z-index | Z-index | *number \| string* | `1` | +| --- | --- | --- | --- | +| title | Title | _string_ | `''` | +| left-text | Left Text | _string_ | `''` | +| right-text | Right Text | _string_ | `''` | +| left-arrow | Whether to show left arrow | _boolean_ | `false` | +| border | Whether to show bottom border | _boolean_ | `true` | +| fixed | Whether to fixed top | _boolean_ | `false` | +| placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` | +| z-index | Z-index | _number \| string_ | `1` | ### Slots -| Name | Description | -|------|------| -| title | Custom title | -| left | Custom left side content | +| Name | Description | +| ----- | ------------------------- | +| title | Custom title | +| left | Custom left side content | | right | Custom right side content | ### Events -| Event | Description | Arguments | -|------|------|------| -| click-left | Triggered when click left button | - | -| click-right | Triggered when click right button | - | +| Event | Description | Arguments | +| ----------- | --------------------------------- | --------- | +| click-left | Triggered when click left button | - | +| click-right | Triggered when click right button | - | diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index a102de717..100999759 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -34,9 +34,9 @@ export default { }, onClickRight() { Toast('按钮'); - } - } -} + }, + }, +}; ``` ### 使用插槽 @@ -46,7 +46,7 @@ export default { ```html ``` @@ -56,27 +56,27 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 标题 | *string* | `''` | -| left-text | 左侧文案 | *string* | `''` | -| right-text | 右侧文案 | *string* | `''` | -| left-arrow | 是否显示左侧箭头 | *boolean* | `false` | -| border | 是否显示下边框 | *boolean* | `true` | -| fixed | 是否固定在顶部 | *boolean* | `false` | -| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | *boolean* | `false` | -| z-index | 元素 z-index | *number \| string* | `1` | +| --- | --- | --- | --- | +| title | 标题 | _string_ | `''` | +| left-text | 左侧文案 | _string_ | `''` | +| right-text | 右侧文案 | _string_ | `''` | +| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` | +| border | 是否显示下边框 | _boolean_ | `true` | +| fixed | 是否固定在顶部 | _boolean_ | `false` | +| placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | +| z-index | 元素 z-index | _number \| string_ | `1` | ### Slots -| 名称 | 说明 | -|------|------| -| title | 自定义标题 | -| left | 自定义左侧区域内容 | +| 名称 | 说明 | +| ----- | ------------------ | +| title | 自定义标题 | +| left | 自定义左侧区域内容 | | right | 自定义右侧区域内容 | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click-left | 点击左侧按钮时触发 | - | -| click-right | 点击右侧按钮时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ----------- | ------------------ | -------- | +| click-left | 点击左侧按钮时触发 | - | +| click-right | 点击右侧按钮时触发 | - | diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 08adb596b..78db45215 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -48,11 +48,7 @@ Vue.use(NoticeBar); ### Custom Style ```html - + Notice Content ``` @@ -62,28 +58,28 @@ Vue.use(NoticeBar); ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| mode | Mode, can be set to `closeable` `link` | *string* | `''` | -| text | Notice text content | *string* | `''` | - | -| color | Text color | *string* | `#f60` | -| background | Background color | *string* | `#fff7cc` | -| left-icon | Left Icon | *string* | - | -| delay | Animation delay (s) | *number \| string* | `1` | -| speed | Scroll speed (px/s) | *number \| string* | `50` | -| scrollable | Whether to scroll content | *boolean* | `true` | -| wrapable | Whether to enable text wrap | *boolean* | `false` | - | +| --- | --- | --- | --- | +| mode | Mode, can be set to `closeable` `link` | _string_ | `''` | +| text | Notice text content | _string_ | `''` | - | +| color | Text color | _string_ | `#f60` | +| background | Background color | _string_ | `#fff7cc` | +| left-icon | Left Icon | _string_ | - | +| delay | Animation delay (s) | _number \| string_ | `1` | +| speed | Scroll speed (px/s) | _number \| string_ | `50` | +| scrollable | Whether to scroll content | _boolean_ | `true` | +| wrapable | Whether to enable text wrap | _boolean_ | `false` | - | ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click NoticeBar | *event: Event* | -| close | Triggered when closed | *event: Event* | +| Event | Description | Arguments | +| ----- | ------------------------------ | -------------- | +| click | Triggered when click NoticeBar | _event: Event_ | +| close | Triggered when closed | _event: Event_ | ### Slots -| Name | Description | -|------|------| -| default | Notice text content | -| left-icon | Custom left icon | -| right-icon | Custom right icon | +| Name | Description | +| ---------- | ------------------- | +| default | Notice text content | +| left-icon | Custom left icon | +| right-icon | Custom right icon | diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index 18651ea9e..2f3f1f28a 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/src/notice-bar/README.zh-CN.md @@ -56,11 +56,7 @@ Vue.use(NoticeBar); ### 自定义样式 ```html - + 通知内容 ``` @@ -70,28 +66,28 @@ Vue.use(NoticeBar); ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| mode | 通知栏模式，可选值为 `closeable` `link` | *string* | `''` | -| text | 通知文本内容 | *string* | `''` | -| color | 文本颜色 | *string* | `#f60` | -| background | 滚动条背景 | *string* | `#fff7cc` | -| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | -| delay | 动画延迟时间 (s) | *number \| string* | `1` | -| speed | 滚动速率 (px/s) | *number \| string* | `50` | -| scrollable | 是否在长度溢出时滚动播放 | *boolean* | `true` | -| wrapable | 是否开启文本换行，只在禁用滚动时生效 | *boolean* | `false` | +| --- | --- | --- | --- | +| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` | +| text | 通知文本内容 | _string_ | `''` | +| color | 文本颜色 | _string_ | `#f60` | +| background | 滚动条背景 | _string_ | `#fff7cc` | +| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| delay | 动画延迟时间 (s) | _number \| string_ | `1` | +| speed | 滚动速率 (px/s) | _number \| string_ | `50` | +| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` | +| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击通知栏时触发 | *event: Event* | -| close | 关闭通知栏时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------- | -------------- | +| click | 点击通知栏时触发 | _event: Event_ | +| close | 关闭通知栏时触发 | _event: Event_ | ### Slots -| 名称 | 内容 | -|------|------| -| default | 通知文本内容 | -| left-icon | 自定义左侧图标 | +| 名称 | 内容 | +| ---------- | -------------- | +| default | 通知文本内容 | +| left-icon | 自定义左侧图标 | | right-icon | 自定义右侧图标 | diff --git a/src/notify/README.md b/src/notify/README.md index 209249a3b..10a520607 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -32,25 +32,25 @@ Notify({ type: 'warning', message: 'Notify Message' }); Notify({ message: 'Custom Color', color: '#ad0000', - background: '#ffe1e1' + background: '#ffe1e1', }); Notify({ message: 'Custom Duration', - duration: 1000 + duration: 1000, }); ``` -### $notify Method +### \$notify Method -After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component. +After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component. ```js export default { mounted() { this.$notify('Notify Message'); - } -} + }, +}; ``` ## API @@ -58,7 +58,7 @@ export default { ### Methods | Methods | Attribute | Return value | Description | -|------|------|------|------| +| --- | --- | --- | --- | | Notify | `options | message` | notify instance | Show notify | | Notify.clear | - | `void` | Close notify | | Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies | @@ -67,13 +67,13 @@ export default { ### Options | Attribute | Description | Type | Default | -|------|------|------|------| -| type `v2.1.6` | Can be set to `primary` `success` `warning` | *string* | `danger` | -| message | Message | *string* | - | -| duration | Duration(ms), won't disappear if value is 0 | *number \| string* | `3000` | -| color | Message color | *string* | `white` | | -| background | Background color | *string* | - | -| className | Custom className | *any* | - | -| onClick | Callback function after click | *Function* | - | -| onOpened | Callback function after opened | *Function* | - | -| onClose | Callback function after close | *Function* | - | +| --- | --- | --- | --- | +| type `v2.1.6` | Can be set to `primary` `success` `warning` | _string_ | `danger` | +| message | Message | _string_ | - | +| duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` | +| color | Message color | _string_ | `white` | | +| background | Background color | _string_ | - | +| className | Custom className | _any_ | - | +| onClick | Callback function after click | _Function_ | - | +| onOpened | Callback function after opened | _Function_ | - | +| onClose | Callback function after close | _Function_ | - | diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index 17fdb8668..10071164d 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -43,25 +43,25 @@ Notify({ type: 'warning', message: '通知内容' }); Notify({ message: '自定义颜色', color: '#ad0000', - background: '#ffe1e1' + background: '#ffe1e1', }); Notify({ message: '自定义时长', - duration: 1000 + duration: 1000, }); ``` ### 组件内调用 -引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。 +引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。 ```js export default { mounted() { this.$notify('提示文案'); - } -} + }, +}; ``` ## API @@ -69,7 +69,7 @@ export default { ### 方法 | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | Notify | 展示提示 | `options | message` | notify 实例 | | Notify.clear | 关闭提示 | - | `void` | | Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` | @@ -78,13 +78,13 @@ export default { ### Options | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type `v2.1.6` | 类型，可选值为 `primary` `success` `warning` | *string* | `danger` | -| message | 展示文案，支持通过`\n`换行 | *string* | - | -| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | *number \| string* | `3000` | -| color | 字体颜色 | *string* | `white` | -| background | 背景颜色 | *string* | - | -| className | 自定义类名 | *any* | - | -| onClick | 点击时的回调函数 | *Function* | - | -| onOpened | 完全展示后的回调函数 | *Function* | - | -| onClose | 关闭时的回调函数 | *Function* | - | +| --- | --- | --- | --- | +| type `v2.1.6` | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | +| message | 展示文案，支持通过`\n`换行 | _string_ | - | +| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number \| string_ | `3000` | +| color | 字体颜色 | _string_ | `white` | +| background | 背景颜色 | _string_ | - | +| className | 自定义类名 | _any_ | - | +| onClick | 点击时的回调函数 | _Function_ | - | +| onOpened | 完全展示后的回调函数 | _Function_ | - | +| onClose | 关闭时的回调函数 | _Function_ | - | diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index d2552a6c7..58b3c56b9 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -33,8 +33,8 @@ import { Toast } from 'vant'; export default { data() { return { - show: true - } + show: true, + }; }, methods: { onInput(value) { @@ -42,9 +42,9 @@ export default { }, onDelete() { Toast('delete'); - } - } -} + }, + }, +}; ``` ### Custom Style @@ -84,10 +84,10 @@ export default { data() { return { show: false, - value: '' - } - } -} + value: '', + }; + }, +}; ``` ### Bottom Left Button Content @@ -134,25 +134,25 @@ Use `title` prop to set keyboard title ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model `v2.0.2` | Current value | *string* | - | -| show | Whether to show keyboard | *boolean* | - | -| theme | Keyboard theme，can be set to `default` `custom` | *string* | `default` | -| title | Keyboard title | *string* | - | -| maxlength `v2.0.2` | Value maxlength | *number \| string* | - | -| transition | Whether to show transition animation | *boolean* | `true` | -| z-index | Keyboard z-index | *number \| string* | `100` | -| extra-key | Content of bottom left key | *string* | `''` | -| close-button-text | Close button text | *string* | `-` | -| delete-button-text | Delete button text | *string* | `delete` | -| show-delete-key `v2.5.9` | Whether to show delete button | *boolean* | `true` | -| hide-on-click-outside | Whether to hide keyboard when click outside | *boolean* | `true` | -| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model `v2.0.2` | Current value | _string_ | - | +| show | Whether to show keyboard | _boolean_ | - | +| theme | Keyboard theme，can be set to `default` `custom` | _string_ | `default` | +| title | Keyboard title | _string_ | - | +| maxlength `v2.0.2` | Value maxlength | _number \| string_ | - | +| transition | Whether to show transition animation | _boolean_ | `true` | +| z-index | Keyboard z-index | _number \| string_ | `100` | +| extra-key | Content of bottom left key | _string_ | `''` | +| close-button-text | Close button text | _string_ | `-` | +| delete-button-text | Delete button text | _string_ | `delete` | +| show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` | +| hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | ### Events | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | input | Triggered when keydown | key: Content of the key | | delete | Triggered when press delete key | - | | close | Triggered when click close button | - | @@ -162,8 +162,8 @@ Use `title` prop to set keyboard title ### Slots -| Name | Description | -|------|------| -| delete | Custom delete key content | -| extra-key | Custom extra key content | +| Name | Description | +| ---------- | ------------------------- | +| delete | Custom delete key content | +| extra-key | Custom extra key content | | title-left | Custom title left content | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index b544acdb4..257a4d8f1 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -37,8 +37,8 @@ import { Toast } from 'vant'; export default { data() { return { - show: true - } + show: true, + }; }, methods: { onInput(value) { @@ -46,9 +46,9 @@ export default { }, onDelete() { Toast('删除'); - } - } -} + }, + }, +}; ``` ### 自定义样式 @@ -90,10 +90,10 @@ export default { data() { return { show: false, - value: '' - } - } -} + value: '', + }; + }, +}; ``` ### 左下角按键内容 @@ -140,38 +140,38 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model `v2.0.2` | 当前输入值 | *string* | - | -| show | 是否显示键盘 | *boolean* | - | -| theme | 样式风格，可选值为 `default` `custom` | *string* | `default` | -| title | 键盘标题 | *string* | - | -| maxlength `v2.0.2` | 输入值最大长度 | *number \| string* | - | -| transition | 是否开启过场动画 | *boolean* | `true` | -| z-index | 键盘 z-index | *number \| string* | `100` | -| extra-key | 左下角按键内容 | *string* | `''` | -| close-button-text | 关闭按钮文字，空则不展示 | *string* | `-` | -| delete-button-text | 删除按钮文字 | *string* | `删除` | -| show-delete-key `v2.5.9` | 是否展示删除按钮 | *boolean* | `true` | -| hide-on-click-outside | 点击外部时是否收起键盘 | *boolean* | `true` | -| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | +| --- | --- | --- | --- | +| v-model `v2.0.2` | 当前输入值 | _string_ | - | +| show | 是否显示键盘 | _boolean_ | - | +| theme | 样式风格，可选值为 `default` `custom` | _string_ | `default` | +| title | 键盘标题 | _string_ | - | +| maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - | +| transition | 是否开启过场动画 | _boolean_ | `true` | +| z-index | 键盘 z-index | _number \| string_ | `100` | +| extra-key | 左下角按键内容 | _string_ | `''` | +| close-button-text | 关闭按钮文字，空则不展示 | _string_ | `-` | +| delete-button-text | 删除按钮文字 | _string_ | `删除` | +| show-delete-key `v2.5.9` | 是否展示删除按钮 | _boolean_ | `true` | +| hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| input | 点击按键时触发 | key: 按键内容 | -| delete | 点击删除键时触发 | - | -| close | 点击关闭按钮时触发 | - | -| blur | 点击关闭按钮或非键盘区域时触发 | - | -| show | 键盘完全弹出时触发 | - | -| hide | 键盘完全收起时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------------------ | ------------- | +| input | 点击按键时触发 | key: 按键内容 | +| delete | 点击删除键时触发 | - | +| close | 点击关闭按钮时触发 | - | +| blur | 点击关闭按钮或非键盘区域时触发 | - | +| show | 键盘完全弹出时触发 | - | +| hide | 键盘完全收起时触发 | - | ### Slots -| 名称 | 说明 | -|------|------| -| delete | 自定义删除按键内容 | -| extra-key | 自定义左下角按键内容 +| 名称 | 说明 | +| ---------- | -------------------- | +| delete | 自定义删除按键内容 | +| extra-key | 自定义左下角按键内容 | | title-left | 自定义标题栏左侧内容 | ## 常见问题 diff --git a/src/overlay/README.md b/src/overlay/README.md index 0147b4e61..fa57a9771 100644 --- a/src/overlay/README.md +++ b/src/overlay/README.md @@ -38,18 +38,18 @@ export default { ``` @@ -58,21 +58,21 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| show | Whether to show overlay | *boolean* | `false` | -| z-index | z-index | *number \| string* | `1` | -| duration | Animation duration | *number \| string* | `0.3` | -| class-name | ClassName | *string* | - | -| custom-class `v2.2.5` | Custom style | *object* | - | +| --- | --- | --- | --- | +| show | Whether to show overlay | _boolean_ | `false` | +| z-index | z-index | _number \| string_ | `1` | +| duration | Animation duration | _number \| string_ | `0.3` | +| class-name | ClassName | _string_ | - | +| custom-class `v2.2.5` | Custom style | _object_ | - | ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when clicked | *event: Event* | +| Event | Description | Arguments | +| ----- | ---------------------- | -------------- | +| click | Triggered when clicked | _event: Event_ | ### Slots -| Name | Description | -|------|------| +| Name | Description | +| ---------------- | ------------ | | default `v2.2.5` | Default slot | diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md index 195270ef2..b8ce2bc2c 100644 --- a/src/overlay/README.zh-CN.md +++ b/src/overlay/README.zh-CN.md @@ -44,18 +44,18 @@ export default { ``` @@ -63,22 +63,22 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| show | 是否展示遮罩层 | *boolean* | `false` | -| z-index | z-index 层级 | *number \| string* | `1` | -| duration | 动画时长，单位秒 | *number \| string* | `0.3` | -| class-name | 自定义类名 | *string* | - | -| custom-style `v2.2.5` | 自定义样式 | *object* | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------- | ---------------- | ------------------ | ------- | +| show | 是否展示遮罩层 | _boolean_ | `false` | +| z-index | z-index 层级 | _number \| string_ | `1` | +| duration | 动画时长，单位秒 | _number \| string_ | `0.3` | +| class-name | 自定义类名 | _string_ | - | +| custom-style `v2.2.5` | 自定义样式 | _object_ | - | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | *event: Event* | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | -------------- | +| click | 点击时触发 | _event: Event_ | ### Slots -| 名称 | 说明 | -|------|------| +| 名称 | 说明 | +| ---------------- | ---------------------------------- | | default `v2.0.5` | 默认插槽，用于在遮罩层上方嵌入内容 | diff --git a/src/pagination/README.md b/src/pagination/README.md index 4f5bea24e..42ca945df 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -14,40 +14,32 @@ Vue.use(Pagination); ### Basic Usage ```html - + ``` ```js export default { data() { - return { - currentPage: 1 - } - } -} + return { + currentPage: 1, + }; + }, +}; ``` ### Simple mode ```html - + ``` ### Show ellipses ```html - ``` @@ -57,19 +49,19 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Current page number | *number* | - | -| mode | Mode, can be set to `simple` `multi` | *string* | `multi` | -| prev-text | Previous text | *string* | `Previous` | -| next-text | Next text | *string* | `Next` | -| total-items | Total items | *number \| string* | `0` | -| items-per-page | Item number per page | *number \| string* | `10` | -| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | *number \| string* | `-` | -| show-page-size | Count of page size to show | *number \| string* | `5` | -| force-ellipses | Whether to show ellipses | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model | Current page number | _number_ | - | +| mode | Mode, can be set to `simple` `multi` | _string_ | `multi` | +| prev-text | Previous text | _string_ | `Previous` | +| next-text | Next text | _string_ | `Next` | +| total-items | Total items | _number \| string_ | `0` | +| items-per-page | Item number per page | _number \| string_ | `10` | +| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | _number \| string_ | `-` | +| show-page-size | Count of page size to show | _number \| string_ | `5` | +| force-ellipses | Whether to show ellipses | _boolean_ | `false` | ### Events -| Event | Description | Arguments | -|------|------|------| -| change | Triggered on page change | - | +| Event | Description | Arguments | +| ------ | ------------------------ | --------- | +| change | Triggered on page change | - | diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index 232188d02..89a5dcb44 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -1,4 +1,3 @@ - # Pagination 分页 ### 引入 @@ -15,40 +14,32 @@ Vue.use(Pagination); ### 基础用法 ```html - + ``` ```js export default { data() { - return { - currentPage: 1 - } - } -} + return { + currentPage: 1, + }; + }, +}; ``` ### 简单模式 ```html - + ``` ### 显示省略号 ```html - ``` @@ -58,19 +49,19 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 当前页码 | *number* | - | -| mode | 显示模式，可选值为 `simple` | *string* | `multi` | -| prev-text | 上一页按钮文字 | *string* | `上一页` | -| next-text | 下一页按钮文字 | *string* | `下一页` | -| page-count | 总页数 | *number \| string* | 根据页数计算 | -| total-items | 总记录数 | *number \| string* | `0` | -| items-per-page | 每页记录数 | *number \| string* | `10` | -| show-page-size | 显示的页码个数 | *number \| string* | `5` | -| force-ellipses | 是否显示省略号 | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model | 当前页码 | _number_ | - | +| mode | 显示模式，可选值为 `simple` | _string_ | `multi` | +| prev-text | 上一页按钮文字 | _string_ | `上一页` | +| next-text | 下一页按钮文字 | _string_ | `下一页` | +| page-count | 总页数 | _number \| string_ | 根据页数计算 | +| total-items | 总记录数 | _number \| string_ | `0` | +| items-per-page | 每页记录数 | _number \| string_ | `10` | +| show-page-size | 显示的页码个数 | _number \| string_ | `5` | +| force-ellipses | 是否显示省略号 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 页码改变时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | -------- | +| change | 页码改变时触发 | - | diff --git a/src/panel/README.md b/src/panel/README.md index 846c5fe42..489cba62d 100644 --- a/src/panel/README.md +++ b/src/panel/README.md @@ -35,17 +35,17 @@ Vue.use(Panel); ### Props -| Attribute | Description | Type | Default | -|------|------|------|------| -| icon | Left Icon | *string* | - | -| title | Title | *string* | - | -| desc | Description | *string* | - | -| status | Status | *string* | - | +| Attribute | Description | Type | Default | +| --------- | ----------- | -------- | ------- | +| icon | Left Icon | _string_ | - | +| title | Title | _string_ | - | +| desc | Description | _string_ | - | +| status | Status | _string_ | - | ### Slots -| Name | Description | -|------|------| -| default | Default slot | -| header | Custom header | -| footer | Custom footer | +| Name | Description | +| ------- | ------------- | +| default | Default slot | +| header | Custom header | +| footer | Custom footer | diff --git a/src/panel/README.zh-CN.md b/src/panel/README.zh-CN.md index e29e2579a..1d7e9c877 100644 --- a/src/panel/README.zh-CN.md +++ b/src/panel/README.zh-CN.md @@ -39,17 +39,17 @@ Vue.use(Panel); ### Props -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| title | 标题 | *string* | - | -| desc | 描述 | *string* | - | -| status | 状态 | *string* | - | -| icon | 标题左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ------------------------------------------ | -------- | ------ | +| title | 标题 | _string_ | - | +| desc | 描述 | _string_ | - | +| status | 状态 | _string_ | - | +| icon | 标题左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | ### Slots -| 名称 | 说明 | -|------|------| -| default | 自定义内容 | -| header | 自定义 header | -| footer | 自定义 footer | +| 名称 | 说明 | +| ------- | ------------- | +| default | 自定义内容 | +| header | 自定义 header | +| footer | 自定义 footer | diff --git a/src/password-input/README.md b/src/password-input/README.md index 58fc4b192..fddeeb3c1 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -40,7 +40,7 @@ export default { data() { return { value: '123', - showKeyboard: true + showKeyboard: true, }; }, methods: { @@ -49,9 +49,9 @@ export default { }, onDelete() { this.value = this.value.slice(0, this.value.length - 1); - } - } -} + }, + }, +}; ``` ### Custom length @@ -105,7 +105,7 @@ export default { return { value: '123', showKeyboard: true, - errorInfo: '' + errorInfo: '', }; }, methods: { @@ -119,26 +119,27 @@ export default { }, onDelete() { this.value = this.value.slice(0, this.value.length - 1); - } - } -} + }, + }, +}; ``` + ## API ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| value | Password value | *string* | `''` | -| info | Bottom info | *string* | - | -| error-info | Bottom error info | *string* | - | -| length | Maxlength of password | *number \| string* | `6` | -| gutter | Gutter of input | *number \| string* | `0` | -| mask | Whether to mask value | *boolean* | `true` | -| focused `v2.1.8` | Whether to show focused cursor | *boolean* | `false` | +| --- | --- | --- | --- | +| value | Password value | _string_ | `''` | +| info | Bottom info | _string_ | - | +| error-info | Bottom error info | _string_ | - | +| length | Maxlength of password | _number \| string_ | `6` | +| gutter | Gutter of input | _number \| string_ | `0` | +| mask | Whether to mask value | _boolean_ | `true` | +| focused `v2.1.8` | Whether to show focused cursor | _boolean_ | `false` | ### Events -| Event | Description | Arguments | -|------|------|------| -| focus | Triggered when input get focused | - | +| Event | Description | Arguments | +| ----- | -------------------------------- | --------- | +| focus | Triggered when input get focused | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index 20453daf3..e81b3aea2 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -40,7 +40,7 @@ export default { data() { return { value: '123', - showKeyboard: true + showKeyboard: true, }; }, methods: { @@ -49,9 +49,9 @@ export default { }, onDelete() { this.value = this.value.slice(0, this.value.length - 1); - } - } -} + }, + }, +}; ``` ### 自定义长度 @@ -104,7 +104,7 @@ export default { return { value: '123', showKeyboard: true, - errorInfo: '' + errorInfo: '', }; }, methods: { @@ -118,9 +118,9 @@ export default { }, onDelete() { this.value = this.value.slice(0, this.value.length - 1); - } - } -} + }, + }, +}; ``` ## API @@ -128,17 +128,17 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| value | 密码值 | *string* | `''` | -| info | 输入框下方文字提示 | *string* | - | -| error-info | 输入框下方错误提示 | *string* | - | -| length | 密码最大长度 | *number \| string* | `6` | -| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | *number \| string* | `0` | -| mask | 是否隐藏密码内容 | *boolean* | `true` | -| focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | *boolean* | `false` | +| --- | --- | --- | --- | +| value | 密码值 | _string_ | `''` | +| info | 输入框下方文字提示 | _string_ | - | +| error-info | 输入框下方错误提示 | _string_ | - | +| length | 密码最大长度 | _number \| string_ | `6` | +| gutter | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `0` | +| mask | 是否隐藏密码内容 | _boolean_ | `true` | +| focused `v2.1.8` | 是否已聚焦，聚焦时会显示光标 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| focus | 输入框聚焦时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------- | -------- | +| focus | 输入框聚焦时触发 | - | diff --git a/src/picker/README.md b/src/picker/README.md index d28492a90..4045b4a33 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -27,25 +27,21 @@ import { Toast } from 'vant'; export default { data() { return { - columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] + columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], }; }, methods: { onChange(picker, value, index) { Toast(`Value: ${value}, Index: ${index}`); - } - } + }, + }, }; ``` ### Default Index ```html - + ``` ### Show Toolbar @@ -66,8 +62,8 @@ import { Toast } from 'vant'; export default { data() { return { - columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] - } + columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], + }; }, methods: { onConfirm(value, index) { @@ -75,8 +71,8 @@ export default { }, onCancel() { Toast('Cancel'); - } - } + }, + }, }; ``` @@ -93,15 +89,15 @@ export default { columns: [ { values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'], - defaultIndex: 2 + defaultIndex: 2, }, { values: ['Morging', 'Afternoon', 'Evening'], - defaultIndex: 1 - } - ] + defaultIndex: 1, + }, + ], }; - } + }, }; ``` @@ -115,27 +111,36 @@ export default { export default { data() { return { - columns: [{ - text: 'Zhejiang', - children: [{ - text: 'Hangzhou', - children: [{ text: 'Xihu' }, { text: 'Yuhang' }] - }, { - text: 'Wenzhou', - children: [{ text: 'Lucheng' }, { text: 'Ouhai' }] - }] - }, { - text: 'Fujian', - children: [{ - text: 'Fuzhou', - children: [{ text: 'Gulou' }, { text: 'Taijiang' }] - }, { - text: 'Xiamen', - children: [{ text: 'Siming' }, { text: 'Haicang' }] - }] - }] + columns: [ + { + text: 'Zhejiang', + children: [ + { + text: 'Hangzhou', + children: [{ text: 'Xihu' }, { text: 'Yuhang' }], + }, + { + text: 'Wenzhou', + children: [{ text: 'Lucheng' }, { text: 'Ouhai' }], + }, + ], + }, + { + text: 'Fujian', + children: [ + { + text: 'Fuzhou', + children: [{ text: 'Gulou' }, { text: 'Taijiang' }], + }, + { + text: 'Xiamen', + children: [{ text: 'Siming' }, { text: 'Haicang' }], + }, + ], + }, + ], }; - } + }, }; ``` @@ -152,10 +157,10 @@ export default { columns: [ { text: 'Delaware', disabled: true }, { text: 'Florida' }, - { text: 'Georqia' } - ] + { text: 'Georqia' }, + ], }; - } + }, }; ``` @@ -167,24 +172,21 @@ export default { ```js const states = { - 'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], - 'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas'] + Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], + Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'], }; export default { data() { return { - columns: [ - { values: Object.keys(states) }, - { values: states.Group1 } - ] + columns: [{ values: Object.keys(states) }, { values: states.Group1 }], }; }, methods: { onChange(picker, values) { picker.setColumnValues(1, states[values[0]]); - } - } + }, + }, }; ``` @@ -201,7 +203,7 @@ export default { data() { return { columns: [], - loading: true + loading: true, }; }, created() { @@ -209,7 +211,7 @@ export default { this.loading = false; this.columns = ['Option']; }, 1000); - } + }, }; ``` @@ -240,15 +242,15 @@ export default { return { value: '', showPicker: false, - columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'] - } + columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], + }; }, methods: { onConfirm(value) { this.value = value; this.showPicker = false; - } - } + }, + }, }; ``` @@ -257,55 +259,55 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| columns | Columns data | *Column[]* | `[]` | -| title | Toolbar title | *string* | - | -| confirm-button-text | Text of confirm button | *string* | `Confirm` | -| cancel-button-text | Text of cancel button | *string* | `Cancel` | -| value-key | Key of option text | *string* | `text` | -| toolbar-position | Toolbar position, cat be set to `bottom` | *string* | `top` | -| loading | Whether to show loading prompt | *boolean* | `false` | -| show-toolbar | Whether to show toolbar | *boolean* | `false` | -| allow-html `v2.1.8` | Whether to allow HTML in option text | *boolean* | `true` | -| default-index | Default value index of single column picker | *number \| string* | `0` | -| item-height | Option height | *number \| string* | `44` | -| visible-item-count | Count of visible columns | *number \| string* | `5` | -| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` | +| --- | --- | --- | --- | +| columns | Columns data | _Column[]_ | `[]` | +| title | Toolbar title | _string_ | - | +| confirm-button-text | Text of confirm button | _string_ | `Confirm` | +| cancel-button-text | Text of cancel button | _string_ | `Cancel` | +| value-key | Key of option text | _string_ | `text` | +| toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` | +| loading | Whether to show loading prompt | _boolean_ | `false` | +| show-toolbar | Whether to show toolbar | _boolean_ | `false` | +| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` | +| default-index | Default value index of single column picker | _number \| string_ | `0` | +| item-height | Option height | _number \| string_ | `44` | +| visible-item-count | Count of visible columns | _number \| string_ | `5` | +| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` | ### Events Picker events will pass different parameters according to the columns are single or multiple | Event | Description | Arguments | -|------|------|------| +| --- | --- | --- | | confirm | Triggered when click confirm button | Single column：current value，current index
Multiple columns：current values，current indexes | | cancel | Triggered when click cancel button | Single column：current value，current index
Multiple columns：current values，current indexes | | change | Triggered when current option changed | Single column：Picker instance, current value，current index
Multiple columns：Picker instance, current values，column index | ### Slots -| Name | Description | -|------|------| -| default | Custom toolbar content | -| title | Custom title | -| columns-top | Custom content above columns | +| Name | Description | +| -------------- | ---------------------------- | +| default | Custom toolbar content | +| title | Custom title | +| columns-top | Custom content above columns | | columns-bottom | Custom content below columns | ### Data Structure of Column -| Key | Description | Type | -|------|------|------| -| values | Value of column | *string[]* | -| defaultIndex | Default value index | *number* | -| className | ClassName for this column | *any* | -| children `v2.4.5` | Cascade children | *Column* | +| Key | Description | Type | +| ----------------- | ------------------------- | ---------- | +| values | Value of column | _string[]_ | +| defaultIndex | Default value index | _number_ | +| className | ClassName for this column | _any_ | +| children `v2.4.5` | Cascade children | _Column_ | ### Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods | Name | Description | Attribute | Return value | -|------|------|------|------| +| --- | --- | --- | --- | | getValues | Get current values of all columns | - | values | | setValues | Set current values of all columns | values | - | | getIndexes | Get current indexes of all columns | - | indexes | diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 22151741a..74af9f115 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -29,14 +29,14 @@ import { Toast } from 'vant'; export default { data() { return { - columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] + columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], }; }, methods: { onChange(picker, value, index) { Toast(`当前值：${value}, 当前索引：${index}`); - } - } + }, + }, }; ``` @@ -68,8 +68,8 @@ import { Toast } from 'vant'; export default { data() { return { - columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] - } + columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + }; }, methods: { onConfirm(value, index) { @@ -77,8 +77,8 @@ export default { }, onCancel() { Toast('取消'); - } - } + }, + }, }; ``` @@ -98,16 +98,16 @@ export default { // 第一列 { values: ['周一', '周二', '周三', '周四', '周五'], - defaultIndex: 2 + defaultIndex: 2, }, // 第二列 { values: ['上午', '下午', '晚上'], - defaultIndex: 1 - } - ] + defaultIndex: 1, + }, + ], }; - } + }, }; ``` @@ -123,27 +123,36 @@ export default { export default { data() { return { - columns: [{ - text: '浙江', - children: [{ - text: '杭州', - children: [{ text: '西湖区' }, { text: '余杭区' }] - }, { - text: '温州', - children: [{ text: '鹿城区' }, { text: '瓯海区' }] - }] - }, { - text: '福建', - children: [{ - text: '福州', - children: [{ text: '鼓楼区' }, { text: '台江区' }] - }, { - text: '厦门', - children: [{ text: '思明区' }, { text: '海沧区' }] - }] - }] + columns: [ + { + text: '浙江', + children: [ + { + text: '杭州', + children: [{ text: '西湖区' }, { text: '余杭区' }], + }, + { + text: '温州', + children: [{ text: '鹿城区' }, { text: '瓯海区' }], + }, + ], + }, + { + text: '福建', + children: [ + { + text: '福州', + children: [{ text: '鼓楼区' }, { text: '台江区' }], + }, + { + text: '厦门', + children: [{ text: '思明区' }, { text: '海沧区' }], + }, + ], + }, + ], }; - } + }, }; ``` @@ -164,10 +173,10 @@ export default { columns: [ { text: '杭州', disabled: true }, { text: '宁波' }, - { text: '温州' } - ] + { text: '温州' }, + ], }; - } + }, }; ``` @@ -181,24 +190,21 @@ export default { ```js const citys = { - '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], - '福建': ['福州', '厦门', '莆田', '三明', '泉州'] + 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + 福建: ['福州', '厦门', '莆田', '三明', '泉州'], }; export default { data() { return { - columns: [ - { values: Object.keys(citys) }, - { values: citys['浙江'] } - ] + columns: [{ values: Object.keys(citys) }, { values: citys['浙江'] }], }; }, methods: { onChange(picker, values) { picker.setColumnValues(1, citys[values[0]]); - } - } + }, + }, }; ``` @@ -215,7 +221,7 @@ export default { data() { return { columns: [], - loading: true + loading: true, }; }, created() { @@ -223,7 +229,7 @@ export default { this.loading = false; this.columns = ['选项']; }, 1000); - } + }, }; ``` @@ -256,15 +262,15 @@ export default { return { value: '', showPicker: false, - columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] - } + columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'], + }; }, methods: { onConfirm(value) { this.value = value; this.showPicker = false; - } - } + }, + }, }; ``` @@ -273,57 +279,57 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| columns | 对象数组，配置每一列显示的数据 | *Column[]* | `[]` | -| title | 顶部栏标题 | *string* | - | -| confirm-button-text | 确认按钮文字 | *string* | `确认` | -| cancel-button-text | 取消按钮文字 | *string* | `取消` | -| value-key | 选项对象中，选项文字对应的键名 | *string* | `text` | -| toolbar-position | 顶部栏位置，可选值为`bottom` | *string* | `top` | -| loading | 是否显示加载状态 | *boolean* | `false` | -| show-toolbar | 是否显示顶部栏 | *boolean* | `false` | -| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | *boolean* | `true` | -| default-index | 单列选择时，默认选中项的索引 | *number \| string* | `0` | -| item-height | 选项高度 | *number \| string* | `44` | -| visible-item-count | 可见的选项个数 | *number \| string* | `5` | -| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` | +| --- | --- | --- | --- | +| columns | 对象数组，配置每一列显示的数据 | _Column[]_ | `[]` | +| title | 顶部栏标题 | _string_ | - | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | +| value-key | 选项对象中，选项文字对应的键名 | _string_ | `text` | +| toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` | +| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` | +| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` | +| item-height | 选项高度 | _number \| string_ | `44` | +| visible-item-count | 可见的选项个数 | _number \| string_ | `5` | +| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` | ### Events 当选择器有多列时，事件回调参数会返回数组 | 事件名 | 说明 | 回调参数 | -|------|------|------| +| --- | --- | --- | | confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | | cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | | change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引 | ### Slots -| 名称 | 说明 | -|------|------| -| default | 自定义顶部栏内容 | -| title | 自定义标题内容 | -| columns-top | 自定义选项上方内容 | +| 名称 | 说明 | +| -------------- | ------------------ | +| default | 自定义顶部栏内容 | +| title | 自定义标题内容 | +| columns-top | 自定义选项上方内容 | | columns-bottom | 自定义选项下方内容 | ### Column 数据结构 当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key` -| 键名 | 说明 | 类型 | -|------|------|------| -| values | 列中对应的备选值 | *string[]* -| defaultIndex | 初始选中项的索引，默认为 0 | *number* | -| className | 为对应列添加额外的类名 | *any* | -| children `v2.4.5` | 级联选项 | *Column* | +| 键名 | 说明 | 类型 | +| ----------------- | -------------------------- | ---------- | +| values | 列中对应的备选值 | _string[]_ | +| defaultIndex | 初始选中项的索引，默认为 0 | _number_ | +| className | 为对应列添加额外的类名 | _any_ | +| children `v2.4.5` | 级联选项 | _Column_ | ### 方法 通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa) | 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| +| --- | --- | --- | --- | | getValues | 获取所有列选中的值 | - | values | | setValues | 设置所有列选中的值 | values | - | | getIndexes | 获取所有列选中值对应的索引 | - | indexes | diff --git a/src/popup/README.md b/src/popup/README.md index daa76e468..f0e23ba4c 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -22,15 +22,15 @@ Vue.use(Popup); export default { data() { return { - show: false - } + show: false, + }; }, methods: { showPopup() { this.show = true; - } - } + }, + }, }; ``` @@ -39,11 +39,7 @@ export default { Use `position` prop to set popup display position ```html - + ``` ### Close Icon @@ -76,12 +72,7 @@ Use `position` prop to set popup display position ### Round Corner ```html - + ``` ### Get Container @@ -104,9 +95,9 @@ export default { methods: { getContainer() { return document.querySelector('.my-container'); - } - } -} + }, + }, +}; ``` > Tips: The get-container prop cannot be used on the root node @@ -116,32 +107,32 @@ export default { ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model (value) | Whether to show popup | *boolean* | `false` | -| overlay | Whether to show overlay | *boolean* | `true` | -| position | Can be set to `top` `bottom` `right` `left` | *string* | `center` | -| overlay-class | Custom overlay class | *string* | - | -| overlay-style | Custom overlay style | *object* | - | -| duration | Transition duration, unit second | *number \| string* | `0.3` | -| round `v2.0.7` | Whether to show round corner | *boolean* | `false` | -| lock-scroll | Whether to lock background scroll | *boolean* | `true` | -| lazy-render | Whether to lazy render util appeared | *boolean* | `true` | -| close-on-popstate `v2.2.10` | Whether to close when popstate | *boolean* | `false` | -| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | -| closeable `v2.2.0` | Whether to show close icon | *boolean* | `false` | -| close-icon `v2.2.0` | Close icon name | *string* | `cross` | -| close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | -| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | *string* | - | -| get-container | Return the mount node for Popup | *string \| () => Element* | - | -| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model (value) | Whether to show popup | _boolean_ | `false` | +| overlay | Whether to show overlay | _boolean_ | `true` | +| position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` | +| overlay-class | Custom overlay class | _string_ | - | +| overlay-style | Custom overlay style | _object_ | - | +| duration | Transition duration, unit second | _number \| string_ | `0.3` | +| round `v2.0.7` | Whether to show round corner | _boolean_ | `false` | +| lock-scroll | Whether to lock background scroll | _boolean_ | `true` | +| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` | +| close-on-popstate `v2.2.10` | Whether to close when popstate | _boolean_ | `false` | +| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` | +| closeable `v2.2.0` | Whether to show close icon | _boolean_ | `false` | +| close-icon `v2.2.0` | Close icon name | _string_ | `cross` | +| close-icon-position `v2.2.2` | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` | +| transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - | +| get-container | Return the mount node for Popup | _string \| () => Element_ | - | +| safe-area-inset-bottom `v2.2.1` | Whether to enable bottom safe area adaptation | _boolean_ | `false` | ### Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when click Popup | *event: Event* | -| open | Triggered when open Popup | - | -| close | Triggered when close Popup | - | -| opened | Triggered when opened Popup | - | -| closed | Triggered when closed Popup | - | -| click-overlay | Triggered when click overlay | - | +| Event | Description | Arguments | +| ------------- | ---------------------------- | -------------- | +| click | Triggered when click Popup | _event: Event_ | +| open | Triggered when open Popup | - | +| close | Triggered when close Popup | - | +| opened | Triggered when opened Popup | - | +| closed | Triggered when closed Popup | - | +| click-overlay | Triggered when click overlay | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index cc66b42dc..1ec9776c1 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -28,15 +28,15 @@ Vue.use(Popup); export default { data() { return { - show: false - } + show: false, + }; }, methods: { showPopup() { this.show = true; - } - } + }, + }, }; ``` @@ -45,11 +45,7 @@ export default { 通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right` ```html - + ``` ### 关闭图标 @@ -86,12 +82,7 @@ export default { 设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式 ```html - + ``` ### 指定挂载位置 @@ -115,9 +106,9 @@ export default { // 返回一个特定的 DOM 节点，作为挂载的父节点 getContainer() { return document.querySelector('.my-container'); - } - } -} + }, + }, +}; ``` > 注意：使用 get-container 属性的组件不能为根节点 @@ -127,32 +118,32 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model (value) | 是否显示弹出层 | *boolean* | `false` | -| overlay | 是否显示遮罩层 | *boolean* | `true` | -| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | *string* | `center` | -| overlay-class | 自定义遮罩层类名 | *string* | - | -| overlay-style | 自定义遮罩层样式 | *object* | - | -| duration | 动画时长，单位秒 | *number \| string* | `0.3` | -| round `v2.0.7` | 是否显示圆角 | *boolean* | `false` | -| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | -| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | -| close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | *boolean* | `false` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | -| closeable `v2.2.0` | 是否显示关闭图标 | *boolean* | `false` | -| close-icon `v2.2.0` | 关闭图标名称或图片链接 | *string* | `cross` | -| close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | *string* | `top-right` | -| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | *string* | - | -| get-container | 指定挂载的节点 | *string \| () => Element* | - | -| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model (value) | 是否显示弹出层 | _boolean_ | `false` | +| overlay | 是否显示遮罩层 | _boolean_ | `true` | +| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` | +| overlay-class | 自定义遮罩层类名 | _string_ | - | +| overlay-style | 自定义遮罩层样式 | _object_ | - | +| duration | 动画时长，单位秒 | _number \| string_ | `0.3` | +| round `v2.0.7` | 是否显示圆角 | _boolean_ | `false` | +| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` | +| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` | +| close-on-popstate `v2.2.10` | 是否在页面回退时自动关闭 | _boolean_ | `false` | +| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| closeable `v2.2.0` | 是否显示关闭图标 | _boolean_ | `false` | +| close-icon `v2.2.0` | 关闭图标名称或图片链接 | _string_ | `cross` | +| close-icon-position `v2.2.2` | 关闭图标位置，可选值为`top-left`
`bottom-left` `bottom-right` | _string_ | `top-right` | +| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - | +| get-container | 指定挂载的节点 | _string \| () => Element_ | - | +| safe-area-inset-bottom `v2.2.1` | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击弹出层时触发 | *event: Event* | -| open | 打开弹出层时触发 | - | -| close | 关闭弹出层时触发 | - | -| opened | 打开弹出层且动画结束后触发 | - | -| closed | 关闭弹出层且动画结束后触发 | - | -| click-overlay | 点击遮罩层时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------------- | -------------------------- | -------------- | +| click | 点击弹出层时触发 | _event: Event_ | +| open | 打开弹出层时触发 | - | +| close | 关闭弹出层时触发 | - | +| opened | 打开弹出层且动画结束后触发 | - | +| closed | 关闭弹出层且动画结束后触发 | - | +| click-overlay | 点击遮罩层时触发 | - | diff --git a/src/progress/README.md b/src/progress/README.md index 2086bc588..a03e5b158 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -31,22 +31,13 @@ Use 'percentage' prop to set current progress ``` - ### Custom Style Use `pivot-text` to custom text，use `color` to custom bar color ```html - - + + - + + + +

Refresh Count: {{ count }}

``` @@ -102,30 +96,30 @@ Use slots to custom tips ### Props | Attribute | Description | Type | Default | -|------|------|------|------| -| v-model | Loading status | *boolean* | - | -| pulling-text | Text to show when pulling | *string* | `Pull to refresh...` | -| loosing-text | Text to show when loosing | *string* | `Loose to refresh...` | -| loading-text | Text to show when loading | *string* | `Loading...` | -| success-text | Text to show when loading success | *string* | - | -| success-duration | Success text display duration(ms) | *number \| string* | `500` | -| animation-duration | Animation duration | *number \| string* | `300` | -| head-height `v2.4.2` | Height of head | *number \| string* | `50` | -| disabled | Whether to disable pull refresh | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model | Loading status | _boolean_ | - | +| pulling-text | Text to show when pulling | _string_ | `Pull to refresh...` | +| loosing-text | Text to show when loosing | _string_ | `Loose to refresh...` | +| loading-text | Text to show when loading | _string_ | `Loading...` | +| success-text | Text to show when loading success | _string_ | - | +| success-duration | Success text display duration(ms) | _number \| string_ | `500` | +| animation-duration | Animation duration | _number \| string_ | `300` | +| head-height `v2.4.2` | Height of head | _number \| string_ | `50` | +| disabled | Whether to disable pull refresh | _boolean_ | `false` | ### Events -| Event | Description | Parameters | -|------|------|------| -| refresh | Triggered when pull refresh | - | +| Event | Description | Parameters | +| ------- | --------------------------- | ---------- | +| refresh | Triggered when pull refresh | - | ### Slots -| Name | Description | SlotProps | -|------|------|------| -| default | Default slot | - | -| normal | Content of head when at normal status | - | -| pulling | Content of head when at pulling | { distance } | -| loosing | Content of head when at loosing | { distance } | -| loading | Content of head when at loading | { distance } | -| success | Content of head when succeed | - | +| Name | Description | SlotProps | +| ------- | ------------------------------------- | ------------ | +| default | Default slot | - | +| normal | Content of head when at normal status | - | +| pulling | Content of head when at pulling | { distance } | +| loosing | Content of head when at loosing | { distance } | +| loading | Content of head when at loading | { distance } | +| success | Content of head when succeed | - | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 3623f11fd..9fd7875e9 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -28,8 +28,8 @@ export default { data() { return { count: 0, - isLoading: false - } + isLoading: false, + }; }, methods: { onRefresh() { @@ -38,9 +38,9 @@ export default { this.isLoading = false; this.count++; }, 1000); - } - } -} + }, + }, +}; ``` ### 成功提示 @@ -74,29 +74,23 @@ export default { + +

刷新次数: {{ count }}

``` @@ -105,33 +99,33 @@ export default { ### Props | 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| v-model | 是否处于加载中状态 | *boolean* | - | -| pulling-text | 下拉过程提示文案 | *string* | `下拉即可刷新...` | -| loosing-text | 释放过程提示文案 | *string* | `释放即可刷新...` | -| loading-text | 加载过程提示文案 | *string* | `加载中...` | -| success-text | 刷新成功提示文案 | *string* | - | -| success-duration | 刷新成功提示展示时长(ms) | *number \| string* | `500` | -| animation-duration | 动画时长 | *number \| string* | `300` | -| head-height `v2.4.2` | 顶部内容高度 | *number \| string* | `50` | -| disabled | 是否禁用下拉刷新 | *boolean* | `false` | +| --- | --- | --- | --- | +| v-model | 是否处于加载中状态 | _boolean_ | - | +| pulling-text | 下拉过程提示文案 | _string_ | `下拉即可刷新...` | +| loosing-text | 释放过程提示文案 | _string_ | `释放即可刷新...` | +| loading-text | 加载过程提示文案 | _string_ | `加载中...` | +| success-text | 刷新成功提示文案 | _string_ | - | +| success-duration | 刷新成功提示展示时长(ms) | _number \| string_ | `500` | +| animation-duration | 动画时长 | _number \| string_ | `300` | +| head-height `v2.4.2` | 顶部内容高度 | _number \| string_ | `50` | +| disabled | 是否禁用下拉刷新 | _boolean_ | `false` | ### Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| refresh | 下拉刷新时触发 | - | +| 事件名 | 说明 | 回调参数 | +| ------- | -------------- | -------- | +| refresh | 下拉刷新时触发 | - | ### Slots -| 名称 | 说明 | SlotProps | -|------|------|------| -| default | 自定义内容 | - | -| normal | 非下拉状态时顶部内容 | - | -| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | -| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } | -| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | -| success | 刷新成功提示内容 | - | +| 名称 | 说明 | SlotProps | +| ------- | -------------------- | -------------------------- | +| default | 自定义内容 | - | +| normal | 非下拉状态时顶部内容 | - | +| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } | +| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } | +| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | +| success | 刷新成功提示内容 | - | ## 常见问题 diff --git a/src/radio/README.md b/src/radio/README.md index c69e3ebd2..1031c5c29 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -27,9 +27,9 @@ Use `v-model` to bind the name of checked radio export default { data() { return { - radio: '1' - } - } + radio: '1', + }; + }, }; ``` @@ -87,28 +87,22 @@ Use icon slot to custom icon Radio 1 Radio 2 > + height: 20px; + }> ``` ```js @@ -117,9 +111,9 @@ export default { return { radio: '1', activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', - inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png' + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', }; - } + }, }; ``` @@ -138,7 +132,7 @@ export default { -