# vue-index-list    [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![Gemnasium](https://img.shields.io/gemnasium/mathiasbynens/he.svg)](https://github.com/PanJiaChen/vue-countTo) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-countTo) [![npm](https://img.shields.io/npm/v/vue-count-to.svg)](https://www.npmjs.com/package/vue-count-to)

A Vue 2.0-based UI component that passes in an array of specific formats to display a slideable list with a list of right-side indexes.
It is learn from mint-ui;

## [Try the demo](https://github.com/LoveIsReal/vue-index-list)

### How to use?
```bash
(jquery is needed !)
npm i vue-index-list
```

### Example

```vue
<template>
  <index-list :comp_data="comp_data" style="height: 400px;overflow-y: scroll;" @handle_chooseComp_f = "handle_chooseComp_f"></index-list>
</template>

<script>
  import IndexList  from 'vue-index-list';
  export default {
    name: 'HelloWorld',
    components: {'index-list': IndexList},
    data () {
      return {
        comp_data: {rows:[['80163340', '安信基金', 'AXJJ'],
          ['80000226', '博时基金', 'BSJJ'],
          ['80510904', '金信基金', 'JXJJ'],
          ['80554846', '南华基金', 'NHJJ']]},
      }
    },
    methods:{
      handle_chooseComp_f(code,name){
        console.log(code);
      }
    }
  }
</script>
```
demo:

![demo_gif](https://github.com/LoveIsReal/vue-index-list/raw/master/indexListDemo.gif)



### Options
|    Property    |    Description   |   type   |	default	|
| -----------------  | ---------------- | :--------: | :----------: |
| comp_data       | the data source for the list and index-list | object | {rows: [] } |



### Functions
| Function Name | Description   | params
| :--------:   | -----  |  ----- |
|    handle_chooseComp_f    |  when the list item are clicked  | code , name |