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

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan
2020-09-22 19:42:24 +08:00
parent 4f0921cbdf 106114333b
commit 8ef46764c9
20 changed files with 245 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pagination/README.md
+22
View File
@@ -45,6 +45,20 @@ export default {
/>
```
### Custom Render
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
```
## API
### Props
@@ -66,3 +80,11 @@ export default {
| Event | Description | Arguments |
| ------ | ------------------------ | --------- |
| change | Triggered on page change | - |
### Slots
| Name | Description | Default |
| --- | --- | --- |
| prev-text | custom prev slot | `-` |
| next-text | custom next slot | `-` |
| page | pagination item slot | `{ number: number, text: string, active: boolean }` |
src/pagination/README.zh-CN.md
+22
View File
@@ -45,6 +45,20 @@ export default {
/>
```
### 自定义渲染
```html
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
```
## API
### Props
@@ -66,3 +80,11 @@ export default {
| 事件名 | 说明 | 回调参数 |
| ------ | -------------- | -------- |
| change | 页码改变时触发 | - |
### Slots
| 名称 | 描述 | 默认值 |
| --- | --- | --- |
| prev-text | 自定义上一页插槽 | `-` |
| next-text | 自定义下一页插槽 | `-` |
| page | 自定义页码插槽 | `{ number: number, text: string, active: boolean }` |
src/pagination/demo/index.vue
+19
View File
@@ -31,6 +31,22 @@
:next-text="t('nextText')"
/>
</demo-block>
<demo-block :title="t('title4')">
<van-pagination
v-model="currentPage4"
:total-items="125"
:show-page-size="5"
>
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
</demo-block>
</demo-section>
</template>
@@ -40,12 +56,14 @@ export default {
'zh-CN': {
title2: '简单模式',
title3: '显示省略号',
title4: '自定义渲染',
prevText: '上一页',
nextText: '下一页',
},
'en-US': {
title2: 'Simple Mode',
title3: 'Show ellipses',
title4: 'Custom Render',
prevText: 'Prev',
nextText: 'Next',
},
@@ -56,6 +74,7 @@ export default {
currentPage1: 1,
currentPage2: 1,
currentPage3: 1,
currentPage4: 1,
};
},
};
src/pagination/index.js
+7 -3
View File
@@ -142,7 +142,9 @@ export default createComponent({
]}
onClick={onSelect(value - 1)}
>
{props.prevText || t('prev')}
{slots['prev-text']
? slots['prev-text']()
: props.prevText || t('prev')}
</li>
{pages.value.map((page) => (
<li
@@ -153,7 +155,7 @@ export default createComponent({
]}
onClick={onSelect(page.number)}
>
{page.text}
{slots.page ? slots.page(page) : page.text}
</li>
))}
{renderDesc()}
@@ -165,7 +167,9 @@ export default createComponent({
]}
onClick={onSelect(value + 1)}
>
{props.nextText || t('next')}
{slots['next-text']
? slots['next-text']()
: props.nextText || t('next')}
</li>
</ul>
);
src/pagination/test/__snapshots__/demo.spec.js.snap
+13
View File
@@ -30,5 +30,18 @@ exports[`renders demo correctly 1`] = `
<li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
</ul>
</div>
<div>
<ul class="van-pagination">
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline"><i class="van-icon van-icon-arrow-left">
<!----></i></li>
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">1</li>
<li class="van-pagination__item van-pagination__page van-hairline">2</li>
<li class="van-pagination__item van-pagination__page van-hairline">3</li>
<li class="van-pagination__item van-pagination__page van-hairline">4</li>
<li class="van-pagination__item van-pagination__page van-hairline">5</li>
<li class="van-pagination__item van-pagination__next van-hairline"><i class="van-icon van-icon-arrow">
<!----></i></li>
</ul>
</div>
</div>
`;
src/pagination/test/__snapshots__/index.spec.js.snap
+25
View File
@@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render page slot 1`] = `
<ul class="van-pagination">
<li class="van-pagination__item van-pagination__prev van-hairline">上一页</li>
<li class="van-pagination__item van-pagination__page van-hairline">1</li>
<li class="van-pagination__item van-pagination__page van-hairline">2</li>
<li class="van-pagination__item van-pagination__page van-hairline">3</li>
<li class="van-pagination__item van-pagination__page van-hairline">4</li>
<li class="van-pagination__item van-pagination__page van-hairline">5</li>
<li class="van-pagination__item van-pagination__next van-hairline">下一页</li>
</ul>
`;
exports[`render prev-text & next-text slot 1`] = `
<ul class="van-pagination">
<li class="van-pagination__item van-pagination__prev van-hairline">Custom PrevText</li>
<li class="van-pagination__item van-pagination__page van-hairline">1</li>
<li class="van-pagination__item van-pagination__page van-hairline">2</li>
<li class="van-pagination__item van-pagination__page van-hairline">3</li>
<li class="van-pagination__item van-pagination__page van-hairline">4</li>
<li class="van-pagination__item van-pagination__page van-hairline">5</li>
<li class="van-pagination__item van-pagination__next van-hairline">Custom NextText</li>
</ul>
`;
src/pagination/test/index.spec.js
+31
View File
@@ -0,0 +1,31 @@
import { mount } from '../../../test';
import Paginaion from '..';
test('render prev-text & next-text slot', () => {
const wrapper = mount(Paginaion, {
propsData: {
totalItems: 50,
showPageSize: 5,
},
scopedSlots: {
'prev-text': () => 'Custom PrevText',
'next-text': () => 'Custom NextText',
},
});
expect(wrapper).toMatchSnapshot();
});
test('render page slot', () => {
const wrapper = mount(Paginaion, {
propsData: {
totalItems: 50,
showPageSize: 5,
},
scopedSlots: {
page: ({ text }) => `${text}`,
},
});
expect(wrapper).toMatchSnapshot();
});
src/sidebar-item/index.js
+2 -2
View File
@@ -17,7 +17,7 @@ export default createComponent({
emits: ['click'],
setup(props, { emit }) {
setup(props, { emit, slots }) {
const route = useRoute();
const { parent, index } = useParent(SIDEBAR_KEY);
@@ -39,7 +39,7 @@ export default createComponent({
return (
<a class={bem({ select: selected, disabled })} onClick={onClick}>
<div class={bem('text')}>
{title}
{slots.title ? slots.title() : title}
<Badge dot={dot} badge={badge} class={bem('badge')} />
</div>
</a>
src/sidebar/README.md
+6
View File
@@ -111,3 +111,9 @@ export default {
| Event | Description | Arguments |
| ----- | ------------------------- | ---------------------------- |
| click | Triggered when click item | index: index of current item |
### SidebarItem Slots
| Name | Description |
| --------------- | ----------------- |
| title `v2.10.8` | Custom item title |
src/sidebar/README.zh-CN.md
+10 -4
View File
@@ -15,7 +15,7 @@ app.use(SidebarItem);
### 基础用法
通过`v-model`绑定当前选中项的索引
通过 `v-model` 绑定当前选中项的索引。
```html
<van-sidebar v-model="activeKey">
@@ -37,7 +37,7 @@ export default {
### 徽标提示
设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标
设置 `dot` 属性后，会在右上角展示一个小红点；设置 `badge` 属性后，会在右上角展示相应的徽标。
```html
<van-sidebar v-model="activeKey">
@@ -49,7 +49,7 @@ export default {
### 禁用选项
通过`disabled`属性禁用选项
通过 `disabled` 属性禁用选项。
```html
<van-sidebar v-model="activeKey">
@@ -61,7 +61,7 @@ export default {
### 监听切换事件
设置`change`方法来监听切换导航项时的事件
设置 `change` 方法来监听切换导航项时的事件。
```html
<van-sidebar v-model="activeKey" @change="onChange">
@@ -119,3 +119,9 @@ export default {
| 事件名 | 说明 | 回调参数 |
| ------ | ---------- | ----------------------- |
| click | 点击时触发 | index: 当前导航项的索引 |
### SidebarItem Slots
| Name | Description |
| --------------- | ----------- |
| title `v2.10.8` | 自定义标题 |
src/sidebar/test/__snapshots__/index.spec.js.snap
+9
View File
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`title slot 1`] = `
<div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
<div class="van-sidebar-item__text">Title Slot
<!---->
</div>
</a></div>
`;
src/sidebar/test/index.spec.js
+19
View File
@@ -76,3 +76,22 @@ test('without parent', () => {
expect(err).toBeTruthy();
}
});
test('title slot', () => {
const wrapper = mount({
template: `
<van-sidebar v-model="active">
<van-sidebar-item>
<template #title>Title Slot</template>
</van-sidebar-item>
</van-sidebar>
`,
data() {
return {
active: 0,
};
},
});
expect(wrapper).toMatchSnapshot();
});
src/tab/README.zh-CN.md
+4 -4
View File
@@ -289,7 +289,7 @@ export default {
### Tab Slots
| 名称 | 说明 |
| ------- | -------------------------- |
| default | 标签页内容 |
| title | 自定义标题，不支持动态渲染 |
| 名称 | 说明 |
| ------- | ---------- |
| default | 标签页内容 |
| title | 自定义标题 |