Skip to content

hpyer/vue-optionlist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-optionlist

npm npm GitHub stars npm

Optionlist component for Vue2

示例

https://hpyer.github.io/vue-optionlist/

安装

For Node

npm install -S vue-optionlist

For 浏览器

<script src="vue.js"></script>
<script src="vue-optionlist.js"></script>

使用

// For Node
var VueOptionList = require('vue-optionlist');

// For Node (ES6)
import VueOptionList from 'vue-optionlist';

// 如果是浏览器中引入的js,已经定义了一个全局变量VueOptionList,可以直接使用

new Vue({
  el: '#app',
  components: {
    'vue-option-list': VueOptionList
  },
  data () {
    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: {
    onChange: function (val) {
      this.selected = val
    },
    selectAll: function () {
      this.$refs.optionList.selectAll()
    },
    unselectAll: function () {
      this.$refs.optionList.unselectAll()
    },
    selectReverse: function () {
      this.$refs.optionList.selectReverse()
    },
    getValues: function () {
      alert(this.$refs.optionList.getValues())
    }
  }
})

属性

  • 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 详见这里

<vue-option-list :list="list" @change="onChange">
  <template scope="props">
    <span class="text">{{props.item.text}}</span>
  </template>
</vue-option-list>

事件

  • change 选项值发生变化时触发,会带有一个表示选项值参数。multi为true时参数为数组,为false时则为所选选项的值
  • limit 所选选项数量超过limit的限制时触发,会带有一个表示限制选项数的参数。