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
- 升级依赖