blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] add IndexBar component

Browse Source
This commit is contained in:
陈嘉涵 2019-05-08 15:39:27 +08:00
parent e9854daf29
commit c92791e8da
19 changed files with 515 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/markdown/v2-progress-tracking.md
View File

@ -52,7 +52,8 @@
## 新特性
- 新增`Skeleton`骨架屏组件
- 新增`DropdownMenu`下拉菜单组件
- 新增`IndexBar`、`IndexAnchor`索引栏组件
- 新增`DropdownMenu`、`DropdownItem`下拉菜单组件
### ActionSheet

5
docs/src/WapApp.vue
View File

@ -75,6 +75,11 @@ body {
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
.van-doc-nav-bar {
height: 56px;
line-height: 56px;

1
docs/src/demo-entry.js
View File

@ -23,6 +23,7 @@ export default {
'goods-action': () => wrapper(import('../../packages/goods-action/demo'), 'goods-action'),
'icon': () => wrapper(import('../../packages/icon/demo'), 'icon'),
'image-preview': () => wrapper(import('../../packages/image-preview/demo'), 'image-preview'),
'index-bar': () => wrapper(import('../../packages/index-bar/demo'), 'index-bar'),
'lazyload': () => wrapper(import('../../packages/lazyload/demo'), 'lazyload'),
'list': () => wrapper(import('../../packages/list/demo'), 'list'),
'loading': () => wrapper(import('../../packages/loading/demo'), 'loading'),

8
docs/src/doc.config.js
View File

@ -259,6 +259,10 @@ module.exports = {
groupName: '导航组件',
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
list: [
{
path: '/index-bar',
title: 'IndexBar 索引栏'
},
{
path: '/nav-bar',
title: 'NavBar 导航栏'
@ -574,6 +578,10 @@ module.exports = {
groupName: 'Navigation Components',
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
list: [
{
path: '/index-bar',
title: 'IndexBar'
},
{
path: '/nav-bar',
title: 'NavBar'

2
docs/src/docs-entry.js
View File

@ -53,6 +53,8 @@ export default {
'icon.zh-CN': () => import('../../packages/icon/zh-CN.md'),
'image-preview.en-US': () => import('../../packages/image-preview/en-US.md'),
'image-preview.zh-CN': () => import('../../packages/image-preview/zh-CN.md'),
'index-bar.en-US': () => import('../../packages/index-bar/en-US.md'),
'index-bar.zh-CN': () => import('../../packages/index-bar/zh-CN.md'),
'lazyload.en-US': () => import('../../packages/lazyload/en-US.md'),
'lazyload.zh-CN': () => import('../../packages/lazyload/zh-CN.md'),
'list.en-US': () => import('../../packages/list/en-US.md'),

26
packages/index-anchor/index.js Normal file
View File

@ -0,0 +1,26 @@
import { use } from '../utils';
import { ChildrenMixin } from '../mixins/relation';
const [sfc, bem] = use('index-anchor');
export default sfc({
mixins: [ChildrenMixin('vanIndexBar', { indexKey: 'childrenIndex' })],
props: {
index: [String, Number]
},
methods: {
scrollIntoView() {
this.$el.scrollIntoView();
}
},
render(h) {
return (
<div class={bem()}>
{this.slots('default') ? this.slots('default') : this.index}
</div>
);
}
});

8
packages/index-anchor/index.less Normal file
View File

@ -0,0 +1,8 @@
@import '../style/var';
.van-index-anchor {
padding: 0 15px;
font-size: 14px;
font-weight: 500;
line-height: 32px;
}

64
packages/index-bar/demo/index.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<demo-section>
<van-tabs v-model="activeTab">
<van-tab :title="$t('basicUsage')">
<van-index-bar>
<div
v-for="index in indexList"
:key="index"
>
<van-index-anchor :index="index" />
<van-cell :title="$t('text')" />
<van-cell :title="$t('text')" />
<van-cell :title="$t('text')" />
</div>
</van-index-bar>
</van-tab>
<van-tab :title="$t('customIndexList')">
<van-index-bar :index-list="customIndexList">
<div
v-for="index in customIndexList"
:key="index"
>
<van-index-anchor :index="index">
{{ $t('title') + index }}
</van-index-anchor>
<van-cell :title="$t('text')" />
<van-cell :title="$t('text')" />
<van-cell :title="$t('text')" />
</div>
</van-index-bar>
</van-tab>
</van-tabs>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
text: '文本',
customIndexList: '自定义索引列表'
},
'en-US': {
text: 'Text',
customIndexList: 'Custom Index List'
}
},
data() {
const indexList = [];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return {
activeTab: 0,
indexList,
customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10]
};
}
};
</script>

75
packages/index-bar/en-US.md Normal file
View File

@ -0,0 +1,75 @@
## IndexBar
### Install
``` javascript
import { IndexBar } from 'vant';
Vue.use(IndexBar);
```
### Usage
#### Basic Usage
```html
<van-index-bar>
<van-index-anchor index="A" />
<van-cell title="Text" />
<van-cell title="Text" />
<van-cell title="Text" />
<van-index-anchor index="B" />
<van-cell title="Text" />
<van-cell title="Text" />
<van-cell title="Text" />
...
</van-index-bar>
```
#### Custom Index List
```html
<van-index-bar :index-list="indexList">
<van-index-anchor index="1">Title 1</van-index-anchor>
<van-cell title="Text" />
<van-cell title="Text" />
<van-cell title="Text" />
<van-index-anchor index="2">Title 2</van-index-anchor>
<van-cell title="Text" />
<van-cell title="Text" />
<van-cell title="Text" />
...
</van-index-bar>
```
```js
export default {
data() {
return {
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
}
}
```
### IndexBar Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| index-list | Index List | `Array` | `A-Z` |
### IndexAnchor Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| index | Index | `String | Number` | - |
### IndexAnchor Slots
| Name | Description |
|------|------|
| default | Anchor content, show index by default |

92
packages/index-bar/index.js Normal file
View File

@ -0,0 +1,92 @@
import { use } from '../utils';
import { TouchMixin } from '../mixins/touch';
import { ParentMixin } from '../mixins/relation';
const [sfc, bem] = use('index-bar');
export default sfc({
mixins: [TouchMixin, ParentMixin('vanIndexBar')],
props: {
indexList: {
type: Array,
default() {
const indexList = [];
const charCodeOfA = 'A'.charCodeAt(0);
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return indexList;
}
}
},
methods: {
onClick(event) {
this.scrollToElement(event.target);
},
onTouchStart(event) {
this.touchStart(event);
},
onTouchMove(event) {
this.touchMove(event);
if (this.direction === 'vertical') {
/* istanbul ignore else */
if (event.cancelable) {
event.preventDefault();
}
const { clientX, clientY } = event.touches[0];
const target = document.elementFromPoint(clientX, clientY);
this.scrollToElement(target);
}
},
scrollToElement(element, setActive) {
if (!element) {
return;
}
const { index } = element.dataset;
if (!index) {
return;
}
const match = this.children.filter(item => String(item.index) === index);
if (match[0]) {
match[0].scrollIntoView();
}
},
onTouchEnd() {
this.active = null;
}
},
render(h) {
return (
<div class={bem()}>
<div
class={bem('sidebar')}
onClick={this.onClick}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
>
{this.indexList.map(index => (
<span class={bem('index')} data-index={index}>
{index}
</span>
))}
</div>
{this.slots('default')}
</div>
);
}
});

22
packages/index-bar/index.less Normal file
View File

@ -0,0 +1,22 @@
@import '../style/var';
.van-index-bar {
&__sidebar {
position: fixed;
display: flex;
top: 50%;
right: 0;
z-index: 1;
user-select: none;
text-align: center;
flex-direction: column;
transform: translateY(-50%);
}
&__index {
font-size: 10px;
font-weight: 500;
line-height: 14px;
padding: 0 3px 0 15px;
}
}

21
packages/index-bar/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__line"></div>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tab__pane" style="display:none;">
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
</div>
</div>
</div>
</div>
`;

9
packages/index-bar/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`custom anchor text 1`] = `
<div class="van-index-bar">
<div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div class="van-index-anchor">Title A</div>
<div class="van-index-anchor">Title B</div>
</div>
`;

4
packages/index-bar/test/demo.spec.js Normal file
View File

@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);

85
packages/index-bar/test/index.spec.js Normal file
View File

@ -0,0 +1,85 @@
import { mount, trigger, triggerDrag } from '../../../test/utils';
import Vue from 'vue';
import IndexBar from '..';
import IndexAnchor from '../../index-anchor';
Vue.use(IndexBar);
Vue.use(IndexAnchor);
function mockScrollIntoView() {
const fn = jest.fn();
Element.prototype.scrollIntoView = fn;
return fn;
}
test('custom anchor text', () => {
const wrapper = mount({
template: `
<van-index-bar>
<van-index-anchor index="A">Title A</van-index-anchor>
<van-index-anchor index="B">Title B</van-index-anchor>
</van-index-bar>
`
});
expect(wrapper).toMatchSnapshot();
});
test('click and scroll to anchor', () => {
const wrapper = mount({
template: `
<van-index-bar>
<van-index-anchor index="A" />
<van-index-anchor index="B" />
</van-index-bar>
`
});
const fn = mockScrollIntoView();
const indexes = wrapper.findAll('.van-index-bar__index');
indexes.at(0).trigger('click');
expect(fn).toHaveBeenCalledTimes(1);
});
test('touch and scroll to anchor', () => {
const wrapper = mount({
template: `
<van-index-bar>
<van-index-anchor index="A" />
<van-index-anchor index="B" />
<van-index-anchor index="XXX" />
</van-index-bar>
`
});
const fn = mockScrollIntoView();
const sidebar = wrapper.find('.van-index-bar__sidebar');
const indexes = wrapper.findAll('.van-index-bar__index');
document.elementFromPoint = function (x, y) {
const index = y / 100;
if (index === 1 || index === 2) {
return indexes.at(index).element;
}
if (index === 3) {
return {
dataset: {}
};
}
};
// horizontal drag
triggerDrag(sidebar, 100, 0);
expect(fn).toHaveBeenCalledTimes(0);
// vertiacl drag
trigger(sidebar, 'touchstart', 0, 0);
trigger(sidebar, 'touchmove', 0, 100);
trigger(sidebar, 'touchmove', 0, 200);
trigger(sidebar, 'touchmove', 0, 300);
trigger(sidebar, 'touchmove', 0, 400);
trigger(sidebar, 'touchend', 0, 400);
expect(fn).toHaveBeenCalledTimes(1);
});

79
packages/index-bar/zh-CN.md Normal file
View File

@ -0,0 +1,79 @@
## IndexBar 索引栏
### 使用指南
``` javascript
import { IndexBar, IndexAnchor } from 'vant';
Vue.use(IndexBar).use(IndexAnchor);
```
### 代码演示
#### 基础用法
点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置
```html
<van-index-bar>
<van-index-anchor index="A" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-index-anchor index="B" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
...
</van-index-bar>
```
#### 自定义索引列表
可以通过`index-list`属性自定义展示的索引字符列表，
```html
<van-index-bar :index-list="indexList">
<van-index-anchor index="1">标题1</van-index-anchor>
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
<van-index-anchor index="2">标题2</van-index-anchor>
<van-cell title="文本" />
<van-cell title="文本" />
<van-cell title="文本" />
...
</van-index-bar>
```
```js
export default {
data() {
return {
indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
}
}
```
### IndexBar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
### IndexAnchor Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| index | 索引字符 | `String | Number` | - | - |
### IndexAnchor Slots
| 名称 | 说明 |
|------|------|
| default | 锚点位置显示内容，默认为索引字符 |

2
packages/index.less
View File

@ -34,6 +34,8 @@
@import './stepper/index';
@import './swipe/index';
@import './swipe-item/index';
@import './index-anchor/index';
@import './index-bar/index';
/* form components */
@import './checkbox/index';

6
packages/index.ts
View File

@ -31,6 +31,8 @@ import GoodsActionButton from './goods-action-button';
import GoodsActionIcon from './goods-action-icon';
import Icon from './icon';
import ImagePreview from './image-preview';
import IndexAnchor from './index-anchor';
import IndexBar from './index-bar';
import Info from './info';
import Lazyload from './lazyload';
import List from './list';
@ -114,6 +116,8 @@ const components = [
GoodsActionIcon,
Icon,
ImagePreview,
IndexAnchor,
IndexBar,
Info,
List,
Loading,
@ -202,6 +206,8 @@ export {
GoodsActionIcon,
Icon,
ImagePreview,
IndexAnchor,
IndexBar,
Info,
Lazyload,
List,

6
packages/mixins/relation.js
View File

@ -1,4 +1,6 @@
export function ChildrenMixin(parent) {
export function ChildrenMixin(parent, options = {}) {
const indexKey = options.indexKey || 'index';
return {
inject: {
[parent]: {
@ -11,7 +13,7 @@ export function ChildrenMixin(parent) {
return this[parent];
},
index() {
[indexKey]() {
this.bindRelation();
return this.parent.children.indexOf(this);
}