alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan
2020-04-19 14:00:31 +08:00
parent 5a9ba13452 13cf59fb90
commit 9b3b1e896c
500 changed files with 19154 additions and 15698 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/action-sheet/README.md
+41 -40
View File
@@ -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 {
</van-action-sheet>
<style>
.content {
padding: 16px 16px 160px;
}
.content {
padding: 16px 16px 160px;
}
</style>
```
@@ -122,40 +122,41 @@ export default {
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| 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* |
| cancel | Triggered when cancel click | - |
| --- | --- | --- |
| 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 | - |
| opened | Triggered when opened ActionSheet | - |
src/action-sheet/README.zh-CN.md
+57 -52
View File
@@ -1,4 +1,8 @@
# ActionSheet 上拉菜单
# ActionSheet 动作面板
### 介绍
底部弹起的模态面板，包含与当前情境相关的多个选项。
### 引入
@@ -13,7 +17,7 @@ Vue.use(ActionSheet);
### 基础用法
`ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
```html
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
@@ -29,8 +33,8 @@ export default {
actions: [
{ name: '选项' },
{ name: '选项' },
{ name: '选项', subname: '描述信息' }
]
{ name: '选项', subname: '描述信息' },
],
};
},
methods: {
@@ -39,14 +43,14 @@ export default {
// 可以通过 close-on-click-action 属性开启自动收起
this.show = false;
Toast(item.name);
}
}
}
},
},
};
```
### 展示取消按钮
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板
```html
<van-action-sheet
@@ -63,16 +67,16 @@ import { Toast } from 'vant';
export default {
data() {
return {
show: false
show: false,
};
},
methods: {
onCancel() {
this.show = false;
Toast('cancel');
}
}
}
},
},
};
```
### 展示描述信息
@@ -108,16 +112,16 @@ export default {
actions: [
{ name: '选项', color: '#07c160' },
{ loading: true },
{ name: '禁用选项', disabled: true }
]
{ name: '禁用选项', disabled: true },
],
};
}
}
},
};
```
### 自定义面板
通过插槽可以自定义菜单的展示内容，同时可以使用`title`属性展示标题栏
通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏
```html
<van-action-sheet v-model="show" title="标题">
@@ -125,9 +129,9 @@ export default {
</van-action-sheet>
<style>
.content {
padding: 16px 16px 160px;
}
.content {
padding: 16px 16px 160px;
}
</style>
```
@@ -136,50 +140,51 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| 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* |
| cancel | 取消按钮点击时触发 | - |
| open | 打开菜单时触发 | - |
| close | 关闭菜单时触发 | - |
| opened | 打开菜单且动画结束后触发 | - |
| closed | 关闭菜单且动画结束后触发 | - |
| --- | --- | --- |
| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ |
| cancel | 点击取消按钮时触发 | - |
| open | 打开面板时触发 | - |
| close | 关闭面板时触发 | - |
| opened | 打开面板且动画结束后触发 | - |
| closed | 关闭面板且动画结束后触发 | - |
| click-overlay | 点击遮罩层时触发 | - |
## 常见问题
### 引入时提示 dependencies not found？
在 1.x 版本中，上拉菜单的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。
在 1.x 版本中，动作面板的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。
src/action-sheet/demo/index.vue
+18 -18
View File
@@ -1,25 +1,25 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
<demo-block :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell
is-link
:title="$t('showDescription')"
:title="t('showDescription')"
@click="show.description = true"
/>
</demo-block>
<demo-block :title="$t('optionStatus')">
<demo-block :title="t('optionStatus')">
<van-cell
is-link
:title="$t('optionStatus')"
:title="t('optionStatus')"
@click="show.status = true"
/>
</demo-block>
<demo-block :title="$t('customPanel')">
<van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
<demo-block :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
</demo-block>
<van-action-sheet
@@ -32,14 +32,14 @@
v-model="show.status"
close-on-click-action
:actions="statusActions"
:cancel-text="$t('cancel')"
:cancel-text="t('cancel')"
/>
<van-action-sheet
v-model="show.cancel"
:actions="simpleActions"
close-on-click-action
:cancel-text="$t('cancel')"
:cancel-text="t('cancel')"
@cancel="onCancel"
/>
@@ -47,11 +47,11 @@
v-model="show.description"
:actions="simpleActions"
close-on-click-action
:description="$t('description')"
:description="t('description')"
/>
<van-action-sheet v-model="show.title" :title="$t('title')">
<div class="demo-action-sheet-content">{{ $t('content') }}</div>
<van-action-sheet v-model="show.title" :title="t('title')">
<div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet>
</demo-section>
</template>
@@ -98,17 +98,17 @@ export default {
computed: {
simpleActions() {
return [
{ name: this.$t('option') },
{ name: this.$t('option') },
{ name: this.$t('option'), subname: this.$t('subname') },
{ name: this.t('option') },
{ name: this.t('option') },
{ name: this.t('option'), subname: this.t('subname') },
];
},
statusActions() {
return [
{ name: this.$t('option'), color: GREEN },
{ name: this.t('option'), color: GREEN },
{ loading: true },
{ name: this.$t('disabledOption'), disabled: true },
{ name: this.t('disabledOption'), disabled: true },
];
},
},
src/address-edit/Detail.js
+1 -1
View File
@@ -53,7 +53,7 @@ export default createComponent({
genSearchResult() {
const { value, shouldShowSearchResult, searchResult } = this;
if (shouldShowSearchResult) {
return searchResult.map(express => (
return searchResult.map((express) => (
<Cell
key={express.name + express.address}
clickable
src/address-edit/README.md
+56 -52
View File
@@ -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,76 +66,78 @@ export default {
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| area-list | Area List | *object* | - |
| area-columns-placeholder `v2.2.5` | placeholder of area columns | *string[]* | `[]` |
| 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 `v2.6.1` | 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 |
| cancel-delete | Triggered when cancel delete | content：form content |
| select-search | Triggered when select search result | value: search content |
| click-area `v2.5.9` | Triggered when click area | - |
| change-area | Triggered when change area | values: area values |
| change-detail | Triggered when address detail changed | value: address detail |
| change-default | Triggered when switch default address | value: checked |
### 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
src/address-edit/README.zh-CN.md
+56 -52
View File
@@ -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,78 +66,80 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| area-list | 地区列表 | *object* | - |
| area-columns-placeholder `v2.2.5` | 地区选择列占位提示文字 | *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 `v2.6.1` | 地区输入框占位提示文字 | _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：表单内容 |
| cancel-delete | 取消删除地址时触发 | content：表单内容 |
| select-search | 选中搜索结果时触发 | value: 搜索结果 |
| click-area `v2.5.9` | 点击收件地区时触发 | - |
| change-area | 修改收件地区时触发 | values: 地区信息 |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
| change-default | 切换是否使用默认地址时触发 | value: 是否选中 |
### 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_ |
### 省市县列表数据格式
src/address-edit/demo/index.vue
+5 -5
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-address-edit
:area-list="areaList"
show-postal
@@ -8,7 +8,7 @@
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="$t('areaColumnsPlaceholder')"
:area-columns-placeholder="t('areaColumnsPlaceholder')"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
@@ -65,15 +65,15 @@ export default {
methods: {
onSave() {
this.$toast(this.$t('save'));
this.$toast(this.t('save'));
},
onDelete() {
this.$toast(this.$t('delete'));
this.$toast(this.t('delete'));
},
onChangeDetail(val) {
this.searchResult = val ? this.$t('searchResult') : [];
this.searchResult = val ? this.t('searchResult') : [];
},
},
};
src/address-edit/index.js
+19 -9
View File
@@ -44,6 +44,7 @@ export default createComponent({
showSearchResult: Boolean,
saveButtonText: String,
deleteButtonText: String,
areaPlaceholder: String,
showArea: {
type: Boolean,
default: true,
@@ -106,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 '';
},
@@ -144,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;
}
@@ -168,13 +169,21 @@ export default createComponent({
},
onSave() {
const items = ['name', 'tel', 'areaCode', 'addressDetail'];
const items = ['name', 'tel'];
if (this.showArea) {
items.push('areaCode');
}
if (this.showDetail) {
items.push('addressDetail');
}
if (this.showPostal) {
items.push('postalCode');
}
const isValid = items.every(item => {
const isValid = items.every((item) => {
const msg = this.getErrorMessage(item);
if (msg) {
this.errorInfo[item] = msg;
@@ -252,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 =
@@ -283,12 +292,13 @@ export default createComponent({
readonly
clickable={!disableArea}
label={t('area')}
placeholder={t('areaPlaceholder')}
placeholder={this.areaPlaceholder || t('areaPlaceholder')}
errorMessage={errorInfo.areaCode}
rightIcon={!disableArea ? 'arrow' : null}
value={this.areaText}
onFocus={onFocus('areaCode')}
onClick={() => {
this.$emit('click-area');
this.showAreaPopup = !disableArea;
}}
/>
@@ -304,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);
}}
/>
@@ -328,7 +338,7 @@ export default createComponent({
vModel={data.isDefault}
vShow={!hideBottomFields}
title={t('defaultAddress')}
onChange={event => {
onChange={(event) => {
this.$emit('change-default', event);
}}
/>
src/address-edit/test/index.spec.js
+16 -4
View File
@@ -1,5 +1,5 @@
import AddressEdit from '..';
import areaList from '../../area/demo/area.simple';
import areaList from '../../area/demo/area-simple';
import { mount, later } from '../../../test';
const addressInfo = {
@@ -123,7 +123,7 @@ test('valid name', () => {
expect(errorInfo.name).toBeFalsy();
});
it('valid tel', () => {
test('valid tel', () => {
const { data, field, button, errorInfo } = createComponent();
data.tel = '';
button.trigger('click');
@@ -132,7 +132,7 @@ it('valid tel', () => {
expect(errorInfo.tel).toBeFalsy();
});
it('valid areaCode', () => {
test('valid areaCode', () => {
const { data, button, errorInfo } = createComponent();
// areaCode empty
data.areaCode = '';
@@ -145,7 +145,7 @@ it('valid areaCode', () => {
expect(errorInfo.areaCode).toBeTruthy();
});
it('valid addressDetail', () => {
test('valid addressDetail', () => {
const { data, field, button, errorInfo } = createComponent();
data.addressDetail = '';
button.trigger('click');
@@ -294,3 +294,15 @@ test('select area', () => {
wrapper.find('.van-picker__confirm').trigger('click');
expect(data.areaCode).toEqual('110101');
});
test('click-area event', () => {
const wrapper = mount(AddressEdit, {
propsData: {
disableArea: true,
},
});
const field = wrapper.findAll('.van-field').at(2);
field.trigger('click');
expect(wrapper.emitted('click-area')[0]).toBeTruthy();
});
src/address-list/README.md
+31 -31
View File
@@ -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 |
src/address-list/README.zh-CN.md
+37 -37
View File
@@ -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` | 在列表项底部插入内容 | 列表项的值 |
src/address-list/demo/index.vue
+7 -7
View File
@@ -1,12 +1,12 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-address-list
v-model="chosenAddressId"
:list="$t('list')"
:disabled-list="$t('disabledList')"
:disabled-text="$t('disabledText')"
:default-tag-text="$t('defaultTagText')"
:list="t('list')"
:disabled-list="t('disabledList')"
:disabled-text="t('disabledText')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
/>
@@ -85,11 +85,11 @@ export default {
methods: {
onAdd() {
this.$toast(this.$t('add'));
this.$toast(this.t('add'));
},
onEdit(item, index) {
this.$toast(`${this.$t('edit')}:${index}`);
this.$toast(`${this.t('edit')}:${index}`);
},
},
};
src/area/README.md
+39 -36
View File
@@ -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
<van-area :area-list="areaList" />
@@ -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
<van-area :area-list="areaList" :columns-num="2" title="Title" />
@@ -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',
},
];
```
src/area/README.zh-CN.md
+27 -27
View File
@@ -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: '东城区',
},
];
```
src/area/demo/area.simple.js → src/area/demo/area-simple.js
View File
src/area/demo/index.vue
+11 -11
View File
@@ -1,26 +1,26 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-area :area-list="$t('areaList')" />
<demo-block :title="t('basicUsage')">
<van-area :area-list="t('areaList')" />
</demo-block>
<demo-block :title="$t('title2')">
<van-area :area-list="$t('areaList')" :value="value" />
<demo-block :title="t('title2')">
<van-area :area-list="t('areaList')" :value="value" />
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-area
:area-list="$t('areaList')"
:area-list="t('areaList')"
:columns-num="2"
:title="$t('title')"
:title="t('title')"
/>
</demo-block>
<demo-block :title="$t('title4')">
<demo-block :title="t('title4')">
<van-area
:area-list="$t('areaList')"
:columns-placeholder="$t('columnsPlaceholder')"
:title="$t('title')"
:area-list="t('areaList')"
:columns-placeholder="t('columnsPlaceholder')"
:title="t('title')"
/>
</demo-block>
</demo-section>
src/area/index.js
+8 -6
View File
@@ -14,7 +14,7 @@ function pickSlots(instance, keys) {
const { $slots, $scopedSlots } = instance;
const scopedSlots = {};
keys.forEach(key => {
keys.forEach((key) => {
if ($scopedSlots[key]) {
scopedSlots[key] = $scopedSlots[key];
} else if ($slots[key]) {
@@ -111,7 +111,7 @@ export default createComponent({
}
const list = this[type];
result = Object.keys(list).map(listCode => ({
result = Object.keys(list).map((listCode) => ({
code: listCode,
name: list[listCode],
}));
@@ -122,7 +122,7 @@ export default createComponent({
code = '9';
}
result = result.filter(item => item.code.indexOf(code) === 0);
result = result.filter((item) => item.code.indexOf(code) === 0);
}
if (this.placeholderMap[type] && result.length) {
@@ -239,7 +239,9 @@ export default createComponent({
getValues() {
const { picker } = this.$refs;
let getValues = picker ? picker.getValues().filter(value => !!value) : [];
let getValues = picker
? picker.getValues().filter((value) => !!value)
: [];
getValues = this.parseOutputValues(getValues);
return getValues;
},
@@ -258,8 +260,8 @@ export default createComponent({
return area;
}
const names = values.map(item => item.name);
const validValues = values.filter(value => !!value.code);
const names = values.map((item) => item.name);
const validValues = values.filter((value) => !!value.code);
area.code = validValues.length
? validValues[validValues.length - 1].code
src/area/test/index.spec.js
+3 -9
View File
@@ -1,5 +1,5 @@
import Area from '..';
import areaList from '../demo/area.simple';
import areaList from '../demo/area-simple';
import { mount, later, triggerDrag } from '../../../test';
const firstOption = [
@@ -70,17 +70,11 @@ test('change option', () => {
expect(wrapper).toMatchSnapshot();
triggerDrag(columns.at(0), 0, -100);
columns
.at(0)
.find('ul')
.trigger('transitionend');
columns.at(0).find('ul').trigger('transitionend');
expect(wrapper).toMatchSnapshot();
triggerDrag(columns.at(2), 0, -100);
columns
.at(2)
.find('ul')
.trigger('transitionend');
columns.at(2).find('ul').trigger('transitionend');
expect(wrapper).toMatchSnapshot();
expect(onChange.mock.calls[0][1]).toEqual(secondOption);
src/button/README.md
+34 -30
View File
@@ -44,7 +44,7 @@ Vue.use(Button);
### Loading
```html
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="Loading..." />
@@ -52,22 +52,24 @@ Vue.use(Button);
### Shape
```html
```html
<van-button square type="primary">Square</van-button>
<van-button round type="info">Round</van-button>
```
### Icon
```html
```html
<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>Button</van-button
>
```
### Size
```html
```html
<van-button type="primary" size="large">Large</van-button>
<van-button type="primary" size="normal">Normal</van-button>
<van-button type="primary" size="small">Small</van-button>
@@ -92,7 +94,9 @@ Vue.use(Button);
```html
<van-button color="#7232dd">Pure</van-button>
<van-button color="#7232dd" plain>Pure</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>Gradient</van-button
>
```
## 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.5.3` | 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_ |
src/button/README.zh-CN.md
+36 -32
View File
@@ -54,7 +54,7 @@ Vue.use(Button);
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
```html
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
@@ -64,7 +64,7 @@ Vue.use(Button);
通过`square`设置方形按钮，通过`round`设置圆形按钮
```html
```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
```
@@ -73,17 +73,19 @@ Vue.use(Button);
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
```html
```html
<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
>按钮</van-button
>
```
### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html
```html
<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
@@ -114,7 +116,9 @@ Vue.use(Button);
```html
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
>渐变色按钮</van-button
>
```
## 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.5.3` | 图标类名前缀，同 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_ |
src/button/demo/index.vue
+37 -37
View File
@@ -1,78 +1,78 @@
<template>
<demo-section>
<demo-block :title="$t('type')">
<demo-block :title="t('type')">
<div class="demo-button-row">
<van-button type="default">{{ $t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button>
<van-button type="info">{{ $t('info') }}</van-button>
<van-button type="default">{{ t('default') }}</van-button>
<van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="info">{{ t('info') }}</van-button>
</div>
<van-button type="danger">{{ $t('danger') }}</van-button>
<van-button type="warning">{{ $t('warning') }}</van-button>
<van-button type="danger">{{ t('danger') }}</van-button>
<van-button type="warning">{{ t('warning') }}</van-button>
</demo-block>
<demo-block :title="$t('plain')">
<van-button plain type="primary" :text="$t('plain')" />
<van-button plain type="info" :text="$t('plain')" />
<demo-block :title="t('plain')">
<van-button plain type="primary" :text="t('plain')" />
<van-button plain type="info" :text="t('plain')" />
</demo-block>
<demo-block :title="$t('hairline')">
<van-button plain hairline type="primary" :text="$t('hairlineButton')" />
<van-button plain hairline type="info" :text="$t('hairlineButton')" />
<demo-block :title="t('hairline')">
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="info" :text="t('hairlineButton')" />
</demo-block>
<demo-block :title="$t('disabled')">
<van-button disabled type="primary" :text="$t('disabled')" />
<van-button disabled type="info" :text="$t('disabled')" />
<demo-block :title="t('disabled')">
<van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="info" :text="t('disabled')" />
</demo-block>
<demo-block :title="$t('loadingStatus')">
<demo-block :title="t('loadingStatus')">
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="$t('loadingText')" type="info" />
<van-button loading :loading-text="t('loadingText')" type="info" />
</demo-block>
<demo-block :title="$t('shape')">
<van-button type="primary" square :text="$t('square')" />
<van-button type="info" round :text="$t('round')" />
<demo-block :title="t('shape')">
<van-button type="primary" square :text="t('square')" />
<van-button type="info" round :text="t('round')" />
</demo-block>
<demo-block :title="$t('icon')">
<demo-block :title="t('icon')">
<van-button type="primary" icon="star-o" />
<van-button type="primary" icon="star-o" :text="$t('button')" />
<van-button type="primary" icon="star-o" :text="t('button')" />
<van-button
plain
type="primary"
icon="https://img.yzcdn.cn/vant/logo.png"
:text="$t('button')"
:text="t('button')"
/>
</demo-block>
<demo-block :title="$t('size')">
<van-button type="primary" size="large">{{ $t('large') }}</van-button>
<van-button type="primary" size="normal">{{ $t('normal') }}</van-button>
<van-button type="primary" size="small">{{ $t('small') }}</van-button>
<van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
<demo-block :title="t('size')">
<van-button type="primary" size="large">{{ t('large') }}</van-button>
<van-button type="primary" size="normal">{{ t('normal') }}</van-button>
<van-button type="primary" size="small">{{ t('small') }}</van-button>
<van-button type="primary" size="mini">{{ t('mini') }}</van-button>
</demo-block>
<demo-block :title="$t('blockElement')">
<van-button type="primary" block>{{ $t('blockElement') }}</van-button>
<demo-block :title="t('blockElement')">
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
</demo-block>
<demo-block :title="$t('router')">
<demo-block v-if="!isWeapp" :title="t('router')">
<van-button
:text="$t('urlRoute')"
:text="t('urlRoute')"
type="primary"
url="/vant/mobile.html"
/>
<van-button :text="$t('vueRoute')" type="primary" to="index" />
<van-button :text="t('vueRoute')" type="primary" to="index" />
</demo-block>
<demo-block :title="$t('customColor')">
<van-button color="#7232dd" :text="$t('pure')" />
<van-button plain color="#7232dd" :text="$t('pure')" />
<demo-block :title="t('customColor')">
<van-button color="#7232dd" :text="t('pure')" />
<van-button plain color="#7232dd" :text="t('pure')" />
<van-button
color="linear-gradient(to right, #4bb0ff, #6149f6)"
:text="$t('gradient')"
:text="t('gradient')"
/>
</demo-block>
</demo-section>
src/button/index.tsx
+1
View File
@@ -166,6 +166,7 @@ Button.props = {
loading: Boolean,
hairline: Boolean,
disabled: Boolean,
iconPrefix: String,
nativeType: String,
loadingText: String,
loadingType: String,
src/button/test/__snapshots__/index.spec.js.snap
+6 -1
View File
@@ -1,6 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`loading size 1`] = `
exports[`icon-prefix prop 1`] = `
<button class="van-button van-button--default van-button--normal"><i class="my-icon my-icon-success van-button__icon">
<!----></i></button>
`;
exports[`loading-size prop 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button>
src/button/test/index.spec.js
+12 -1
View File
@@ -1,7 +1,7 @@
import { mount } from '../../../test';
import Button from '..';
test('loading size', () => {
test('loading-size prop', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
@@ -82,3 +82,14 @@ test('hide border when color is gradient', () => {
expect(wrapper.element.style.border).toEqual('0px');
});
test('icon-prefix prop', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'success',
iconPrefix: 'my-icon',
},
});
expect(wrapper).toMatchSnapshot();
});
src/calendar/README.md
+96 -71
View File
@@ -29,7 +29,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -39,14 +39,38 @@ export default {
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
}
},
},
};
```
### Select Multiple Date
```html
<van-cell title="Select Multiple Date" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
```
```js
export default {
data() {
return {
text: '',
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
<van-cell title="Select Date Range" :value="date" @click="show = true" />
@@ -58,7 +82,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -69,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
<van-calendar v-model="show" :show-confirm="false" />
@@ -95,11 +119,7 @@ Use `color` prop to custom calendar color
Use `min-date` and `max-date` to custom date range
```html
<van-calendar
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -108,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),
};
}
},
};
```
@@ -132,11 +152,7 @@ Use `confirm-text` and `confirm-disabled-text` to custom confirm text
Use `formatter` to custom day text
```html
<van-calendar
v-model="show"
type="range"
:formatter="formatter"
/>
<van-calendar v-model="show" type="range" :formatter="formatter" />
```
```js
@@ -163,9 +179,9 @@ export default {
}
return day;
}
}
}
},
},
};
```
### Custom Position
@@ -173,11 +189,7 @@ export default {
Use `position` to custom popup position，can be set to `top`、`left`、`right`
```html
<van-calendar
v-model="show"
:round="false"
position="right"
/>
<van-calendar v-model="show" :round="false" position="right" />
```
### Max Range
@@ -185,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
<van-calendar
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
```
### Tiled display
@@ -210,47 +218,64 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Whether to show calendar | *boolean* | `false` |
| type | Type，can be set to `single` `range` | *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* | - |
| position | Popup position, can be set to `top` `right` `left` | *string* | `bottom` |
| poppable | Whether to show the calendar inside a popup | *boolean* | `true` |
| round | Whether to show round corner | *boolean* | `true` |
| show-mark | Whether to show background month mark | *boolean* | `true` |
| show-confirm | Whether to show confirm button | *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` |
| confirm-text | Confirm button text | *string* | `Confirm` |
| confirm-disabled-text | Confirm button text when disabled | *string* | `Confirm` |
| 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` |
| --- | --- | --- | --- |
| 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` |
| get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - |
### Range Props
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` |
### 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 | - |
@@ -258,15 +283,15 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
### 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 | - | - |
src/calendar/README.zh-CN.md
+98 -71
View File
@@ -29,7 +29,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -39,8 +39,34 @@ export default {
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
}
},
},
};
```
### 选择多个日期
设置`type`为`multiple`后可以选择多个日期，此时`confirm`事件返回的 date 为数组结构，数组包含若干个选中的日期。
```html
<van-cell title="选择多个日期" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
```
```js
export default {
data() {
return {
text: '',
show: false,
};
},
methods: {
onConfirm(date) {
this.show = false;
this.text = `选择了 ${date.length} 个日期`;
},
},
};
```
@@ -58,7 +84,7 @@ export default {
data() {
return {
date: '',
show: false
show: false,
};
},
methods: {
@@ -69,8 +95,8 @@ export default {
const [start, end] = date;
this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
}
}
},
},
};
```
@@ -95,11 +121,7 @@ export default {
通过`min-date`和`max-date`定义日历的范围
```html
<van-calendar
v-model="show"
:min-date="minDate"
:max-date="maxDate"
/>
<van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" />
```
```js
@@ -108,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),
};
}
},
};
```
@@ -132,11 +154,7 @@ export default {
通过传入`formatter`函数来对日历上每一格的内容进行格式化
```html
<van-calendar
v-model="show"
type="range"
:formatter="formatter"
/>
<van-calendar v-model="show" type="range" :formatter="formatter" />
```
```js
@@ -150,7 +168,7 @@ export default {
if (date === 1) {
day.topInfo = '劳动节';
} else if (date === 4) {
day.topInfo = '五四青年节';
day.topInfo = '青年节';
} else if (date === 11) {
day.text = '今天';
}
@@ -163,9 +181,9 @@ export default {
}
return day;
}
}
}
},
},
};
```
### 自定义弹出位置
@@ -173,11 +191,7 @@ export default {
通过`position`属性自定义弹出层的弹出位置，可选值为`top`、`left`、`right`
```html
<van-calendar
v-model="show"
:round="false"
position="right"
/>
<van-calendar v-model="show" :round="false" position="right" />
```
### 日期区间最大范围
@@ -185,11 +199,7 @@ export default {
选择日期区间时，可以通过`max-range`属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案
```html
<van-calendar
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />
```
### 平铺展示
@@ -210,49 +220,66 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model | 是否显示日历弹窗 | *boolean* | `false` |
| type | 选择类型，`single`表示选择单个日期，<br>`range`表示选择日期区间 | *string* | `single` |
| title | 日历标题 | *string* | `日期选择` |
| color | 颜色，对底部按钮和选中日期生效 | *string* | `#ee0a24` |
| min-date | 最小日期 | *Date* | 当前日期 |
| max-date | 最大日期 | *Date* | 当前日期的六个月后 |
| default-date | 默认选中的日期 | *Date \| Date[]* | 今天 |
| row-height | 日期行高 | *number \| string* | `64` |
| formatter | 日期格式化函数 | *(day: Day) => Day* | - |
| position | 弹出位置，可选值为 `top` `right` `left` | *string* | `bottom` |
| poppable | 是否以弹层的形式展示日历 | *boolean* | `true` |
| round | 是否显示圆角弹窗 | *boolean* | `true` |
| show-mark | 是否显示月份背景水印 | *boolean* | `true` |
| show-confirm | 是否展示确认按钮 | *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` |
| confirm-text | 确认按钮的文字 | *string* | `确定` |
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
| range-prompt `v2.4.3` | 选择超过区间范围时的提示文案 | *string* | `选择天数不能超过 xx 天` |
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
| --- | --- | --- | --- |
| type `v2.5.4` | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`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_ | - |
### 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` |
### 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` | 打开弹出层且动画结束后触发 | - |
@@ -260,18 +287,18 @@ export default {
### Slots
| 名称 | 说明 |
|------|------|
| title | 自定义标题 |
| 名称 | 说明 |
| ------ | ------------------ |
| title | 自定义标题 |
| footer | 自定义底部区域内容 |
### 方法
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| reset | 重置选中的日期到默认值 | - | - |
| 方法名 | 说明 | 参数 | 返回值 |
| ------ | ---------------------- | ---- | ------ |
| reset | 重置选中的日期到默认值 | - | - |
## 常见问题
src/calendar/components/Header.js
+13 -7
View File
@@ -6,17 +6,23 @@ const [createComponent] = createNamespace('calendar-header');
export default createComponent({
props: {
title: String,
monthTitle: String,
subtitle: String,
showTitle: Boolean,
showSubtitle: Boolean,
},
methods: {
genTitle() {
const title = this.slots('title') || this.title || t('title');
return <div class={bem('header-title')}>{title}</div>;
if (this.showTitle) {
const title = this.slots('title') || this.title || t('title');
return <div class={bem('header-title')}>{title}</div>;
}
},
genMonth() {
return <div class={bem('month-title')}>{this.monthTitle}</div>;
genSubtitle() {
if (this.showSubtitle) {
return <div class={bem('header-subtitle')}>{this.subtitle}</div>;
}
},
genWeekDays() {
@@ -24,7 +30,7 @@ export default createComponent({
return (
<div class={bem('weekdays')}>
{weekdays.map(item => (
{weekdays.map((item) => (
<span class={bem('weekday')}>{item}</span>
))}
</div>
@@ -36,7 +42,7 @@ export default createComponent({
return (
<div class={bem('header')}>
{this.genTitle()}
{this.genMonth()}
{this.genSubtitle()}
{this.genWeekDays()}
</div>
);
src/calendar/components/Month.js
+94 -36
View File
@@ -1,5 +1,13 @@
import { createNamespace } from '../../utils';
import { t, bem, compareDay, formatMonthTitle, ROW_HEIGHT } from '../utils';
import {
t,
bem,
compareDay,
ROW_HEIGHT,
getPrevDay,
getNextDay,
formatMonthTitle,
} from '../utils';
import { getMonthEndDay } from '../../datetime-picker/utils';
const [createComponent] = createNamespace('calendar-month');
@@ -12,10 +20,12 @@ export default createComponent({
minDate: Date,
maxDate: Date,
showMark: Boolean,
showTitle: Boolean,
rowHeight: [Number, String],
formatter: Function,
currentDate: [Date, Array],
allowSameDay: Boolean,
showSubtitle: Boolean,
showMonthTitle: Boolean,
},
data() {
@@ -81,7 +91,67 @@ export default createComponent({
methods: {
scrollIntoView() {
this.$refs.days.scrollIntoView();
if (this.showSubtitle) {
this.$refs.days.scrollIntoView();
} else {
this.$refs.month.scrollIntoView();
}
},
getMultipleDayType(day) {
const isSelected = (date) =>
this.currentDate.some((item) => compareDay(item, date) === 0);
if (isSelected(day)) {
const prevDay = getPrevDay(day);
const nextDay = getNextDay(day);
const prevSelected = isSelected(prevDay);
const nextSelected = isSelected(nextDay);
if (prevSelected && nextSelected) {
return 'multiple-middle';
}
if (prevSelected) {
return 'end';
}
return nextSelected ? 'start' : 'multiple-selected';
}
return '';
},
getRangeDayType(day) {
const [startDay, endDay] = this.currentDate;
if (!startDay) {
return '';
}
const compareToStart = compareDay(day, startDay);
if (!endDay) {
return compareToStart === 0 ? 'start' : '';
}
const compareToEnd = compareDay(day, endDay);
if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
return 'start-end';
}
if (compareToStart === 0) {
return 'start';
}
if (compareToEnd === 0) {
return 'end';
}
if (compareToStart > 0 && compareToEnd < 0) {
return 'middle';
}
},
getDayType(day) {
@@ -95,41 +165,24 @@ export default createComponent({
return compareDay(day, currentDate) === 0 ? 'selected' : '';
}
if (type === 'multiple') {
return this.getMultipleDayType(day);
}
/* istanbul ignore else */
if (type === 'range') {
const [startDay, endDay] = this.currentDate;
if (!startDay) {
return;
}
const compareToStart = compareDay(day, startDay);
if (compareToStart === 0) {
return 'start';
}
if (!endDay) {
return;
}
const compareToEnd = compareDay(day, endDay);
if (compareToEnd === 0) {
return 'end';
}
if (compareToStart > 0 && compareToEnd < 0) {
return 'middle';
}
return this.getRangeDayType(day);
}
},
getBottomInfo(type) {
if (type === 'start') {
return t('start');
}
if (type === 'end') {
return t('end');
if (this.type === 'range') {
if (type === 'start' || type === 'end') {
return t(type);
}
if (type === 'start-end') {
return t('startEnd');
}
}
},
@@ -145,7 +198,12 @@ export default createComponent({
}
if (this.color) {
if (type === 'start' || type === 'end') {
if (
type === 'start' ||
type === 'end' ||
type === 'multiple-selected' ||
type === 'multiple-middle'
) {
style.background = this.color;
} else if (type === 'middle') {
style.color = this.color;
@@ -156,7 +214,7 @@ export default createComponent({
},
genTitle() {
if (this.showTitle) {
if (this.showMonthTitle) {
return <div class={bem('month-title')}>{this.title}</div>;
}
},
@@ -203,7 +261,7 @@ export default createComponent({
role="gridcell"
style={style}
class={[bem('day'), item.className]}
tabindex={disabled ? null : -1}
tabindex={-1}
onClick={onClick}
>
<div class={bem('selected-day')} style={{ background: this.color }}>
@@ -233,7 +291,7 @@ export default createComponent({
render() {
return (
<div class={bem('month')} style={this.monthStyle}>
<div class={bem('month')} ref="month" style={this.monthStyle}>
{this.genTitle()}
{this.genDays()}
</div>
src/calendar/demo/index.vue
+42 -23
View File
@@ -1,88 +1,96 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-cell
is-link
:title="$t('selectSingle')"
:title="t('selectSingle')"
:value="formatFullDate(date.selectSingle)"
@click="show('single', 'selectSingle')"
/>
<van-cell
is-link
:title="$t('selectRange')"
:title="t('selectMultiple')"
:value="formatMultiple(date.selectMultiple)"
@click="show('multiple', 'selectMultiple')"
/>
<van-cell
is-link
:title="t('selectRange')"
:value="formatRange(date.selectRange)"
@click="show('range', 'selectRange')"
/>
</demo-block>
<demo-block :title="$t('quickSelect')">
<demo-block :title="t('quickSelect')">
<van-cell
is-link
:title="$t('selectSingle')"
:title="t('selectSingle')"
:value="formatFullDate(date.quickSelect1)"
@click="show('single', 'quickSelect1')"
/>
<van-cell
is-link
:title="$t('selectRange')"
:title="t('selectRange')"
:value="formatRange(date.quickSelect2)"
@click="show('range', 'quickSelect2')"
/>
</demo-block>
<demo-block :title="$t('customCalendar')">
<demo-block :title="t('customCalendar')">
<van-cell
is-link
:title="$t('customColor')"
:title="t('customColor')"
:value="formatRange(date.customColor)"
@click="show('range', 'customColor')"
/>
<van-cell
is-link
:title="$t('customRange')"
:title="t('customRange')"
:value="formatFullDate(date.customRange)"
@click="show('single', 'customRange')"
/>
<van-cell
is-link
:title="$t('customConfirm')"
:title="t('customConfirm')"
:value="formatRange(date.customConfirm)"
@click="show('range', 'customConfirm')"
/>
<van-cell
is-link
:title="$t('customDayText')"
:title="t('customDayText')"
:value="formatRange(date.customDayText)"
@click="show('range', 'customDayText')"
/>
<van-cell
is-link
:title="$t('customPosition')"
:title="t('customPosition')"
:value="formatFullDate(date.customPosition)"
@click="show('single', 'customPosition')"
/>
<van-cell
is-link
:title="$t('maxRange')"
:title="t('maxRange')"
:value="formatRange(date.maxRange)"
@click="show('range', 'maxRange')"
/>
</demo-block>
<demo-block :title="$t('tiledDisplay')">
<demo-block :title="t('tiledDisplay')">
<van-calendar
:title="$t('calendar')"
:title="t('calendar')"
:poppable="false"
:show-confirm="false"
:min-date="tiledMinDate"
:max-date="tiledMaxDate"
:default-date="tiledMinDate"
:style="{ height: '500px' }"
/>
</demo-block>
@@ -115,10 +123,12 @@ export default {
out: '离店',
today: '今天',
laborDay: '劳动节',
youthDay: '五四青年节',
youthDay: '青年节',
calendar: '日历',
maxRange: '日期区间最大范围',
selectCount: (count) => `选择了 ${count} 个日期`,
selectSingle: '选择单个日期',
selectMultiple: '选择多个日期',
selectRange: '选择日期区间',
quickSelect: '快捷选择',
confirmText: '完成',
@@ -139,7 +149,9 @@ export default {
youthDay: 'Youth Day',
calendar: 'Calendar',
maxRange: 'Max Range',
selectCount: (count) => `${count} dates selected`,
selectSingle: 'Select Single Date',
selectMultiple: 'Select Multiple Date',
selectRange: 'Select Date Range',
quickSelect: 'Quick Select',
confirmText: 'OK',
@@ -160,6 +172,7 @@ export default {
maxRange: [],
selectSingle: null,
selectRange: [],
selectMultiple: [],
quickSelect1: null,
quickSelect2: [],
customColor: [],
@@ -214,8 +227,8 @@ export default {
this.color = GREEN;
break;
case 'customConfirm':
this.confirmText = this.$t('confirmText');
this.confirmDisabledText = this.$t('confirmDisabledText');
this.confirmText = this.t('confirmText');
this.confirmDisabledText = this.t('confirmDisabledText');
break;
case 'customRange':
this.minDate = new Date(2010, 0, 1);
@@ -242,18 +255,18 @@ export default {
if (month === 5) {
if (date === 1) {
day.topInfo = this.$t('laborDay');
day.topInfo = this.t('laborDay');
} else if (date === 4) {
day.topInfo = this.$t('youthDay');
day.topInfo = this.t('youthDay');
} else if (date === 11) {
day.text = this.$t('today');
day.text = this.t('today');
}
}
if (day.type === 'start') {
day.bottomInfo = this.$t('in');
day.bottomInfo = this.t('in');
} else if (day.type === 'end') {
day.bottomInfo = this.$t('out');
day.bottomInfo = this.t('out');
}
return day;
@@ -271,6 +284,12 @@ export default {
}
},
formatMultiple(dates) {
if (dates.length) {
return this.t('selectCount', dates.length);
}
},
formatRange(dateRange) {
if (dateRange.length) {
const [start, end] = dateRange;
src/calendar/index.js
+105 -51
View File
@@ -4,12 +4,14 @@ import { getScrollTop } from '../utils/dom/scroll';
import {
t,
bem,
copyDates,
getNextDay,
compareDay,
ROW_HEIGHT,
calcDateNum,
compareMonth,
createComponent,
calcDateNum,
ROW_HEIGHT,
getDayByOffset,
} from './utils';
// Components
@@ -29,6 +31,7 @@ export default createComponent({
rangePrompt: String,
defaultDate: [Date, Array],
getContainer: [String, Function],
allowSameDay: Boolean,
closeOnPopstate: Boolean,
confirmDisabledText: String,
type: {
@@ -68,10 +71,18 @@ export default createComponent({
type: Boolean,
default: true,
},
showTitle: {
type: Boolean,
default: true,
},
showConfirm: {
type: Boolean,
default: true,
},
showSubtitle: {
type: Boolean,
default: true,
},
safeAreaInsetBottom: {
type: Boolean,
default: true,
@@ -88,16 +99,12 @@ export default createComponent({
data() {
return {
monthTitle: '',
subtitle: '',
currentDate: this.getInitialDate(),
};
},
computed: {
range() {
return this.type === 'range';
},
months() {
const months = [];
const cursor = new Date(this.minDate);
@@ -113,23 +120,23 @@ export default createComponent({
},
buttonDisabled() {
if (this.range) {
return !this.currentDate[0] || !this.currentDate[1];
const { type, currentDate } = this;
if (type === 'range') {
return !currentDate[0] || !currentDate[1];
}
return !this.currentDate;
if (type === 'multiple') {
return !currentDate.length;
}
return !currentDate;
},
},
watch: {
type: 'reset',
value(val) {
if (val) {
this.initRect();
this.scrollIntoView();
}
},
value: 'init',
defaultDate(val) {
this.currentDate = val;
@@ -138,9 +145,12 @@ export default createComponent({
},
mounted() {
if (this.value || !this.poppable) {
this.initRect();
}
this.init();
},
/* istanbul ignore next */
activated() {
this.init();
},
methods: {
@@ -150,7 +160,11 @@ export default createComponent({
this.scrollIntoView();
},
initRect() {
init() {
if (this.poppable && !this.value) {
return;
}
this.$nextTick(() => {
// add Math.floor to avoid decimal height issues
// https://github.com/youzan/vant/issues/5640
@@ -159,13 +173,15 @@ export default createComponent({
);
this.onScroll();
});
this.scrollIntoView();
},
// scroll to current month
scrollIntoView() {
this.$nextTick(() => {
const { currentDate } = this;
const targetDate = this.range ? currentDate[0] : currentDate;
const targetDate =
this.type === 'single' ? currentDate : currentDate[0];
const displayed = this.value || !this.poppable;
/* istanbul ignore if */
@@ -185,14 +201,26 @@ export default createComponent({
},
getInitialDate() {
const { type, defaultDate, minDate } = this;
const { type, minDate, maxDate, defaultDate } = this;
let defaultVal = new Date();
if (compareDay(defaultVal, minDate) === -1) {
defaultVal = minDate;
} else if (compareDay(defaultVal, maxDate) === 1) {
defaultVal = maxDate;
}
if (type === 'range') {
const [startDay, endDay] = defaultDate || [];
return [startDay || minDate, endDay || getNextDay(minDate)];
return [startDay || defaultVal, endDay || getNextDay(defaultVal)];
}
return defaultDate || minDate;
if (type === 'multiple') {
return defaultDate || [defaultVal];
}
return defaultDate || defaultVal;
},
// calculate the position of the elements
@@ -201,7 +229,7 @@ export default createComponent({
const { body, months } = this.$refs;
const top = getScrollTop(body);
const bottom = top + this.bodyHeight;
const heights = months.map(item => item.height);
const heights = months.map((item) => item.height);
const heightSum = heights.reduce((a, b) => a + b, 0);
// iOS scroll bounce may exceed the range
@@ -226,15 +254,16 @@ export default createComponent({
/* istanbul ignore else */
if (currentMonth) {
this.monthTitle = currentMonth.title;
this.subtitle = currentMonth.title;
}
},
onClickDay(item) {
const { date } = item;
const { type, currentDate } = this;
if (this.range) {
const [startDay, endDay] = this.currentDate;
if (type === 'range') {
const [startDay, endDay] = currentDate;
if (startDay && !endDay) {
const compareToStart = compareDay(date, startDay);
@@ -243,10 +272,28 @@ export default createComponent({
this.select([startDay, date], true);
} else if (compareToStart === -1) {
this.select([date, null]);
} else if (this.allowSameDay) {
this.select([date, date]);
}
} else {
this.select([date, null]);
}
} else if (type === 'multiple') {
let selectedIndex;
const selected = this.currentDate.some((dateItem, index) => {
const equal = compareDay(dateItem, date) === 0;
if (equal) {
selectedIndex = index;
}
return equal;
});
if (selected) {
currentDate.splice(selectedIndex, 1);
} else {
this.select([...currentDate, date]);
}
} else {
this.select(date, true);
}
@@ -257,26 +304,36 @@ export default createComponent({
},
select(date, complete) {
this.currentDate = date;
this.$emit('select', this.currentDate);
const emit = (date) => {
this.currentDate = date;
this.$emit('select', copyDates(this.currentDate));
};
if (complete && this.range) {
const valid = this.checkRange();
if (complete && this.type === 'range') {
const valid = this.checkRange(date);
if (!valid) {
// auto selected to max range if showConfirm
if (this.showConfirm) {
emit([date[0], getDayByOffset(date[0], this.maxRange - 1)]);
} else {
emit(date);
}
return;
}
}
emit(date);
if (complete && !this.showConfirm) {
this.onConfirm();
}
},
checkRange() {
const { maxRange, currentDate, rangePrompt } = this;
checkRange(date) {
const { maxRange, rangePrompt } = this;
if (maxRange && calcDateNum(currentDate) > maxRange) {
if (maxRange && calcDateNum(date) > maxRange) {
Toast(rangePrompt || t('rangePrompt', maxRange));
return false;
}
@@ -285,14 +342,11 @@ export default createComponent({
},
onConfirm() {
if (this.range && !this.checkRange()) {
return;
}
this.$emit('confirm', this.currentDate);
this.$emit('confirm', copyDates(this.currentDate));
},
genMonth(date, index) {
const showMonthTitle = index !== 0 || !this.showSubtitle;
return (
<Month
ref="months"
@@ -305,8 +359,10 @@ export default createComponent({
showMark={this.showMark}
formatter={this.formatter}
rowHeight={this.rowHeight}
showTitle={index !== 0}
currentDate={this.currentDate}
showSubtitle={this.showSubtitle}
allowSameDay={this.allowSameDay}
showMonthTitle={showMonthTitle}
onClick={this.onClickDay}
/>
);
@@ -332,7 +388,7 @@ export default createComponent({
color={this.color}
class={bem('confirm')}
disabled={this.buttonDisabled}
nativeType="text"
nativeType="button"
onClick={this.onConfirm}
>
{text || t('confirm')}
@@ -343,11 +399,7 @@ export default createComponent({
genFooter() {
return (
<div
class={bem('footer', {
'safe-area-inset-bottom': this.safeAreaInsetBottom,
})}
>
<div class={bem('footer', { unfit: !this.safeAreaInsetBottom })}>
{this.genFooterContent()}
</div>
);
@@ -358,7 +410,9 @@ export default createComponent({
<div class={bem()}>
<Header
title={this.title}
monthTitle={this.monthTitle}
showTitle={this.showTitle}
subtitle={this.subtitle}
showSubtitle={this.showSubtitle}
scopedSlots={{
title: () => this.slots('title'),
}}
@@ -374,16 +428,16 @@ export default createComponent({
render() {
if (this.poppable) {
const createListener = name => () => this.$emit(name);
const createListener = (name) => () => this.$emit(name);
return (
<Popup
round
closeable
class={bem('popup')}
value={this.value}
round={this.round}
position={this.position}
closeable={this.showTitle || this.showSubtitle}
getContainer={this.getContainer}
closeOnPopstate={this.closeOnPopstate}
closeOnClickOverlay={this.closeOnClickOverlay}
src/calendar/index.less
+19 -5
View File
@@ -27,8 +27,9 @@
box-shadow: @calendar-header-box-shadow;
}
&__month-title,
&__header-title,
&__month-title {
&__header-subtitle {
height: @calendar-header-title-height;
font-weight: @font-weight-bold;
line-height: @calendar-header-title-height;
@@ -39,6 +40,10 @@
font-size: @calendar-header-title-font-size;
}
&__header-subtitle {
font-size: @calendar-header-subtitle-font-size;
}
&__month-title {
font-size: @calendar-month-title-font-size;
}
@@ -94,7 +99,10 @@
cursor: pointer;
&--end,
&--start {
&--start,
&--start-end,
&--multiple-middle,
&--multiple-selected {
color: @calendar-range-edge-color;
background-color: @calendar-range-edge-background-color;
}
@@ -107,6 +115,11 @@
border-radius: 0 @border-radius-md @border-radius-md 0;
}
&--start-end,
&--multiple-selected {
border-radius: @border-radius-md;
}
&--middle {
color: @calendar-range-middle-color;
@@ -160,10 +173,11 @@
&__footer {
flex-shrink: 0;
padding: 0 @padding-md;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--unfit {
padding-bottom: 0;
}
}
src/calendar/test/__snapshots__/demo.spec.js.snap
+6 -2
View File
@@ -7,6 +7,10 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__title"><span>选择单个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>选择多个日期</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>选择日期区间</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
@@ -52,7 +56,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-calendar" style="height: 500px;">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日历</div>
<div class="van-calendar__month-title">2012年1月</div>
<div class="van-calendar__header-subtitle">2012年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -167,7 +171,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"></div>
<div class="van-calendar__footer"></div>
</div>
</div>
<!---->
src/calendar/test/__snapshots__/index.spec.js.snap
+12 -12
View File
@@ -4,7 +4,7 @@ exports[`color prop when type is range 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
</div>
`;
@@ -55,7 +55,7 @@ exports[`color prop when type is single 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -98,7 +98,7 @@ exports[`color prop when type is single 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
</div>
`;
@@ -106,7 +106,7 @@ exports[`formatter prop 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -152,7 +152,7 @@ exports[`formatter prop 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div>
`;
@@ -163,7 +163,7 @@ exports[`popup wrapper 2`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -206,7 +206,7 @@ exports[`popup wrapper 2`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
<!----></i>
</div>
@@ -216,7 +216,7 @@ exports[`row-height prop 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">日期选择</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -259,7 +259,7 @@ exports[`row-height prop 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div>
`;
@@ -267,7 +267,7 @@ exports[`title & footer slot 1`] = `
<div class="van-calendar">
<div class="van-calendar__header">
<div class="van-calendar__header-title">Custom Title</div>
<div class="van-calendar__month-title">2010年1月</div>
<div class="van-calendar__header-subtitle">2010年1月</div>
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
</div>
<div class="van-calendar__body">
@@ -310,6 +310,6 @@ exports[`title & footer slot 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">Custom Footer</div>
<div class="van-calendar__footer">Custom Footer</div>
</div>
`;
src/calendar/test/index.spec.js
+59 -52
View File
@@ -1,22 +1,14 @@
import Calendar from '..';
import { mount, later } from '../../../test';
import { getNextDay } from '../utils';
const now = new Date();
const minDate = new Date(2010, 0, 10);
const maxDate = new Date(2010, 0, 20);
function formatDate(date) {
if (date) {
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}
return '';
}
function formatRange([start, end]) {
return `${formatDate(start)}-${formatDate(end)}`;
}
import {
now,
minDate,
maxDate,
formatDate,
formatRange,
formatMultiple,
} from './utils';
test('select event when type is single', async () => {
const wrapper = mount(Calendar, {
@@ -29,10 +21,7 @@ test('select event when type is single', async () => {
await later();
wrapper
.findAll('.van-calendar__day')
.at(15)
.trigger('click');
wrapper.findAll('.van-calendar__day').at(15).trigger('click');
expect(formatDate(wrapper.emitted('select')[0][0])).toEqual('2010/1/16');
});
@@ -63,6 +52,41 @@ test('select event when type is range', async () => {
expect(formatRange(emittedSelect[3][0])).toEqual('2010/1/13-');
});
test('select event when type is multiple', async () => {
const wrapper = mount(Calendar, {
propsData: {
type: 'multiple',
minDate,
maxDate,
poppable: false,
defaultDate: [minDate],
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(15).trigger('click');
days.at(16).trigger('click');
days.at(17).trigger('click');
await later();
days.at(15).trigger('click');
days.at(12).trigger('click');
const emittedSelect = wrapper.emitted('select');
expect(formatMultiple(emittedSelect[0][0])).toEqual('2010/1/10,2010/1/16');
expect(formatMultiple(emittedSelect[1][0])).toEqual(
'2010/1/10,2010/1/16,2010/1/17'
);
expect(formatMultiple(emittedSelect[2][0])).toEqual(
'2010/1/10,2010/1/16,2010/1/17,2010/1/18'
);
expect(formatMultiple(emittedSelect[3][0])).toEqual(
'2010/1/10,2010/1/17,2010/1/18,2010/1/13'
);
});
test('should not trigger select event when click disabled day', async () => {
const wrapper = mount(Calendar, {
propsData: {
@@ -74,10 +98,7 @@ test('should not trigger select event when click disabled day', async () => {
await later();
wrapper
.findAll('.van-calendar__day')
.at(1)
.trigger('click');
wrapper.findAll('.van-calendar__day').at(1).trigger('click');
expect(formatDate(wrapper.emitted('select'))).toBeFalsy();
});
@@ -93,10 +114,7 @@ test('confirm event when type is single', async () => {
await later();
wrapper
.findAll('.van-calendar__day')
.at(15)
.trigger('click');
wrapper.findAll('.van-calendar__day').at(15).trigger('click');
expect(wrapper.emitted('confirm')).toBeFalsy();
@@ -164,6 +182,7 @@ test('reset method', async () => {
maxDate,
type: 'range',
poppable: false,
defaultDate: [minDate, getNextDay(minDate)],
},
});
@@ -210,6 +229,7 @@ test('row-height prop', async () => {
maxDate,
poppable: false,
rowHeight: 50,
defaultDate: minDate,
},
});
@@ -224,6 +244,7 @@ test('formatter prop', async () => {
minDate,
maxDate,
poppable: false,
defaultDate: minDate,
formatter(day) {
const date = day.date.getDate();
@@ -258,6 +279,7 @@ test('title & footer slot', async () => {
minDate,
maxDate,
poppable: false,
defaultDate: minDate,
},
scopedSlots: {
title: () => 'Custom Title',
@@ -276,6 +298,7 @@ test('should reset when type changed', async () => {
minDate,
maxDate,
poppable: false,
defaultDate: minDate,
},
});
@@ -284,7 +307,10 @@ test('should reset when type changed', async () => {
wrapper.find('.van-calendar__confirm').trigger('click');
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2010/1/10');
wrapper.setProps({ type: 'range' });
wrapper.setProps({
type: 'range',
defaultDate: [minDate, getNextDay(minDate)],
});
wrapper.find('.van-calendar__confirm').trigger('click');
expect(formatRange(wrapper.emitted('confirm')[1][0])).toEqual(
'2010/1/10-2010/1/11'
@@ -341,6 +367,7 @@ test('popup wrapper', async () => {
propsData: {
minDate,
maxDate,
defaultDate: minDate,
},
listeners: {
input(value) {
@@ -383,6 +410,7 @@ test('color prop when type is single', async () => {
maxDate,
color: 'blue',
poppable: false,
defaultDate: minDate,
},
});
@@ -408,7 +436,7 @@ test('color prop when type is range', async () => {
expect(wrapper).toMatchSnapshot();
});
test('should scroll to current month when show', async done => {
test('should scroll to current month when show', async (done) => {
const wrapper = mount(Calendar, {
propsData: {
type: 'range',
@@ -418,7 +446,7 @@ test('should scroll to current month when show', async done => {
},
});
Element.prototype.scrollIntoView = function() {
Element.prototype.scrollIntoView = function () {
expect(this.parentNode).toEqual(
wrapper.findAll('.van-calendar__month').at(3).element
);
@@ -430,27 +458,6 @@ test('should scroll to current month when show', async done => {
await later();
});
test('max-range prop', async () => {
const wrapper = mount(Calendar, {
propsData: {
type: 'range',
minDate,
maxDate,
maxRange: 1,
poppable: false,
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(15).trigger('click');
days.at(18).trigger('click');
wrapper.find('.van-calendar__confirm').trigger('click');
expect(wrapper.emitted('confirm')).toBeFalsy();
});
test('close event', () => {
const wrapper = mount(Calendar, {
propsData: {
src/calendar/test/prop.spec.js
+148
View File
@@ -0,0 +1,148 @@
import Calendar from '..';
import { mount, later } from '../../../test';
import { minDate, maxDate, formatRange, formatDate } from './utils';
test('max-range prop when showConfirm is false', async () => {
const wrapper = mount(Calendar, {
propsData: {
type: 'range',
minDate,
maxDate,
maxRange: 3,
poppable: false,
showConfirm: false,
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(12).trigger('click');
days.at(18).trigger('click');
expect(formatRange(wrapper.emitted('select')[0][0])).toEqual('2010/1/13-');
expect(formatRange(wrapper.emitted('select')[1][0])).toEqual(
'2010/1/13-2010/1/19'
);
expect(wrapper.emitted('confirm')).toBeFalsy();
});
test('max-range prop when showConfirm is true', async () => {
const wrapper = mount(Calendar, {
propsData: {
type: 'range',
minDate,
maxDate,
maxRange: 3,
poppable: false,
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(12).trigger('click');
days.at(18).trigger('click');
expect(formatRange(wrapper.emitted('select')[0][0])).toEqual('2010/1/13-');
expect(formatRange(wrapper.emitted('select')[1][0])).toEqual(
'2010/1/13-2010/1/15'
);
expect(wrapper.emitted('confirm')).toBeFalsy();
});
test('show-title prop', () => {
const wrapper = mount(Calendar, {
propsData: {
value: true,
},
});
expect(wrapper.contains('.van-calendar__header-title')).toBeTruthy();
wrapper.setProps({ showTitle: false });
expect(wrapper.contains('.van-calendar__header-title')).toBeFalsy();
});
test('show-subtitle prop', () => {
const wrapper = mount(Calendar, {
propsData: {
value: true,
},
});
expect(wrapper.contains('.van-calendar__header-subtitle')).toBeTruthy();
wrapper.setProps({ showSubtitle: false });
expect(wrapper.contains('.van-calendar__header-subtitle')).toBeFalsy();
});
test('hide close icon when there is no title', () => {
const wrapper = mount(Calendar, {
propsData: {
value: true,
},
});
expect(wrapper.contains('.van-popup__close-icon')).toBeTruthy();
wrapper.setProps({
showTitle: false,
showSubtitle: false,
});
expect(wrapper.contains('.van-popup__close-icon')).toBeFalsy();
});
test('allow-same-day prop', async () => {
const select = jest.fn();
const wrapper = mount(Calendar, {
propsData: {
type: 'range',
minDate,
maxDate,
poppable: false,
},
listeners: {
select,
},
});
await later();
const days = wrapper.findAll('.van-calendar__day');
days.at(9).trigger('click');
days.at(9).trigger('click');
expect(select).toHaveBeenLastCalledWith([minDate, null]);
wrapper.setProps({
allowSameDay: true,
});
days.at(9).trigger('click');
expect(select).toHaveBeenLastCalledWith([minDate, minDate]);
});
test('min-date after current time', () => {
const wrapper = mount(Calendar, {
propsData: {
poppable: false,
minDate: new Date(2200, 0, 1),
maxDate: new Date(2200, 0, 2),
},
});
wrapper.find('.van-calendar__confirm').trigger('click');
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('2200/1/1');
});
test('min-date before current time', () => {
const wrapper = mount(Calendar, {
propsData: {
poppable: false,
minDate: new Date(1800, 0, 1),
maxDate: new Date(1800, 0, 2),
},
});
wrapper.find('.van-calendar__confirm').trigger('click');
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('1800/1/2');
});
src/calendar/test/utils.js
+19
View File
@@ -0,0 +1,19 @@
export const now = new Date();
export const minDate = new Date(2010, 0, 10);
export const maxDate = new Date(2010, 0, 20);
export function formatDate(date) {
if (date) {
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}
return '';
}
export function formatRange([start, end]) {
return `${formatDate(start)}-${formatDate(end)}`;
}
export function formatMultiple(dates) {
return dates.map(formatDate).join(',');
}
src/calendar/utils.ts
+24 -2
View File
@@ -36,15 +36,37 @@ export function compareDay(day1: Date, day2: Date) {
return compareMonthResult;
}
export function getNextDay(date: Date) {
export function getDayByOffset(date: Date, offset: number) {
date = new Date(date);
date.setDate(date.getDate() + 1);
date.setDate(date.getDate() + offset);
return date;
}
export function getPrevDay(date: Date) {
return getDayByOffset(date, -1);
}
export function getNextDay(date: Date) {
return getDayByOffset(date, 1);
}
export function calcDateNum(date: [Date, Date]) {
const day1 = date[0].getTime();
const day2 = date[1].getTime();
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
}
export function copyDates(dates: Date | Date[]) {
if (Array.isArray(dates)) {
return dates.map((date) => {
if (date === null) {
return date;
}
return new Date(date);
});
}
return new Date(dates);
}
src/card/README.md
+32 -32
View File
@@ -49,14 +49,14 @@ Use slot to custom content.
price="2.00"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<div slot="tags">
<template #tags>
<van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="danger">Tag</van-tag>
</div>
<div slot="footer">
</template>
<template #footer>
<van-button size="mini">Button</van-button>
<van-button size="mini">Button</van-button>
</div>
</template>
</van-card>
```
@@ -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 |
src/card/README.zh-CN.md
+33 -33
View File
@@ -51,14 +51,14 @@ Vue.use(Card);
title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<div slot="tags">
<template #tags>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
</div>
<div slot="footer">
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</div>
</template>
</van-card>
```
@@ -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 | 自定义右下角内容 |
src/card/demo/index.vue
+12 -12
View File
@@ -1,33 +1,33 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('title')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="$t('discountInfo')">
<demo-block :title="t('discountInfo')">
<van-card
num="2"
price="2.00"
origin-price="10.00"
:tag="$t('tag')"
:desc="$t('desc')"
:title="$t('title')"
:tag="t('tag')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
/>
</demo-block>
<demo-block :title="$t('customContent')">
<demo-block :title="t('customContent')">
<van-card
num="2"
price="2.00"
:desc="$t('desc')"
:title="$t('title')"
:desc="t('desc')"
:title="t('title')"
:thumb="imageURL"
>
<template #tags>
@@ -44,10 +44,10 @@
<template #footer>
<div>
<van-button round size="mini">
{{ $t('button') }}
{{ t('button') }}
</van-button>
<van-button round size="mini">
{{ $t('button') }}
{{ t('button') }}
</van-button>
</div>
</template>
src/cell/README.md
+52 -47
View File
@@ -26,7 +26,12 @@ Vue.use(CellGroup);
```html
<van-cell-group>
<van-cell title="Cell title" value="Content" size="large" />
<van-cell title="Cell title" value="Content" size="large" label="Description" />
<van-cell
title="Cell title"
value="Content"
size="large"
label="Description"
/>
</van-cell-group>
```
@@ -79,19 +84,19 @@ Vue.use(CellGroup);
### Use Slots
```html
<van-cell value="Content" is-link>
<template slot="title">
<span class="custom-title">Cell title</span>
<van-tag type="danger">Tag</van-tag>
<van-cell value="内容" is-link>
<!-- Use the title slot to customize the title -->
<template #title>
<span class="custom-title">单元格</span>
<van-tag type="danger">标签</van-tag>
</template>
</van-cell>
<van-cell title="Cell title" icon="shop-o">
<van-icon
slot="right-icon"
name="search"
style="line-height: inherit;"
/>
<van-cell title="单元格" icon="shop-o">
<!-- Use the right-icon slot to customize the right icon -->
<template #right-icon>
<van-icon name="search" style="line-height: inherit;" />
</template>
</van-cell>
```
@@ -105,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 |
src/cell/README.zh-CN.md
+41 -44
View File
@@ -87,7 +87,7 @@ Vue.use(CellGroup);
```html
<van-cell value="内容" is-link>
<!-- 使用 title 插槽来自定义标题 -->
<template slot="title">
<template #title>
<span class="custom-title">单元格</span>
<van-tag type="danger">标签</van-tag>
</template>
@@ -95,11 +95,9 @@ Vue.use(CellGroup);
<van-cell title="单元格" icon="shop-o">
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
<van-icon
slot="right-icon"
name="search"
style="line-height: inherit;"
/>
<template #right-icon>
<van-icon name="search" style="line-height: inherit;" />
</template>
</van-cell>
```
@@ -111,59 +109,58 @@ Vue.use(CellGroup);
<van-cell center title="单元格" value="内容" label="描述信息" />
```
## 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` |
src/cell/demo/index.vue
+34 -38
View File
@@ -1,80 +1,76 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-cell-group>
<van-cell :title="$t('cell')" :value="$t('content')" />
<van-cell
:title="$t('cell')"
:value="$t('content')"
:label="$t('desc')"
/>
<van-cell :title="t('cell')" :value="t('content')" />
<van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
</van-cell-group>
</demo-block>
<demo-block :title="$t('largeSize')">
<van-cell :title="$t('cell')" :value="$t('content')" size="large" />
<demo-block :title="t('largeSize')">
<van-cell :title="t('cell')" :value="t('content')" size="large" />
<van-cell
:title="$t('cell')"
:value="$t('content')"
:title="t('cell')"
:value="t('content')"
size="large"
:label="$t('desc')"
:label="t('desc')"
/>
</demo-block>
<demo-block :title="$t('showIcon')">
<van-cell :title="$t('cell')" :value="$t('content')" icon="location-o" />
<demo-block :title="t('showIcon')">
<van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('valueOnly')">
<van-cell :value="$t('content')" />
<demo-block v-if="!isWeapp" :title="t('valueOnly')">
<van-cell :value="t('content')" />
</demo-block>
<demo-block :title="$t('showArrow')">
<van-cell :title="$t('cell')" is-link />
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
<demo-block :title="t('showArrow')">
<van-cell :title="t('cell')" is-link />
<van-cell :title="t('cell')" is-link :value="t('content')" />
<van-cell
:title="$t('cell')"
:title="t('cell')"
is-link
arrow-direction="down"
:value="$t('content')"
:value="t('content')"
/>
</demo-block>
<demo-block :title="$t('router')">
<van-cell :title="$t('urlRoute')" is-link url="/vant/mobile.html" />
<van-cell :title="$t('vueRoute')" is-link to="index" />
<demo-block :title="t('router')">
<van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
<van-cell :title="t('vueRoute')" is-link to="index" />
</demo-block>
<demo-block :title="$t('groupTitle')">
<van-cell-group :title="`${$t('group')} 1`">
<van-cell :title="$t('cell')" :value="$t('content')" />
<demo-block :title="t('groupTitle')">
<van-cell-group :title="`${t('group')} 1`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
<van-cell-group :title="`${$t('group')} 2`">
<van-cell :title="$t('cell')" :value="$t('content')" />
<van-cell-group :title="`${t('group')} 2`">
<van-cell :title="t('cell')" :value="t('content')" />
</van-cell-group>
</demo-block>
<demo-block :title="$t('useSlots')">
<van-cell :value="$t('content')" is-link>
<demo-block :title="t('useSlots')">
<van-cell :value="t('content')" is-link>
<template #title>
<span class="custom-title">{{ $t('cell') }}</span>
<van-tag type="danger">{{ $t('tag') }}</van-tag>
<span class="custom-title">{{ t('cell') }}</span>
<van-tag type="danger">{{ t('tag') }}</van-tag>
</template>
</van-cell>
<van-cell icon="shop-o" :title="$t('cell')">
<van-cell icon="shop-o" :title="t('cell')">
<template #right-icon>
<van-icon name="search" style="line-height: inherit;" />
</template>
</van-cell>
</demo-block>
<demo-block :title="$t('verticalCenter')">
<demo-block :title="t('verticalCenter')">
<van-cell
center
:title="$t('cell')"
:value="$t('content')"
:label="$t('desc')"
:title="t('cell')"
:value="t('content')"
:label="t('desc')"
/>
</demo-block>
</demo-section>
src/checkbox-group/index.js
+2 -2
View File
@@ -35,10 +35,10 @@ export default createComponent({
let { children } = this;
if (!checked) {
children = children.filter(item => !item.checked);
children = children.filter((item) => !item.checked);
}
const names = children.map(item => item.name);
const names = children.map((item) => item.name);
this.$emit('input', names);
},
},
src/checkbox/README.md
+76 -52
View File
@@ -22,9 +22,9 @@ Vue.use(CheckboxGroup);
export default {
data() {
return {
checked: true
checked: true,
};
}
},
};
```
@@ -58,13 +58,17 @@ Use icon slot to custom icon
```html
<van-checkbox v-model="checked">
Custom Icon
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
customize icon
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
```
```js
@@ -73,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',
};
}
},
};
```
@@ -93,7 +97,6 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
<van-checkbox-group v-model="result">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
</van-checkbox-group>
```
@@ -101,9 +104,28 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
export default {
data() {
return {
result: ['a', 'b']
result: ['a', 'b'],
};
}
},
};
```
### Horizontal
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
</van-checkbox-group>
```
```js
export default {
data() {
return {
result: [],
};
},
};
```
@@ -134,8 +156,8 @@ export default {
export default {
data() {
return {
result: []
}
result: [],
};
},
methods: {
checkAll() {
@@ -143,9 +165,9 @@ export default {
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
},
},
};
```
### Inside a Cell
@@ -160,7 +182,9 @@ export default {
:title="`Checkbox ${item}`"
@click="toggle(index)"
>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -187,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_ | - |
src/checkbox/README.zh-CN.md
+87 -59
View File
@@ -24,9 +24,9 @@ Vue.use(CheckboxGroup);
export default {
data() {
return {
checked: true
checked: true,
};
}
},
};
```
@@ -48,7 +48,7 @@ export default {
### 自定义颜色
通过`checked-color`属性可以自定义选中状态下的图标颜色
通过`checked-color`属性设置选中状态的图标颜色
```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
@@ -69,22 +69,28 @@ export default {
```html
<van-checkbox v-model="checked">
自定义图标
<img
slot="icon"
slot-scope="props"
:src="props.checked ? activeIcon : inactiveIcon"
>
<template #icon="props">
<img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
<style>
.img-icon {
height: 20px;
}
</style>
```
```js
export default {
data() {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
}
}
return {
checked: true,
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
};
},
};
```
### 禁用文本点击
@@ -103,7 +109,6 @@ export default {
<van-checkbox-group v-model="result">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
```
@@ -111,9 +116,30 @@ export default {
export default {
data() {
return {
result: ['a', 'b']
result: ['a', 'b'],
};
}
},
};
```
### 水平排列
将`direction`属性设置为`horizontal`后，复选框组会变成水平排列
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
</van-checkbox-group>
```
```js
export default {
data() {
return {
result: [],
};
},
};
```
@@ -148,8 +174,8 @@ export default {
export default {
data() {
return {
result: []
}
result: [],
};
},
methods: {
checkAll() {
@@ -157,9 +183,9 @@ export default {
},
toggleAll() {
this.$refs.checkboxGroup.toggleAll();
}
}
}
},
},
};
```
### 搭配单元格组件使用
@@ -176,7 +202,9 @@ export default {
:title="`复选框 ${item}`"
@click="toggle(index)"
>
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
<template #right-icon>
<van-checkbox :name="item" ref="checkboxes" />
</template>
</van-cell>
</van-cell-group>
</van-checkbox-group>
@@ -186,16 +214,16 @@ export default {
export default {
data() {
return {
list: ['a', 'b']
result: []
list: ['a', 'b'],
result: [],
};
},
methods: {
toggle(index) {
this.$refs.checkboxes[index].toggle();
}
}
}
},
},
};
```
## API
@@ -203,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_ | - |
src/checkbox/demo/index.vue
+33 -33
View File
@@ -1,98 +1,98 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
<demo-block :title="t('basicUsage')">
<van-checkbox v-model="checkbox1">{{ t('checkbox') }}</van-checkbox>
</demo-block>
<demo-block :title="$t('disabled')">
<demo-block :title="t('disabled')">
<van-checkbox :value="false" disabled>
{{ $t('checkbox') }}
{{ t('checkbox') }}
</van-checkbox>
<van-checkbox :value="true" disabled>
{{ $t('checkbox') }}
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customShape')">
<demo-block :title="t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ $t('customColor') }}
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customColor')">
<demo-block :title="t('customColor')">
<van-checkbox v-model="checkbox2" checked-color="#07c160">
{{ $t('customColor') }}
{{ t('customColor') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customIconSize')">
<demo-block :title="t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="24px">
{{ $t('customIconSize') }}
{{ t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customIcon')">
<demo-block :title="t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ $t('customIcon') }}
{{ t('customIcon') }}
<template #icon="{ checked }">
<img :src="checked ? activeIcon : inactiveIcon" />
</template>
</van-checkbox>
</demo-block>
<demo-block :title="$t('disableLabel')">
<demo-block :title="t('disableLabel')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
{{ t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-checkbox-group v-model="result">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="$t('horizontal')">
<demo-block v-if="!isWeapp" :title="t('horizontal')">
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block :title="$t('title4')">
<demo-block :title="t('title4')">
<van-checkbox-group v-model="result2" :max="2">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('toggleAll')">
<demo-block v-if="!isWeapp" :title="t('toggleAll')">
<van-checkbox-group v-model="checkAllResult" ref="group">
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
<van-checkbox name="a">{{ t('checkbox') }} a</van-checkbox>
<van-checkbox name="b">{{ t('checkbox') }} b</van-checkbox>
<van-checkbox name="c">{{ t('checkbox') }} c</van-checkbox>
</van-checkbox-group>
<div class="demo-checkbox-buttons">
<van-button type="primary" @click="checkAll">
{{ $t('checkAll') }}
{{ t('checkAll') }}
</van-button>
<van-button type="info" @click="toggleAll">
{{ $t('inverse') }}
{{ t('inverse') }}
</van-button>
</div>
</demo-block>
<demo-block :title="$t('title5')">
<demo-block :title="t('title5')">
<van-checkbox-group v-model="result3">
<van-cell-group>
<van-cell
v-for="(item, index) in list"
clickable
:key="index"
:title="`${$t('checkbox')} ${item}`"
:title="`${t('checkbox')} ${item}`"
@click="toggle(index)"
>
<template #right-icon>
src/checkbox/test/index.spec.js
+4 -2
View File
@@ -4,7 +4,7 @@ import { mount, later } from '../../../test';
test('switch checkbox', async () => {
const wrapper = mount(Checkbox);
wrapper.vm.$on('input', value => {
wrapper.vm.$on('input', (value) => {
wrapper.setData({ value });
});
@@ -73,7 +73,7 @@ test('checkbox group', async () => {
expect(wrapper.vm.result).toEqual(['b']);
});
test('click event', () => {
test('click event', async () => {
const onClick = jest.fn();
const wrapper = mount(Checkbox, {
listeners: {
@@ -82,10 +82,12 @@ test('click event', () => {
});
wrapper.trigger('click');
await later();
expect(onClick).toHaveBeenCalledTimes(1);
const icon = wrapper.find('.van-checkbox__icon');
icon.trigger('click');
await later();
expect(onClick).toHaveBeenCalledTimes(2);
});
src/circle/README.md
+22 -27
View File
@@ -14,26 +14,21 @@ Vue.use(Circle);
### Basic Usage
```html
<van-circle
v-model="currentRate"
:rate="30"
:speed="100"
:text="text"
/>
<van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
```
```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 |
src/circle/README.zh-CN.md
+23 -33
View File
@@ -16,26 +16,21 @@ Vue.use(Circle);
`rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。
```html
<van-circle
v-model="currentRate"
:rate="30"
:speed="100"
:text="text"
/>
<van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
```
```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
<van-circle
v-model="currentRate"
:rate="rate"
size="120px"
text="大小定制"
/>
<van-circle v-model="currentRate" :rate="rate" size="120px" text="大小定制" />
```
## 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 | 自定义文字内容 |
src/circle/demo/index.vue
+10 -10
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-circle
v-model="currentRate1"
:rate="rate"
@@ -9,13 +9,13 @@
/>
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-circle
v-model="currentRate3"
:rate="rate"
:speed="100"
:stroke-width="60"
:text="$t('customWidth')"
:text="t('customWidth')"
/>
<van-circle
@@ -24,7 +24,7 @@
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:text="$t('customColor')"
:text="t('customColor')"
/>
<van-circle
@@ -32,7 +32,7 @@
:rate="rate"
:speed="100"
:color="gradientColor"
:text="$t('gradient')"
:text="t('gradient')"
/>
<van-circle
@@ -41,7 +41,7 @@
:rate="rate"
:speed="100"
:clockwise="false"
:text="$t('counterClockwise')"
:text="t('counterClockwise')"
style="margin-top: 15px;"
/>
@@ -52,15 +52,15 @@
:speed="100"
size="120px"
:clockwise="false"
:text="$t('customSize')"
:text="t('customSize')"
style="margin-top: 15px;"
/>
</demo-block>
<div style="margin-top: 15px;">
<van-button :text="$t('add')" type="primary" size="small" @click="add" />
<van-button :text="t('add')" type="primary" size="small" @click="add" />
<van-button
:text="$t('decrease')"
:text="t('decrease')"
type="danger"
size="small"
@click="reduce"
@@ -70,7 +70,7 @@
</template>
<script>
const format = rate => Math.min(Math.max(rate, 0), 100);
const format = (rate) => Math.min(Math.max(rate, 0), 100);
export default {
i18n: {
src/circle/index.js
+3 -2
View File
@@ -14,8 +14,9 @@ function format(rate) {
function getPath(clockwise, viewBoxSize) {
const sweepFlag = clockwise ? 1 : 0;
return `M ${viewBoxSize / 2} ${viewBoxSize /
2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
return `M ${viewBoxSize / 2} ${
viewBoxSize / 2
} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
}
export default createComponent({
src/circle/index.less
+2
View File
@@ -22,7 +22,9 @@
position: absolute;
top: 50%;
left: 0;
box-sizing: border-box;
width: 100%;
padding: 0 @padding-base;
color: @circle-text-color;
font-weight: @circle-text-font-weight;
font-size: @circle-text-font-size;
src/col/README.md
+16 -18
View File
@@ -38,12 +38,10 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
</van-row>
```
### Column Spacing
Set grid spacing using `gutter` attribute. The default value is 0
```html
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
@@ -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_ |
src/col/README.zh-CN.md
+19 -19
View File
@@ -16,9 +16,9 @@ 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` <br> `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` <br> `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_ |
src/col/demo/index.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
@@ -21,7 +21,7 @@
</van-row>
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="t('title2')">
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
@@ -29,7 +29,7 @@
</van-row>
</demo-block>
<demo-block v-if="!isWeapp" :title="$t('title3')">
<demo-block v-if="!isWeapp" :title="t('title3')">
<van-row type="flex">
<van-col span="6">span: 6</van-col>
<van-col span="6">span: 6</van-col>
src/collapse-item/index.js
+1 -1
View File
@@ -57,7 +57,7 @@ export default createComponent({
return accordion
? value === this.currentName
: value.some(name => name === this.currentName);
: value.some((name) => name === this.currentName);
},
},
src/collapse/README.md
+37 -33
View File
@@ -20,7 +20,9 @@ Use `v-model` to control the name of active panels
<van-collapse v-model="activeNames">
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
<van-collapse-item title="Title3" name="3" disabled>Content</van-collapse-item>
<van-collapse-item title="Title3" name="3" disabled
>Content</van-collapse-item
>
</van-collapse>
```
@@ -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',
};
}
},
};
```
@@ -61,7 +63,9 @@ export default {
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<div slot="title">Title1 <van-icon name="question-o" /></div>
<template #title>
<div>Title1 <van-icon name="question-o" /></div>
</template>
Content
</van-collapse-item>
<van-collapse-item title="Title2" name="2" icon="shop-o">
@@ -74,9 +78,9 @@ export default {
export default {
data() {
return {
activeNames: ['1']
activeNames: ['1'],
};
}
},
};
```
@@ -85,40 +89,40 @@ export default {
### Collapse Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-model | Names of current active panels | accordion mode： *number \| string*<br>non-accordion mode：*(number \| string)[]* | - |
| accordion | Whether to be accordion mode | *boolean* | `false` |
| border | Whether to show outer border | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model | Names of current active panels | accordion mode： _number \| string_<br>non-accordion mode：_(number \| string)[]_ | - |
| accordion | Whether to be accordion mode | _boolean_ | `false` |
| border | Whether to show outer border | _boolean_ | `true` |
### Collapse Events
| Event | Description | Arguments |
|------|------|------|
| 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 |
src/collapse/README.zh-CN.md
+34 -32
View File
@@ -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',
};
}
},
};
```
@@ -61,7 +61,9 @@ export default {
```html
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<div slot="title">标题1 <van-icon name="question-o" /></div>
<template #title>
<div>标题1 <van-icon name="question-o" /></div>
</template>
内容
</van-collapse-item>
<van-collapse-item title="标题2" name="2" icon="shop-o">
@@ -74,9 +76,9 @@ export default {
export default {
data() {
return {
activeNames: ['1']
activeNames: ['1'],
};
}
},
};
```
@@ -85,40 +87,40 @@ export default {
### Collapse Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| v-model | 当前展开面板的 name | 手风琴模式：*number \| string*<br>非手风琴模式：*(number \| string)[]* | - |
| accordion | 是否开启手风琴模式 | *boolean* | `false` |
| border | 是否显示外边框 | *boolean* | `true` |
| --- | --- | --- | --- |
| v-model | 当前展开面板的 name | 手风琴模式：_number \| string_<br>非手风琴模式：_(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` |
src/collapse/demo/index.vue
+20 -20
View File
@@ -1,47 +1,47 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-collapse v-model="active1">
<van-collapse-item :title="$t('title') + 1">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 2">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 3" disabled>
{{ $t('text') }}
<van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="$t('accordion')">
<demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion>
<van-collapse-item :title="$t('title') + 1">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 2">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 2">
{{ t('text') }}
</van-collapse-item>
<van-collapse-item :title="$t('title') + 3">
{{ $t('text') }}
<van-collapse-item :title="t('title') + 3">
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
<demo-block :title="$t('titleSlot')">
<demo-block :title="t('titleSlot')">
<van-collapse v-model="active3">
<van-collapse-item>
<template #title>
{{ $t('title') + 1 }}<van-icon name="question-o" />
{{ t('title') + 1 }}<van-icon name="question-o" />
</template>
{{ $t('text') }}
{{ t('text') }}
</van-collapse-item>
<van-collapse-item
:title="$t('title') + 2"
:value="$t('content')"
:title="t('title') + 2"
:value="t('content')"
icon="shop-o"
>
{{ $t('text') }}
{{ t('text') }}
</van-collapse-item>
</van-collapse>
</demo-block>
src/collapse/index.js
+1 -1
View File
@@ -21,7 +21,7 @@ export default createComponent({
if (!this.accordion) {
name = expanded
? this.value.concat(name)
: this.value.filter(activeName => activeName !== name);
: this.value.filter((activeName) => activeName !== name);
}
this.$emit('change', name);
this.$emit('input', name);
src/contact-card/README.md
+53 -50
View File
@@ -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_ |
src/contact-card/README.zh-CN.md
+53 -54
View File
@@ -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
<van-contact-card
type="edit"
name="张三"
tel="13000000000"
:editable="false"
/>
<van-contact-card type="edit" name="张三" tel="13000000000" :editable="false" />
```
## 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_ |
src/contact-card/demo/index.vue
+10 -8
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-contact-card
:type="cardType"
:name="currentContact.name"
@@ -12,7 +12,7 @@
<van-contact-list
v-model="chosenContactId"
:list="list"
:default-tag-text="$t('defaultTagText')"
:default-tag-text="t('defaultTagText')"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
@@ -22,7 +22,7 @@
<van-popup v-model="showEdit" position="bottom" :lazy-render="false">
<van-contact-edit
show-set-default
:set-default-label="$t('defaultLabel')"
:set-default-label="t('defaultLabel')"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@@ -31,7 +31,7 @@
</van-popup>
</demo-block>
<demo-block :title="$t('uneditable')">
<demo-block :title="t('uneditable')">
<van-contact-card
type="edit"
:name="mockContact.name"
@@ -71,7 +71,7 @@ export default {
computed: {
mockContact() {
return {
name: this.$t('name'),
name: this.t('name'),
tel: '13000000000',
id: 0,
isDefault: 1,
@@ -84,7 +84,7 @@ 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] : {};
},
},
@@ -114,7 +114,9 @@ export default {
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);
}
@@ -123,7 +125,7 @@ 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;
}
src/contact-card/test/index.spec.js
+1 -1
View File
@@ -101,7 +101,7 @@ describe('ContactEdit', () => {
expect(errorInfo.name).toBeFalsy();
});
it('valid tel', () => {
test('valid tel', () => {
const { data, field, button, errorInfo, wrapper } = createComponent();
data.tel = '';
button.trigger('click');
src/contact-edit/index.js
+3 -3
View File
@@ -71,7 +71,7 @@ export default createComponent({
},
onSave() {
const isValid = ['name', 'tel'].every(item => {
const isValid = ['name', 'tel'].every((item) => {
const msg = this.getErrorMessageByKey(item);
if (msg) {
this.errorInfo[item] = msg;
@@ -95,7 +95,7 @@ export default createComponent({
render() {
const { data, errorInfo } = this;
const onFocus = name => () => this.onFocus(name);
const onFocus = (name) => () => this.onFocus(name);
return (
<div class={bem()}>
@@ -128,7 +128,7 @@ export default createComponent({
<Switch
vModel={data.isDefault}
size={24}
onChange={event => {
onChange={(event) => {
this.$emit('change-default', event);
}}
/>
src/contact-list/index.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ function ContactList(
<Icon
name="edit"
class={bem('edit')}
onClick={event => {
onClick={(event) => {
event.stopPropagation();
emit(ctx, 'edit', item, index);
}}
src/count-down/README.md
+48 -48
View File
@@ -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 {
</van-count-down>
<style>
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
</style>
```
@@ -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 | - | - |
src/count-down/README.zh-CN.md
+46 -46
View File
@@ -11,7 +11,7 @@ Vue.use(CountDown);
## 代码演示
### 基本用法
### 基础用法
`time`属性表示倒计时总时长，单位为毫秒
@@ -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 {
</van-count-down>
<style>
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
</style>
```
@@ -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`，重设后会自动开始倒计时 | - | - |
src/count-down/demo/index.vue
+10 -14
View File
@@ -1,18 +1,18 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-count-down :time="time" />
</demo-block>
<demo-block :title="$t('customFormat')">
<van-count-down :time="time" :format="$t('formatWithDay')" />
<demo-block :title="t('customFormat')">
<van-count-down :time="time" :format="t('formatWithDay')" />
</demo-block>
<demo-block :title="$t('millisecond')">
<demo-block :title="t('millisecond')">
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-count-down :time="time">
<template v-slot="currentTime">
<span class="item">{{ currentTime.hours }}</span>
@@ -22,27 +22,23 @@
</van-count-down>
</demo-block>
<demo-block :title="$t('manualControl')">
<demo-block :title="t('manualControl')">
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="$toast($t('finished'))"
@finish="$toast(t('finished'))"
/>
<van-grid clickable :column-num="3">
<van-grid-item
icon="play-circle-o"
:text="$t('start')"
@click="start"
/>
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
<van-grid-item
icon="pause-circle-o"
:text="$t('pause')"
:text="t('pause')"
@click="pause"
/>
<van-grid-item icon="replay" :text="$t('reset')" @click="reset" />
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
</van-grid>
</demo-block>
</demo-section>
src/coupon-list/README.md
+43 -43
View File
@@ -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_ |
src/coupon-list/README.zh-CN.md
+49 -49
View File
@@ -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_ |
src/coupon-list/demo/index.vue
+6 -6
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@@ -70,8 +70,8 @@ export default {
condition: '无使用门槛\n最多优惠12元',
reason: '',
value: 150,
name: this.$t('coupon.name'),
description: this.$t('coupon.description'),
name: this.t('coupon.name'),
description: this.t('coupon.description'),
startAt: 1489104000,
endAt: 1514592000,
valueDesc: '1.5',
@@ -93,7 +93,7 @@ export default {
return {
...this.coupon,
id: 3,
reason: this.$t('coupon.reason'),
reason: this.t('coupon.reason'),
};
},
@@ -103,7 +103,7 @@ export default {
valueDesc: '1',
unitDesc: '折',
id: 4,
reason: this.$t('coupon.reason'),
reason: this.t('coupon.reason'),
};
},
},
@@ -114,7 +114,7 @@ export default {
this.chosenCoupon = index;
},
onExchange() {
this.$toast(this.$t('exchange'));
this.$toast(this.t('exchange'));
this.exchangedCoupons.push({
...this.coupon,
id: this.randomId(),
src/coupon-list/index.js
+2 -2
View File
@@ -181,7 +181,7 @@ export default createComponent({
</div>
);
const onChange = index => () => this.$emit('change', index);
const onChange = (index) => () => this.$emit('change', index);
const CouponTab = (
<Tab title={title}>
@@ -210,7 +210,7 @@ export default createComponent({
class={bem('list', { 'with-bottom': this.showCloseButton })}
style={this.listStyle}
>
{disabledCoupons.map(coupon => (
{disabledCoupons.map((coupon) => (
<Coupon
disabled
key={coupon.id}
src/coupon-list/test/index.spec.js
+1 -4
View File
@@ -105,10 +105,7 @@ test('render empty coupon list', () => {
disabledCoupons: [],
},
});
wrapper
.findAll('.van-tab')
.at(1)
.trigger('click');
wrapper.findAll('.van-tab').at(1).trigger('click');
expect(wrapper).toMatchSnapshot();
});
src/coupon/index.js
+4 -4
View File
@@ -47,12 +47,12 @@ export default createComponent({
}
if (coupon.denominations) {
const denominations = formatAmount(this.coupon.denominations);
const denominations = formatAmount(coupon.denominations);
return `<span>${this.currency}</span> ${denominations}`;
}
if (coupon.discount) {
return t('discount', formatDiscount(this.coupon.discount));
return t('discount', formatDiscount(coupon.discount));
}
return '';
@@ -82,10 +82,10 @@ export default createComponent({
<p class={bem('valid')}>{this.validPeriod}</p>
{!this.disabled && (
<Checkbox
size={18}
value={this.chosen}
class={bem('corner')}
size={18}
checked-color={RED}
checkedColor={RED}
/>
)}
</div>
src/datetime-picker/DatePicker.js
+1 -1
View File
@@ -141,7 +141,7 @@ export default createComponent({
updateInnerValue() {
const indexes = this.getPicker().getIndexes();
const getValue = index => {
const getValue = (index) => {
const { values } = this.originColumns[index];
return getTrueValue(values[indexes[index]]);
};
src/datetime-picker/README.md
+49 -53
View File
@@ -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
<van-datetime-picker
v-model="currentTime"
type="time"
:filter="filter"
/>
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
```
```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`<br> `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`<br> `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 | - | - |
src/datetime-picker/README.zh-CN.md
+45 -49
View File
@@ -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
<van-datetime-picker
v-model="currentTime"
type="time"
:filter="filter"
/>
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
```
```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` <br> `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` <br> `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
当时间选择器类型为 date 或 datetime 时，支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| min-date | 可选的最小时间，精确到分钟 | *Date* | 十年前 |
| max-date | 可选的最大时间，精确到分钟 | *Date* | 十年后 |
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------------- | ------ | ------ |
| min-date | 可选的最小时间，精确到分钟 | _Date_ | 十年前 |
| max-date | 可选的最大时间，精确到分钟 | _Date_ | 十年后 |
### TimePicker Props
当时间选择器类型为 time 时，支持以下 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) | - | - |
## 常见问题
src/datetime-picker/TimePicker.js
+2 -1
View File
@@ -55,7 +55,7 @@ export default createComponent({
if (val !== this.innerValue) {
this.innerValue = val;
this.updateColumnValue(val);
this.updateColumnValue();
}
},
},
@@ -81,6 +81,7 @@ export default createComponent({
const minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
this.innerValue = this.formatValue(`${hour}:${minute}`);
this.updateColumnValue();
},
onChange(picker) {
src/datetime-picker/demo/index.vue
+8 -8
View File
@@ -1,6 +1,6 @@
<template>
<demo-section>
<demo-block :title="$t('title1')">
<demo-block :title="t('title1')">
<van-datetime-picker
v-model="currentDate1"
type="datetime"
@@ -9,7 +9,7 @@
/>
</demo-block>
<demo-block :title="$t('title2')">
<demo-block :title="t('title2')">
<van-datetime-picker
v-model="currentDate2"
type="date"
@@ -18,7 +18,7 @@
/>
</demo-block>
<demo-block :title="$t('title3')">
<demo-block :title="t('title3')">
<van-datetime-picker
v-model="currentDate3"
type="year-month"
@@ -28,7 +28,7 @@
/>
</demo-block>
<demo-block :title="$t('title4')">
<demo-block :title="t('title4')">
<van-datetime-picker
v-model="currentTime1"
type="time"
@@ -37,7 +37,7 @@
/>
</demo-block>
<demo-block :title="$t('optionFilter')">
<demo-block :title="t('optionFilter')">
<van-datetime-picker
v-model="currentTime2"
type="time"
@@ -85,17 +85,17 @@ export default {
methods: {
formatter(type, value) {
if (type === 'year') {
return value + this.$t('year');
return value + this.t('year');
}
if (type === 'month') {
return value + this.$t('month');
return value + this.t('month');
}
return value;
},
filter(type, values) {
if (type === 'minute') {
return values.filter(value => value % 5 === 0);
return values.filter((value) => value % 5 === 0);
}
return values;
src/datetime-picker/shared.js
+6 -4
View File
@@ -27,7 +27,7 @@ export const TimePickerMixin = {
computed: {
originColumns() {
return this.ranges.map(({ type, range: rangeArr }) => {
let values = times(rangeArr[1] - rangeArr[0] + 1, index => {
let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
const value = padZero(rangeArr[0] + index);
return value;
});
@@ -44,8 +44,10 @@ export const TimePickerMixin = {
},
columns() {
return this.originColumns.map(column => ({
values: column.values.map(value => this.formatter(column.type, value)),
return this.originColumns.map((column) => ({
values: column.values.map((value) =>
this.formatter(column.type, value)
),
}));
},
},
@@ -83,7 +85,7 @@ export const TimePickerMixin = {
render() {
const props = {};
Object.keys(pickerProps).forEach(key => {
Object.keys(pickerProps).forEach((key) => {
props[key] = this[key];
});
src/datetime-picker/test/date-picker.spec.js
+2 -2
View File
@@ -3,7 +3,7 @@ import { mount, later, triggerDrag } from '../../../test';
function filter(type, options) {
const mod = type === 'year' ? 10 : 5;
return options.filter(option => option % mod === 0);
return options.filter((option) => option % mod === 0);
}
function formatter(type, value) {
@@ -128,7 +128,7 @@ test('use min-date with filter', async () => {
value: new Date(2020, 0, 0, 0, 0),
filter(type, values) {
if (type === 'minute') {
return values.filter(value => value % 30 === 0);
return values.filter((value) => value % 30 === 0);
}
return values;
src/datetime-picker/test/time-picker.spec.js
+25 -1
View File
@@ -3,7 +3,7 @@ import { mount, later, triggerDrag } from '../../../test';
function filter(type, options) {
const mod = type === 'minute' ? 10 : 5;
return options.filter(option => option % mod === 0);
return options.filter((option) => option % mod === 0);
}
function formatter(type, value) {
@@ -126,3 +126,27 @@ test('set max-hour & max-minute smaller than current then emit correct value', a
wrapper.find('.van-picker__confirm').trigger('click');
expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
});
test('set min-minute dynamically', async () => {
const wrapper = mount({
template: `
<van-datetime-picker
v-model="currentTime"
type="time"
:min-minute="currentTime.split(':')[0] > 12 ? 0 : 30"
min-hour="12"
max-hour="13"
@confirm="$emit('confirm', $event)"
/>
`,
data() {
return {
currentTime: '12:30',
};
},
});
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
wrapper.find('.van-picker__confirm').trigger('click');
expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00');
});
src/dialog/Dialog.js
+1 -1
View File
@@ -63,7 +63,7 @@ export default createComponent({
if (this.beforeClose) {
this.loading[action] = true;
this.beforeClose(action, state => {
this.beforeClose(action, (state) => {
if (state !== false && this.loading[action]) {
this.onClose(action);
}
src/dialog/README.md
+74 -72
View File
@@ -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
<van-dialog v-model="show" title="Title" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
```
@@ -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,<br>call done() to close dialog,<br>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,<br>call done() to close dialog,<br>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 |
src/dialog/README.zh-CN.md
+78 -77
View File
@@ -8,7 +8,7 @@
### 函数调用
Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗
Dialog 是一个函数，调用后展示提示弹窗
```js
import { Dialog } from 'vant';
@@ -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
<van-dialog v-model="show" title="标题" show-cancel-button>
<img src="https://img.yzcdn.cn/vant/apple-3.jpg">
<img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>
```
@@ -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 | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 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 | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 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 | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 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 | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 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 | 自定义标题 |
src/dialog/demo/index.vue
+17 -17
View File
@@ -1,33 +1,33 @@
<template>
<demo-section>
<demo-block :title="$t('alert1')">
<demo-block :title="t('alert1')">
<van-button type="primary" @click="onClickAlert">
{{ $t('alert1') }}
{{ t('alert1') }}
</van-button>
<van-button type="primary" @click="onClickAlert2">
{{ $t('alert2') }}
{{ t('alert2') }}
</van-button>
</demo-block>
<demo-block :title="$t('confirm')">
<demo-block :title="t('confirm')">
<van-button type="primary" @click="onClickConfirm">
{{ $t('confirm') }}
{{ t('confirm') }}
</van-button>
</demo-block>
<demo-block :title="$t('asyncClose')">
<demo-block :title="t('asyncClose')">
<van-button type="primary" @click="onClickAsyncClose">
{{ $t('asyncClose') }}
{{ t('asyncClose') }}
</van-button>
</demo-block>
<demo-block :title="$t('componentCall')">
<demo-block :title="t('componentCall')">
<van-button type="primary" @click="show = true">
{{ $t('componentCall') }}
{{ t('componentCall') }}
</van-button>
<van-dialog
v-model="show"
:title="$t('title')"
:title="t('title')"
show-cancel-button
:lazy-render="false"
>
@@ -68,21 +68,21 @@ export default {
methods: {
onClickAlert() {
this.$dialog.alert({
title: this.$t('title'),
message: this.$t('content'),
title: this.t('title'),
message: this.t('content'),
});
},
onClickAlert2() {
this.$dialog.alert({
message: this.$t('content'),
message: this.t('content'),
});
},
onClickConfirm() {
this.$dialog.confirm({
title: this.$t('title'),
message: this.$t('content'),
title: this.t('title'),
message: this.t('content'),
});
},
@@ -96,8 +96,8 @@ export default {
}
this.$dialog.confirm({
title: this.$t('title'),
message: this.$t('content'),
title: this.t('title'),
message: this.t('content'),
beforeClose,
});
},
src/dialog/index.js
+4 -4
View File
@@ -21,7 +21,7 @@ function initInstance() {
},
});
instance.$on('input', value => {
instance.$on('input', (value) => {
instance.value = value;
});
}
@@ -66,14 +66,14 @@ Dialog.defaultOptions = {
showCancelButton: false,
closeOnPopstate: false,
closeOnClickOverlay: false,
callback: action => {
callback: (action) => {
instance[action === 'confirm' ? 'resolve' : 'reject'](action);
},
};
Dialog.alert = Dialog;
Dialog.confirm = options =>
Dialog.confirm = (options) =>
Dialog({
showCancelButton: true,
...options,
@@ -85,7 +85,7 @@ Dialog.close = () => {
}
};
Dialog.setDefaultOptions = options => {
Dialog.setDefaultOptions = (options) => {
Object.assign(Dialog.currentOptions, options);
};
src/divider/README.md
+10 -8
View File
@@ -39,7 +39,9 @@ Vue.use(Divider);
### Custom Style
```html
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
<van-divider
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
Text
</van-divider>
```
@@ -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 |
src/divider/README.zh-CN.md
+10 -8
View File
@@ -49,7 +49,9 @@ Vue.use(Divider);
可以直接通过`style`属性设置分割线的样式
```html
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
<van-divider
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
文字
</van-divider>
```
@@ -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 | 内容 |
src/divider/demo/index.vue
+10 -10
View File
@@ -1,36 +1,36 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-divider />
</demo-block>
<demo-block :title="$t('withText')">
<demo-block :title="t('withText')">
<van-divider>
{{ $t('text') }}
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="$t('contentPosition')">
<demo-block :title="t('contentPosition')">
<van-divider content-position="left">
{{ $t('text') }}
{{ t('text') }}
</van-divider>
<van-divider content-position="right">
{{ $t('text') }}
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="$t('dashed')">
<demo-block :title="t('dashed')">
<van-divider dashed :hairline="false">
{{ $t('text') }}
{{ t('text') }}
</van-divider>
</demo-block>
<demo-block :title="$t('customStyle')">
<demo-block :title="t('customStyle')">
<van-divider
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
>
{{ $t('text') }}
{{ t('text') }}
</van-divider>
</demo-block>
</demo-section>
src/dropdown-item/index.js
+5 -3
View File
@@ -41,7 +41,9 @@ export default createComponent({
return this.title;
}
const match = this.options.filter(option => option.value === this.value);
const match = this.options.filter(
(option) => option.value === this.value
);
return match.length ? match[0].text : '';
},
},
@@ -53,7 +55,7 @@ export default createComponent({
},
beforeCreate() {
const createEmitter = eventName => () => this.$emit(eventName);
const createEmitter = (eventName) => () => this.$emit(eventName);
this.onOpen = createEmitter('open');
this.onClose = createEmitter('close');
@@ -105,7 +107,7 @@ export default createComponent({
closeOnClickOverlay,
} = this.parent;
const Options = this.options.map(option => {
const Options = this.options.map((option) => {
const active = option.value === this.value;
return (
<Cell
src/dropdown-item/index.less
+5 -5
View File
@@ -7,6 +7,11 @@
z-index: @dropdown-item-z-index;
overflow: hidden;
&__icon {
display: block;
line-height: inherit;
}
&__option {
text-align: left;
@@ -31,9 +36,4 @@
position: absolute;
max-height: @dropdown-menu-content-max-height;
}
&__icon {
display: block;
line-height: inherit;
}
}
src/dropdown-menu/README.md
+43 -43
View File
@@ -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_ |
src/dropdown-menu/README.zh-CN.md
+41 -41
View File
@@ -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_ |
src/dropdown-menu/demo/index.vue
+11 -11
View File
@@ -1,40 +1,40 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<demo-block :title="t('basicUsage')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="$t('customContent')">
<demo-block :title="t('customContent')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="$t('itemTitle')" ref="item">
<van-switch-cell v-model="switch1" :title="$t('switchTitle1')" />
<van-switch-cell v-model="switch2" :title="$t('switchTitle2')" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
<van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
<van-button type="info" block @click="onConfirm">
{{ $t('confirm') }}
{{ t('confirm') }}
</van-button>
</van-dropdown-item>
</van-dropdown-menu>
</demo-block>
<demo-block :title="$t('customActiveColor')">
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="$t('expandDirection')">
<demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="$t('disableMenu')">
<demo-block :title="t('disableMenu')">
<van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
@@ -97,11 +97,11 @@ export default {
computed: {
option1() {
return this.$t('option1');
return this.t('option1');
},
option2() {
return this.$t('option2');
return this.t('option2');
},
},
src/dropdown-menu/index.js
+6 -3
View File
@@ -53,8 +53,11 @@ export default createComponent({
methods: {
updateOffset() {
const { menu } = this.$refs;
const rect = menu.getBoundingClientRect();
if (!this.$refs.menu) {
return;
}
const rect = this.$refs.menu.getBoundingClientRect();
if (this.direction === 'down') {
this.offset = rect.bottom;
@@ -74,7 +77,7 @@ export default createComponent({
},
onClickOutside() {
this.children.forEach(item => {
this.children.forEach((item) => {
item.toggle(false);
});
},
src/dropdown-menu/test/index.spec.js
+1 -1
View File
@@ -213,7 +213,7 @@ test('change event', async () => {
expect(onChange).toHaveBeenCalledTimes(1);
});
test('toggle method', async done => {
test('toggle method', async (done) => {
const wrapper = mount({
template: `
<van-dropdown-menu>
src/empty/Network.tsx
+125
View File
@@ -0,0 +1,125 @@
export default {
render() {
const genStop = (color: string, offset: number, opacity?: number) => (
<stop stop-color={color} offset={`${offset}%`} stop-opacity={opacity} />
);
return (
<svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="c" x1="64.022%" y1="100%" x2="64.022%" y2="0%">
{genStop('#FFF', 0, 0.5)}
{genStop('#F2F3F5', 100)}
</linearGradient>
<linearGradient id="d" x1="64.022%" y1="96.956%" x2="64.022%" y2="0%">
{genStop('#F2F3F5', 0, 0.3)}
{genStop('#F2F3F5', 100)}
</linearGradient>
<linearGradient id="h" x1="50%" y1="0%" x2="50%" y2="84.459%">
{genStop('#EBEDF0', 0)}
{genStop('#DCDEE0', 100, 0)}
</linearGradient>
<linearGradient id="i" x1="100%" y1="0%" x2="100%" y2="100%">
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient id="k" x1="100%" y1="100%" x2="100%" y2="0%">
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient id="m" x1="0%" y1="43.982%" x2="100%" y2="54.703%">
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<linearGradient
id="n"
x1="94.535%"
y1="43.837%"
x2="5.465%"
y2="54.948%"
>
{genStop('#EAEDF0', 0)}
{genStop('#DCDEE0', 100)}
</linearGradient>
<radialGradient
id="g"
cx="50%"
cy="0%"
fx="50%"
fy="0%"
r="100%"
gradientTransform="matrix(0 1 -.54835 0 .5 -.5)"
>
{genStop('#EBEDF0', 0)}
{genStop('#FFF', 100, 0)}
</radialGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g opacity=".8">
<path
d="M0 124V46h20v20h14v58H0z"
fill="url(#c)"
transform="matrix(-1 0 0 1 36 7)"
/>
<path
d="M40.5 5a8.504 8.504 0 018.13 6.009l.12-.005L49 11a8 8 0 11-1 15.938V27H34v-.174a6.5 6.5 0 11-1.985-12.808A8.5 8.5 0 0140.5 5z"
fill="url(#d)"
transform="translate(2 7)"
/>
<path
d="M96.016 0a4.108 4.108 0 013.934 2.868l.179-.004c2.138 0 3.871 1.71 3.871 3.818 0 2.109-1.733 3.818-3.871 3.818-.164 0-.325-.01-.484-.03v.03h-6.774v-.083a3.196 3.196 0 01-.726.083C90.408 10.5 89 9.111 89 7.398c0-1.636 1.284-2.976 2.911-3.094a3.555 3.555 0 01-.008-.247c0-2.24 1.842-4.057 4.113-4.057z"
fill="url(#d)"
transform="translate(2 7)"
/>
<path
d="M121 8h22.231v14H152v77.37h-31V8z"
fill="url(#c)"
transform="translate(2 7)"
/>
</g>
<path fill="url(#g)" d="M0 139h160v21H0z" />
<path
d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
fill="url(#h)"
fill-rule="nonzero"
transform="translate(43 36)"
/>
<g opacity=".6" stroke-linecap="round" stroke-width="7">
<path
d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
stroke="url(#i)"
transform="translate(43 36)"
/>
<path
d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
stroke="url(#i)"
transform="translate(43 36)"
/>
<path
d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
stroke="url(#k)"
transform="rotate(-180 76.483 42.257)"
/>
<path
d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
stroke="url(#k)"
transform="rotate(-180 89.791 42.146)"
/>
</g>
<g transform="translate(31 105)" fill-rule="nonzero">
<rect fill="url(#m)" width="98" height="34" rx="2" />
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114" />
<rect
fill="url(#n)"
x="15"
y="12"
width="18"
height="6"
rx="1.114"
/>
</g>
</g>
</svg>
);
},
};

Some files were not shown because too many files have changed in this diff Show More