vue-optionlist
Optionlist component for Vue2
示例
https://hpyer.github.io/vue-optionlist/
安装
For Node
npm install -S vue-optionlist
For 浏览器
使用
// For Nodevar VueOptionList = ; // For Node (ES6); // 如果是浏览器中引入的js,已经定义了一个全局变量VueOptionList,可以直接使用 el: '#app' components: 'vue-option-list': VueOptionList { return list: value: '1' text: 'text1' value: '2' text: 'text2' value: '3' text: 'text3' selected: '' } template: ` <div id="example"> <vue-option-list :list="list" :selected="['2', '3']" ref="optionList" @change="onChange"></vue-option-list> <div> <button @click="selectAll">全选</button> <button @click="unselectAll">全不选</button> <button @click="selectReverse">反选</button> <button @click="getValues">获取所选</button> </div> <div> 所选:{{selected}} </div> </div> ` methods: { thisselected = val } { this$refsoptionList } { this$refsoptionList } { this$refsoptionList } { }
属性
list
Array 数据列表,每个元素均为对象,其属性有:value(选项的值,必须)、text(选项的描述文字,自定义选项模版时可选,否则必填)。如:[{value: '1', text: 'text1'}, {value: '2', text: 'text2'}]
multi
Boolean 是否多选,true表示多选(默认), false表示单选selected
Array/String 默认选中的选项值,multi
为true时传数组,为false时直接传某个选项的值limit
Number 最大选项数,默认:0表示不限制,multi
为true时有效
slot
您可以自定义选项的模版,此功能用到的作用域插槽,因此需要 Vue >= 2.1.0 详见这里
{{props.item.text}}
事件
change
选项值发生变化时触发,会带有一个表示选项值参数。multi
为true时参数为数组,为false时则为所选选项的值limit
所选选项数量超过limit的限制时触发,会带有一个表示限制选项数的参数。