UNPKG

vue-select

Version:

A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.

github.com/sagalbot/vue-select

sagalbot/vue-select

85 lines (79 loc) • 4.23 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Select Dev</title> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">--> <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">--> <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">--> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">--> <style> #app { height: 95vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex-wrap: wrap; align-content: center; font-family: -apple-system, sans-serif; } .v-select { width: 25em; margin: 1em; } </style> </head> <body> <div id="app"> <v-select placeholder="default" :options="options"></v-select> <v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select> <v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select> <v-select placeholder="multiple" multiple :options="options"></v-select> <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select> <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> <v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select> <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select> <v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select> <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select> <v-select placeholder="custom option template" :options="options" multiple> <template slot="selected-option" slot-scope="option"> {{option.label}} </template> <template slot="option" slot-scope="option"> {{option.label}} ({{option.value}}) </template> </v-select> <v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple> <template slot="selected-option" slot-scope="option"> {{option.label}} </template> <template slot="option" slot-scope="option"> {{option.label}} </template> </v-select> <v-select multiple placeholder="custom label template" :options="options"> <span slot="selected-option-container" slot-scope="props" class="selected-tag" > {{ props.option.label }} ({{ props.option.value }}) <button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option"> <span aria-hidden="true">&times;</span> </button> </span> </v-select> <v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select> <v-select placeholder="disabled" disabled value="disabled"></v-select> <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select> <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select> <v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch"> <template slot="option" scope="option"> <strong>{{ option.title }}</strong><br> <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em> </template> </v-select> </div> </body> </html>