npm i vue-select-panel -S
VueJS single file (ECMAScript 2015)
可以在入口文件 main.js 中全局引入依赖,也可以当做单文件组件使用
import VueSelectPanel from 'vue-select-panel'
import 'vue-select-panel/lib/vue-select-panel.css'
Vue.use(VueSelectPanel)
<template>
<div id="app">
<vue-select-panel
v-model="checkedList"
:data-list="dataList"
title="文章分类"
questionText="投稿的文章会按照选择的分类,在文章分类列表中展示。"
></vue-select-panel>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
dataList: [
{ key: 'front-end', text: '前端' },
{ key: 'back-end', text: '后端' },
{ key: 'algorithm', text: '算法' },
{ key: 'philosophy', text: '哲学' },
{ key: 'operating-system', text: '操作系统' },
{ key: 'computer-organization', text: '计算机组成原理' }
],
checkedList: []
}
}
}
</script>
<link rel="stylesheet" href="vue-select-panel/lib/vue-select-panel.css">
<script type="text/javascript" src="vue-select-panel.umd.min.js"></script>
<div id="app">
<vue-select-panel
v-model="checkedList"
:data-list="dataList"
title="文章分类"
questionText="投稿的文章会按照选择的分类,在文章分类列表中展示。"
></vue-select-panel>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
VueSelectPanel
}
})
属性名称 |
说明 |
类型 |
可选值 |
默认 |
value |
已选中的值,可使用 v-model 进行双向绑定 |
Array |
|
|
title |
多选面板的标题 |
String |
|
'标题' |
dataList |
传入的可选择项数组, 每一项是一个对象 |
Array |
|
|
maxCheckedLength |
最大可以选中的数量 |
Number |
|
5 |
questionText |
疑问弹出层的文本,当该项为空时,自动隐藏疑问图标 |
String |
|
|
showScale |
是否显示已选中的值和最大可选中的值的比例 |
Boolean |
true, false |
true |
maxHeight |
最大高度,超过该高度出现滚动条,不传则不限制高度 |
Number |
|
|
属性名称 |
说明 |
类型 |
必须包含 |
key |
该项的唯一标识,不可重复 |
|
是 |
text |
该项的文本描述, 展示文本 |
|
是 |
disable |
该项是否不可选 |
Boolean |
|
事件名称 |
说明 |
返回参数 |
on-click-item |
点击每一个选项时触发 |
item, index |
on-checked-full |
当选中值达最大可选中值时触发 |
value : 当前已选中的值数组 |
MIT 一起来扣细节吧~