https://github.com/stfalcon-studio/stf-vue-select

stf vue select - most flexible and customized select
https://github.com/stfalcon-studio/stf-vue-select

component custom customized flexible ideal input labels objects search select select2 stf-vue-select ui vue vue2 vuejs2

Last synced: 2 months ago
JSON representation

stf vue select - most flexible and customized select

• Host: GitHub
• URL: https://github.com/stfalcon-studio/stf-vue-select
• Owner: stfalcon-studio
• License: mit
• Created: 2017-06-26T06:54:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-15T08:16:49.000Z (about 6 years ago)
• Last Synced: 2024-10-28T03:12:17.357Z (3 months ago)
• Topics: component, custom, customized, flexible, ideal, input, labels, objects, search, select, select2, stf-vue-select, ui, vue, vue2, vuejs2
• Language: JavaScript
• Homepage:
• Size: 1.26 MB
• Stars: 62
• Watchers: 5
• Forks: 15
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stf vue select VUE2

[![Join the chat at https://gitter.im/stfalcon-studio/stf-vue-select](https://badges.gitter.im/stfalcon-studio/stf-vue-select.svg)](https://gitter.im/stfalcon-studio/stf-vue-select?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

> stf vue select - most flexible and customized select

For detailed explanation on how things work, checkout the [DEMO](https://stfalcon-studio.github.io/stf-vue-select/dist/)

## install

``` bash

# install 

npm install stf-vue-select --save

```

## import 

``` js

import {StfSelect, StfSelectOption} from "stf-vue-select";

import "stf-vue-select/dist/lib/stf-vue-select.min.css";

...

Vue.component('stf-select-option', StfSelectOption);

Vue.component('stf-select', StfSelect);

```

## Using without webpack minified files

``` js

Vue.use(StfSelectPlugin) 

```

## usage

``` html

    

  


    

    
stf-vue-select - the most flexible vue select

    


    Select without input

    

      
Input address

      


        


           {{value.address}} ({{value.text}})

        

      

      

          

              {{item.text}} ({{item.address}})

          

      

    


    


    Select with input

    

      
Input address

      


        


           {{value.address}} ({{value.text}})

        

      

      


          

      

      

          

              {{item.text}} ({{item.address}})

          

      

    

  


import {StfSelect, StfSelectOption} from './components/stf-select'

export default {

  name: 'app',

  components: {

    StfSelect, 

    StfSelectOption

  },

  created() {

    this.listFinded = this.list;

  },

  data () {

    return {

      value: null,

      list: [

        {

          text: "text1",

          address: "address1",

          id: 1

        },

        {

          text: "text2",

          address: "address2",

          id: 2

        },

        {

          text: "text3",

          address: "address3",

          id: 3

        },

      ],

      listFinded: [

      ]

    }

  },

  methods: {

    onsearch(e) {

      if (e.target.value) {

        this.listFinded = this.list.filter(el => el.text.indexOf(e.target.value) !== -1 || el.address.indexOf(e.target.value) !== -1);

      } else {

        this.listFinded = this.list;

      }

    }

  }

}

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

```

## options

```js

props: {

    value: [Object, Number, String, Array, Boolean],

    more: Boolean,

    pending: Boolean,

    optionsWrapClass: String,

    needFocusInpOnTab: {

        type: Boolean,

        default: false

    },

},

```

For detailed explanation on how things work, checkout the [DEMO](https://stfalcon-studio.github.io/stf-vue-select/dist/)