[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -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>
|
||||
@@ -0,0 +1,86 @@
|
||||
# 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]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### IndexBar Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| index-list | Index List | `Array` | `A-Z` |
|
||||
| z-index | z-index | `Number` | `1` |
|
||||
| sticky | Whether to enable anchor sticky top | `Boolean` | `true` |
|
||||
| highlight-color | Index character highlight color | `String` | `#07c160` | - |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| index | Index | `String | Number` | - |
|
||||
|
||||
### IndexBar Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when select index | index |
|
||||
|
||||
### IndexAnchor Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Anchor content, show index by default |
|
||||
@@ -0,0 +1,180 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
import { GREEN } from '../utils/color';
|
||||
import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/dom/scroll';
|
||||
|
||||
const [createComponent, bem] = createNamespace('index-bar');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
TouchMixin,
|
||||
ParentMixin('vanIndexBar'),
|
||||
BindEventMixin(function (bind) {
|
||||
if (!this.scroller) {
|
||||
this.scroller = getScrollEventTarget(this.$el);
|
||||
}
|
||||
|
||||
bind(this.scroller, 'scroll', this.onScroll);
|
||||
})
|
||||
],
|
||||
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
highlightColor: {
|
||||
type: String,
|
||||
default: GREEN
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeAnchorIndex: null
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
highlightStyle() {
|
||||
const { highlightColor } = this;
|
||||
if (highlightColor) {
|
||||
/* istanbul ignore else */
|
||||
return {
|
||||
color: highlightColor
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onScroll() {
|
||||
if (!this.sticky) {
|
||||
return;
|
||||
}
|
||||
|
||||
const scrollTop = getScrollTop(this.scroller);
|
||||
const rects = this.children.map(item => ({
|
||||
height: item.height,
|
||||
top: getElementTop(item.$el)
|
||||
}));
|
||||
|
||||
const active = this.getActiveAnchorIndex(scrollTop, rects);
|
||||
|
||||
this.activeAnchorIndex = this.indexList[active];
|
||||
this.children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
item.active = true;
|
||||
item.top = Math.max(0, rects[index].top - scrollTop);
|
||||
} else if (index === active - 1) {
|
||||
const activeItemTop = rects[active].top - scrollTop;
|
||||
item.active = activeItemTop > 0;
|
||||
item.top = activeItemTop - item.height;
|
||||
} else {
|
||||
item.active = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getActiveAnchorIndex(scrollTop, rects) {
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const prevHeight = i > 0 ? rects[i - 1].height : 0;
|
||||
|
||||
if (scrollTop + prevHeight >= rects[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.scrollToElement(event.target);
|
||||
},
|
||||
|
||||
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);
|
||||
if (target) {
|
||||
const { index } = target.dataset;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.touchActiveIndex !== index) {
|
||||
this.touchActiveIndex = index;
|
||||
this.scrollToElement(target);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scrollToElement(element, setActive) {
|
||||
const { index } = element.dataset;
|
||||
if (!index) {
|
||||
return;
|
||||
}
|
||||
|
||||
const match = this.children.filter(item => String(item.index) === index);
|
||||
if (match[0]) {
|
||||
match[0].scrollIntoView();
|
||||
this.$emit('select', match[0].index);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
this.active = null;
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div class={bem()}>
|
||||
<div
|
||||
class={bem('sidebar')}
|
||||
style={{ zIndex: this.zIndex }}
|
||||
onClick={this.onClick}
|
||||
onTouchstart={this.touchStart}
|
||||
onTouchmove={this.onTouchMove}
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
>
|
||||
{this.indexList.map(index => (
|
||||
<span
|
||||
class={bem('index')}
|
||||
style={index === this.activeAnchorIndex ? this.highlightStyle : null}
|
||||
data-index={index}
|
||||
>
|
||||
{index}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{this.slots('default')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-index-bar {
|
||||
&__sidebar {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__index {
|
||||
padding: 0 3px 0 15px;
|
||||
font-weight: 500;
|
||||
font-size: @index-bar-index-font-size;
|
||||
line-height: @index-bar-index-line-height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,389 @@
|
||||
// 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 role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel" class="van-tab__pane" style="">
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><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>
|
||||
<div>
|
||||
<div class="van-index-anchor">A</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">B</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">C</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">D</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">E</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">F</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">G</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">H</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">I</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">J</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">K</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">L</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">M</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">N</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">O</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">P</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Q</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">R</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">S</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">T</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">U</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">V</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">W</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">X</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Y</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Z</div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>文本</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,49 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`custom anchor text 1`] = `
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><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>
|
||||
<div class="van-index-anchor">Title A</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-index-anchor">Title B</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`scroll and update active anchor 1`] = `
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><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 data-index="0">
|
||||
<div class="van-index-anchor">1</div>
|
||||
</div>
|
||||
<div data-index="1">
|
||||
<div class="van-index-anchor">2</div>
|
||||
</div>
|
||||
<div data-index="2">
|
||||
<div class="van-index-anchor">3</div>
|
||||
</div>
|
||||
<div data-index="3">
|
||||
<div class="van-index-anchor">4</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`scroll and update active anchor 2`] = `
|
||||
<div class="van-index-bar">
|
||||
<div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index" style="color: rgb(7, 193, 96);">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 data-index="0" style="height: 10px;">
|
||||
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96); z-index: 1;">1</div>
|
||||
</div>
|
||||
<div data-index="1" style="height: 10px;">
|
||||
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96); z-index: 1;">2</div>
|
||||
</div>
|
||||
<div data-index="2">
|
||||
<div class="van-index-anchor">3</div>
|
||||
</div>
|
||||
<div data-index="3">
|
||||
<div class="van-index-anchor">4</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,145 @@
|
||||
import Vue from 'vue';
|
||||
import IndexBar from '..';
|
||||
import IndexAnchor from '../../index-anchor';
|
||||
import { mount, trigger, triggerDrag } from '../../../test/utils';
|
||||
|
||||
Vue.use(IndexBar);
|
||||
Vue.use(IndexAnchor);
|
||||
|
||||
function mockScrollIntoView() {
|
||||
const fn = jest.fn();
|
||||
Element.prototype.scrollIntoView = fn;
|
||||
return fn;
|
||||
}
|
||||
|
||||
function mockOffsetHeight(offsetHeight) {
|
||||
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
|
||||
get() {
|
||||
return offsetHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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 onSelect = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-index-bar @select="onSelect">
|
||||
<van-index-anchor index="A" />
|
||||
<van-index-anchor index="B" />
|
||||
</van-index-bar>
|
||||
`,
|
||||
methods: {
|
||||
onSelect
|
||||
}
|
||||
});
|
||||
|
||||
const fn = mockScrollIntoView();
|
||||
const indexes = wrapper.findAll('.van-index-bar__index');
|
||||
indexes.at(0).trigger('click');
|
||||
|
||||
expect(fn).toHaveBeenCalledTimes(1);
|
||||
expect(onSelect).toHaveBeenCalledWith('A');
|
||||
});
|
||||
|
||||
test('touch and scroll to anchor', () => {
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-index-bar @select="onSelect">
|
||||
<van-index-anchor index="A" />
|
||||
<van-index-anchor index="B" />
|
||||
<van-index-anchor index="XXX" />
|
||||
</van-index-bar>
|
||||
`,
|
||||
methods: {
|
||||
onSelect
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
// vertical 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);
|
||||
expect(onSelect).toHaveBeenCalledWith('B');
|
||||
});
|
||||
|
||||
test('scroll and update active anchor', () => {
|
||||
const nativeRect = Element.prototype.getBoundingClientRect;
|
||||
Element.prototype.getBoundingClientRect = function () {
|
||||
const { index } = this.dataset;
|
||||
return {
|
||||
top: index ? index * 10 : 0
|
||||
};
|
||||
};
|
||||
|
||||
mockOffsetHeight(10);
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-index-bar :sticky="sticky">
|
||||
<van-index-anchor
|
||||
v-for="index in 4"
|
||||
:key="index"
|
||||
:index="index"
|
||||
:data-index="index - 1"
|
||||
/>
|
||||
</van-index-bar>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
sticky: false
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
window.scrollTop = 0;
|
||||
trigger(window, 'scroll');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setData({ sticky: true });
|
||||
trigger(window, 'scroll');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper.vm.$destroy();
|
||||
|
||||
Element.prototype.getBoundingClientRect = nativeRect;
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
# 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]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### IndexBar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
|
||||
| z-index | z-index 层级 | `Number` | `1` | - |
|
||||
| sticky | 是否开启锚点自动吸顶 | `Boolean` | `true` | - |
|
||||
| highlight-color | 索引字符高亮颜色 | `String` | `#07c160` | - |
|
||||
|
||||
### IndexAnchor Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| index | 索引字符 | `String | Number` | - | - |
|
||||
|
||||
### IndexBar Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中字符时触发 | index: 索引字符 |
|
||||
|
||||
### IndexAnchor Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 锚点位置显示内容，默认为索引字符 |
|
||||
Reference in New Issue
Block a user