simple index list for vue
vue 索引列表组件
npm install --save vue-index-box
import { IndexBox, IndexAnchor } from 'vue-index-box';
//or
import indexBox from 'vue-index-box';
Vue.use(indexBox);| Prop | Data Type | Required | Default | Description |
|---|---|---|---|---|
| fixAnchor | Boolean | false | false | fiexed index anchor. |
| indexs | Array | false | A-Z | custom index. |
| showIndexTip | Boolean | false | true | whether to show tips after clicking on the index item. |
| Prop | Data Type | Required | Default | Description |
|---|---|---|---|---|
| title | String | false | anchor title. | |
| index | String | true | index of anchor. | |
| zIndex | Number | false | 1 | z-index |
<div id="app">
<IndexBox @select="onSelect">
<div v-for="(item,i) in indexList" :key="item.title">
<IndexAnchor :title="item.title" :index="getIndex(i)"/>
<div v-for="item in list">{{item.content}}</div>
</div>
</IndexBox>
</div> <script>
export default {
name: 'App',
data() {
return {
indexList: [{title: 'A', content: 'text...'},...],
}
},
methods: {
onSelect(e) {
console.log(e);
},
getIndex(i) {
const char = 'A'.charCodeAt();
return String.fromCharCode(char + i);
},
},
}
</script>please passing array to indexs, at the same time props index in IndexAnchor have to be String
<div id="app">
<IndexBox :indexs="indexs" @select="onSelect">
<div v-for="(item,i) in indexList" :key="item.title">
<IndexAnchor :title="item.title" :index="`${i}`"/>
<div>{{item.content}}</div>
</div>
</IndexBox>
</div> <script>
export default {
name: 'App',
data() {
return {
indexList: [{title: '1', content: 'text'},...],
indexs: [1,2,3,4,5,....],
}
},
methods: {
onSelect(e) {
console.log(e);
},
},
}
</script>