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