0.2.5 • Published 5 years ago
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:
Slot
| Slot. Name | Description |
|---|
| - | 默认作用域插槽，slotProps.item访问 |
Local setup
npm install
npm run serve
License
MIT