vue-index-box

simple index list for vue

vue 索引列表组件

Installation

npm install --save vue-index-box

Basic Usage

import { IndexBox, IndexAnchor } from 'vue-index-box';
//or    
import indexBox from 'vue-index-box';
Vue.use(indexBox);

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. |

IndexAnchor

| Prop | Data Type | Required|Default| Description | | ---------------- | --------- |-------- |-------|------------------ | | title | String | false | | anchor title. | | index | String | true | | index of anchor.| | zIndex | Number | false | 1 | z-index|

example

<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>

custom index

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>