Vue-letter-nav NPM

vue-letter-nav

一个基于vue的字母导航组件

demo 注：请F12，选择手机模式查看，或者本地运行在手机浏览器上的查看

使用

# 安装 npm 包
npm install -S vue-letter-nav

# 项目引入css
import "~vue-letter-nav/lib/vue-letter-nav.css";

# 项目main.js引入组件, 全局引入

import VueLetterNav from 'vue-letter-nav'

Vue.use(VueLetterNav)

构建命令

# 安装依赖
npm install

# 启动本地服务（默认localhost与ip） localhost:8080
npm run dev

# 打包示例
npm run bulid

Api

参数	描述	类型	可选值	必须	默认值
check	已选中的值，一维数组	Array		true	[]
list	全部的数据	Array	{'alpha': 'A', name: '用户', value: 'Account'}	true	[]
multiple	是否多选	Boolean		false	false
readonly	是否只读	Boolean		false	false
showLetter	显示字母导航	Boolean		false	true
scrollOptions	滚动行为	Object		false

#
list数据格式如下： {
    name: '安哥拉',
    value: 'Angola',
    alpha: 'A'
}, {
    name: '阿富汗',
    value: 'Afghanistan'
}, {
    name: '阿尔巴尼亚',
    value: 'Albania'
}, {
    name: '巴哈马',
    value: 'Bahamas',
    alpha: 'B'
}, {
    name: '巴林',
    value: 'Bahrain'
}

scrollOptions API

因为引用了 MDN: scrollIntoView()，故可参考其相关配置

参数	描述	类型	可选值	必须	默认值
behavior	定义滚动动画	String	auto（自动）\| instant（无滚动）\| smooth（缓动）	false	auto
block	设置滚动指定元素位置	String	start（顶部）\| center（居中）\| end（底部）\| nearest（最近的）	false	center
inline	设置滚动指定元素位置	String	start（顶部）\| center（居中）\| end（底部）\| nearest（最近的）	false	center

slot

参数	描述	类型	可选值	必须	默认值
content	子项内容

#
支持slot， 可以自定义slot子项的内容， 如下所示# data为的子项的数据， 格式： {
    name: '',
    value: ''
}

vue - letter - nav(: check = "checkList": list = "allList": multiple = "true": readonly = "false"
    @check = "handleCheck")
template(slot = "content"
    slot - scope = "{data}")
span.letter - content - icon√
span {
    {
        data.name
    }
}

更新日志

0.1.0

基础版本发布

0.1.1

增加scrollOptions配置

0.1.3

升级依赖

vue letter nav component

core-js vue

@infinitebrahmanuniverse/nolb-vue-l @everything-registry/sub-chunk-3084

5 years ago

5 years ago

5 years ago

5 years ago