Quick start [install component NPM packages](https://www.npmjs.com/package/vue-custom-select-box).
npm install vue-custom-select-boxQuick start install component NPM packages.
1. __Installation__
1. __Example__
1. __Browser globals__
1. __Props__
1. __Slots__
sh
# npm
npm install --save vue-custom-select-box
# yarn
yarn add vue-custom-select-box
`
- Global setup
`javascript
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
`javascript
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
`html
v-model="result"
:options="options"
option-value="id"
option-text="title"
/>
`
`javascript
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
`html
// or
`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 |
|
| option | |
| noResult | ` |
> want to see more features? Contact me