Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 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 (almost 7 years ago)
Default Branch: master
Last Pushed: 2018-12-15T08:16:49.000Z (over 5 years ago)
Last Synced: 2024-03-25T06:46:28.940Z (2 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

Lists

awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue. - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)
awesome-vue - stf-vue-select - most flexible and customized select Vue2 (Components & Libraries / UI Components)
awesome-vue - stf-vue-select ★53 - most flexible and customized select Vue2 (UI Components / Form)
awesome-vuejs - stf-vue-select - most flexible and customized select Vue2 (UI Components / Form)

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/)