vue-select

Repository

https://github.com/livelybone/vue-select

SelectBase

place 1

Code

new Vue({
  el: '#normal',
  template: '<vue-select class="select"' +
  '                      v-model="value"' +
  '                      :options="showOptions"' +
  '                      :canSearch="true"' +
  '                      :popperProps="popperProps"' +
  '                      :scrollbarProps="{isMobile:isMobile, maxHeight:\'30vh\'}"' +
  '                      @search="log">No Result</vue-select>',
  data: function () {
    return {
      isMobile: isMobile,
      value: 1,
      options: options,
      keyword: '',
      popperProps: popperProps
    }
  },
  computed: {
    showOptions: function () {
      return this.keyword ? this.options.filter(this.filter) : this.options
    }
  },
  methods: {
    log: function (val) {
      console.log(val)
      this.keyword = val
    },
    filter: function (op) {
      return op.name.toString().indexOf(this.keyword) > -1
    }
  },
  components: { 'vue-select': VueSelect.SelectBase }
})

SelectMulti

place 1
place 2
place 3
place 4
place 5
place 6
place 7
place 8
place 9
place 10
place 11
place 12
place 13
place 14
place 15
place 16
place 17

Code

new Vue({
  el: '#multi',
  template: '<vue-select-multi class="select"' +
  '                            v-model="value"' +
  '                            :options="showOptions"' +
  '                            :popperProps="popperProps"' +
  '                            :canSearch="false"' +
  '                            :scrollbarProps="{isMobile:isMobile, maxHeight:\'30vh\'}"' +
  '                            @search="log">No Result</vue-select-multi>',
  data: function () {
    return {
      isMobile: isMobile,
      value: options.map(function (o) {
        return o.value
      }),
      options: options,
      keyword: '',
      popperProps: popperProps
    }
  },
  computed: {
    showOptions: function () {
      return this.keyword ? this.options.filter(this.filter) : this.options
    }
  },
  methods: {
    log: function (val) {
      console.log(val)
      this.keyword = val
    },
    filter: function (op) {
      return op.name.toString().indexOf(this.keyword) > -1
    }
  },
  components: { 'vue-select-multi': VueSelect.SelectMulti }
})

Cascader

place 1 / place 2

Code

new Vue({
  el: '#cascader1',
  template: '<cascader class="select"' +
  '                    changeOnSelect' +
  '                    v-model="value"' +
  '                    expandType="hover"' +
  '                    :options="showOptions"' +
  '                    :popperProps="popperProps"' +
  '                    :canSearch="true"' +
  '                    :scrollbarProps="{isMobile:isMobile, maxHeight:\'30vh\'}"' +
  '                    @search="log">No Result</cascader>',
  data: function () {
    return {
      isMobile: isMobile,
      value: [1, 2],
      options: options1,
      keyword: '',
      popperProps: popperProps
    }
  },
  computed: {
    showOptions: function () {
      return this.keyword ? this.options.filter(this.filter) : this.options
    }
  },
  watch: {
    value: function (val) {
      console.log(val)
    },
    options: function (val) {
      console.log(val)
    }
  },
  methods: {
    log: function (val) {
      console.log(val)
      this.keyword = val
    },
    filter: function (op) {
      return op.name.toString().indexOf(this.keyword) > -1
    }
  },
  components: { 'cascader': VueSelect.Cascader }
})

CascaderMulti

place 1 / place 2 / place 5
place 8 / place 9 / place 12
place 15 / place 16
place 1 / place 3

Code

new Vue({
  el: '#cascader-multi',
  template: '<cascader-multi class="select"' +
  '                          v-model="value"' +
  '                          expandType="click"' +
  '                          :options="showOptions"' +
  '                          :popperProps="popperProps"' +
  '                          :canSearch="true"' +
  '                          :scrollbarProps="{isMobile:isMobile, maxHeight:\'30vh\'}"' +
  '                          @search="log">No Result</cascader-multi>',
  data: function () {
    return {
      isMobile: isMobile,
      value: [[1, 2, 5], [8, 9, 12], [15, 16], [1, 3]],
      options: options1,
      keyword: '',
      popperProps: popperProps
    }
  },
  computed: {
    showOptions: function () {
      return this.keyword ? this.options.filter(this.filter) : this.options
    }
  },
  watch: {
    value: function (val) {
      console.log(val)
    },
    options: function (val) {
      console.log(val)
    }
  },
  methods: {
    log: function (val) {
      console.log(val)
      this.keyword = val
    },
    filter: function (op) {
      return op.name.toString().indexOf(this.keyword) > -1
    }
  },
  components: { 'cascader-multi': VueSelect.CascaderMulti }
})

Other Code


popperConfig, see in @livelybone/vue-popper

var popperProps = {
  popperOptions: {
    modifiers: {
      preventOverflow: { padding: 20 }
    }
  }
}