v-ibar

vue通讯录组件

online demo

Installation

Use

$ npm install v-ibar -S

import Vue from 'vue'
import VIbar from 'v-ibar'

Vue.use(VIbar)

<v-ibar :data="data"/>
<!-- 插槽 -->
<v-ibar :data="data">
  <template v-slot="slotProps">
    {{ slotProps.item.name }}
  </template>
</v-ibar>

API

component attributes:

| Attr. Name | Type | Description | Required | Default Value | |-----|-----|-----|-----|-----| | scrollElement | String | 滚动容器 | N | window | | data | Array | 数据列表(json数组) | Y | - | | anchor-key | String | 字母的键名 | N | letter | | anchor-nav | Boolean | 是否显示右侧导航 | N | true | | touch-state | Boolean | 右侧导航触摸态 | N | true | | touch-direct | Boolean | 滚动位置是否随导航触摸位置立即生效 | N | true | | highlight-color | String | 高亮颜色值 | N | #07c160 | | fixed-top | Number | 吸顶top值 | N | 0 |

instance methods:

| 方法名 | 说明 | 参数 | |-----|-----|-----| | doLayout | 重新计算布局 | - |

Slot

| Slot. Name | Description | |-----|-----| | - | 默认作用域插槽，slotProps.item访问 |

Local setup

npm install
npm run serve

License

MIT