❤
npm
Sign UpSign In

vue-custom-select

1.0.10 • Public • Published

vue-custom-select

simple, minimalistic autocomplete select dropdown component for Vue apps for you!
  • ~4kb (the component size)
  • SSR Support
  • Zero dependencies
  • Minimalistic
  • Convenient and easy to use
  • Floating placeholder

Install Via NPM

$ npm i vue-custom-select

Register it

In your component:

import vueCustomSelect from 'vue-custom-select/src/CustomSelect.vue';
 
export default {
  components: {
     vueCustomSelect
  },
  //...
}

Globally:

import Vue from 'vue';
import vueCustomSelect from "vue-custom-select/src/CustomSelect.vue";
Vue.component('vue-custom-select', vueCustomSelect);

Use It

<vue-custom-select 
  v-model="selectedOption"
  :data-array="dataArray"
  placeholder="Choose your country">
</vue-custom-select>

Use v-model to get the selected option, or set standard value. The standard value must be something like this '{text: 'First option', value: 'Any'}', the 'text' property is required

Data array must be something like this:

data () {
    return {
      dataArray: [
        {text: 'First option', value: 'Any'},
        {text: 'Second option', value: 'Any'},
        {text: 'Third option', value: 'Any'},
        {text: 'Fourth option', value: 'Any'},
        {text: 'Fifth option', value: 'Any'},
        {text: 'Sixth option', value: 'Any'}
      ]
    }
  }

where the key 'text' will be a title of your options

And you will get a result:

Customize CSS

If you don't like styles, you can customize it just using selector /deep/, for example:

.your-wrap-class /deep/ .select-input {
    background: lightblue;
}

where "your-wrap-class" it's parent class in your code

Available Props:

props: {
  // Array list of your elements/options 
  dataArray: {
    type: Array,
    'default': []
  },
  // Set width
  width: {
    type: Number,
    'default': 300
  },
  // Set height
  height: {
    type: Number,
    'default': 60
  },
  // Set custom placeholder
  placeholder: {
    type: String,
    'default': 'Choose an option'
  }
}

Github link:

https://github.com/Orangat/vue-custom-select
Fill free to create some issue, if you find some bugs, or want to improve something.
If you have questions, write me 'serg,webdeveloper@gmail.com'

Readme

Keywords

Package Sidebar

Install

npm i vue-custom-select

Repository

github.com/Orangat/vue-custom-select

Homepage

github.com/Orangat/vue-custom-select#readme

Weekly Downloads

10

Version

1.0.10

License

MIT

Unpacked Size

41.2 kB

Total Files

8

Last publish

Collaborators

  • orangat
Try on RunKit
Report malware