Vue-custom-select-box

Quick start install component NPM packages.

Documentation

1. Installation
2. Example
3. Browser globals
4. Props
5. Slots

Installation

install component from NPM

• NPM

  # npm
  npm install --save vue-custom-select-box
     
  # yarn
  yarn add vue-custom-select-box

• Global setup

  import VueCustomSelectBox from 'vue-custom-select-box';
  import "vue-custom-select-box/style.css";
    
  new Vue({
    components: {
      VueCustomSelectBox,
    },
  });
    
  // or
  Vue.component('vue-custom-select-box', require('vue-custom-select-box'));
  // or
  Vue.component('v-spinner', VueCustomSelectBox);

• Local setup

  import VueCustomSelectBox from 'vue-custom-select-box';
  import "vue-custom-select-box/style.css";
  
  export default {
      // ...
      components: { VueCustomSelectBox }
      // ...
  }
    

• Example

  Install component first then import it as you want as Global Local

  <template>
    <div>
      <VueCustomSelectBox 
          v-model="result"
          :options="options"
          option-value="id"
          option-text="title"
      />
    </div>
  </template>

  import VueCustomSelectBox from 'vue-custom-select-box';
  import "vue-custom-select-box/style.css";
  
  export default {
      // ...
      data(){
          return {
              options: [
                  // ...
                  {
                      title: "Hello world",
                      id: 1
                  }
                  // ...
              ],
              result: null
          }
      },
      components: { VueCustomSelectBox } 
      // ...
  }
    

• Browser globals

  The dist folder contains vue-custom-select-box.umd.cjs and vue-custom-select-box.js

  <link rel="stylesheet" href="path/to/style.css" />
  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-custom-select-box/dist/vue-custom-select-box.js"></script>
  // or
  <script src="path/to/vue-custom-select-box"></script>
  <script>
    var app = new Vue({
      el: '#app',
      components: {
        VueCustomSelectBox,
      },
    });
  </script>

Props

| | Default | Type | Required | | ------------------ | :----------------: | :-------------------------------: | :--------: | | placeholder | -- Select -- | String | optional | | searchPlaceholder | Search e.g abc.. | String | optional | | selectAllLabel | Select all | String | optional | | limit | undefined | Number | optional | | selectAll | true | Boolean | optional | | multiple | false | Boolean | optional | | options | [] | Array | required | | value | undefined | [Array, Object, String, Number] | required | | optionValue | undefined | String | optional | | optionText | undefined | String | optional | | trackBy | undefined | String | optional | | animated | true | Boolean | optional | | disabled | false | Boolean | optional | | closeOnSelect | false | Boolean | optional | | clearInputOnSelect | false | Boolean | optional |

Slots

| Name | Example | | ------------ | :---------------------------------------------------------------------------------------------------: | | selectButton | <template v-slot:selectButton="{open, tags, multiple, originalLimit, limited, label}"></template> | | option | <template v-slot:option="item"></template> | | noResult | <template v-slot:noResult="search"></template> |

want to see more features? Contact me