stfalcon-studio / Stf Vue Select
Licence: mit
stf vue select - most flexible and customized select
Stars: ✭ 61
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Stf Vue Select
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+314.75%)
Mutual labels: component, vuejs2, vue2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-44.26%)
Mutual labels: component, vuejs2, vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+254.1%)
Mutual labels: component, vuejs2, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+8577.05%)
Mutual labels: component, vuejs2, vue2
React Select Search
⚡️ Lightweight select component for React
Stars: ✭ 379 (+521.31%)
Mutual labels: search, component, select
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (+49.18%)
Mutual labels: custom, component, select
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (+270.49%)
Mutual labels: component, vuejs2, vue2
Vue Cool Select
Select with autocomplete, slots, bootstrap and material design themes.
Stars: ✭ 195 (+219.67%)
Mutual labels: search, input, select
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+611.48%)
Mutual labels: custom, vuejs2, vue2
Vue Img Inputer
🏞 A graceful image type inputer / uploader
Stars: ✭ 548 (+798.36%)
Mutual labels: component, input, vue2
Vanilla Select
Standalone replacement for select boxes.
Stars: ✭ 12 (-80.33%)
Mutual labels: search, select
Vue2 Datatable
The best Datatable for Vue.js 2.x which never sucks. Give us a star 🌟 if you like it! (DEPRECATED. As I, @kenberkeley, the only maintainer, no longer works for OneWay. Bugs may be fixed but new features or breaking changes might not be merged. However, it's still the best in my mind because of its extremely flexible usage of dynamic components)
Stars: ✭ 867 (+1321.31%)
Mutual labels: vuejs2, vue2
Nb Choices
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
Stars: ✭ 32 (-47.54%)
Mutual labels: custom, select
Unitauto
☀️机器学习单元测试平台,零代码、全方位、自动化 测试 方法/函数 的性能、正确性和可用性。☀️An unit testing management platform powered by machine learning. Coding-free, comprehensive and automatical testing for methods/functions.
Stars: ✭ 32 (-47.54%)
Mutual labels: vuejs2, vue2
stf vue select VUE2
stf vue select - most flexible and customized select
For detailed explanation on how things work, checkout the DEMO
install
# install
npm install stf-vue-select --save
import
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
<script src="./dist/lib/stf-vue-select.min.js"></script>
Vue.use(StfSelectPlugin)
usage
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>stf-vue-select - the most flexible vue select</h1>
<br>
<label>Select without input</label>
<stf-select v-model="value" style="width: 300px; margin: 0 auto">
<div slot="label">Input address</div>
<div slot="value">
<div v-if="value">
<span>{{value.address}} (<small>{{value.text}}</small>)</span>
</div>
</div>
<section class="options delivery_order__options">
<stf-select-option
v-for="item of list" :key="item.id"
:value="item"
:class="{'stf-select-option_selected': item.id === (value && value.id)}"
>
<span>{{item.text}} (<small>{{item.address}}</small>)</span>
</stf-select-option>
</section>
</stf-select>
<br>
<label>Select with input</label>
<stf-select v-model="value" style="width: 300px; margin: 0 auto">
<div slot="label">Input address</div>
<div slot="value">
<div v-if="value">
<span>{{value.address}} (<small>{{value.text}}</small>)</span>
</div>
</div>
<div slot="search-input">
<input @input="onsearch">
</div>
<section class="options delivery_order__options">
<stf-select-option
v-for="item of listFinded" :key="item.id"
:value="item"
:class="{'stf-select-option_selected': item.id === (value && value.id)}"
>
<span>{{item.text}} (<small>{{item.address}}</small>)</span>
</stf-select-option>
</section>
</stf-select>
</div>
</template>
<script>
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;
}
}
}
}
</script>
<style>
#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;
}
</style>
options
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].