mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-16 09:10:33 +03:00
initial commit
This commit is contained in:
Jeff Sagal
+30
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div id="app" class="container">
|
||||
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<v-select placeholder="choose something" :value.sync="select" :options="options" :multiple="true"></v-select>
|
||||
</div>
|
||||
|
||||
<pre class="col-md-6">{{ select | json }}</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from './components/Select.vue'
|
||||
|
||||
export default {
|
||||
components: {vSelect},
|
||||
|
||||
data() {
|
||||
return {
|
||||
select: [],
|
||||
options: require('./countries.js')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,299 @@
|
||||
<style scoped>
|
||||
.dropdown-toggle {
|
||||
display: block;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
background: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-toggle:hover,
|
||||
.dropdown-toggle:active,
|
||||
.dropdown-toggle:focus,
|
||||
.open .dropdown-toggle:hover,
|
||||
.open .dropdown-toggle:active,
|
||||
.open .dropdown-toggle:focus {
|
||||
background: none;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle {
|
||||
background: none;
|
||||
border-color: #337ab7;
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
border-top: none;
|
||||
border-color: #337ab7;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 0;
|
||||
margin-left: .25em;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.alert .close {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
input[type=search] {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type=search]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[type=search].inline {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
display: block;
|
||||
/*width: 10px;
|
||||
height: 10px;*/
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e114";
|
||||
transition: all .25s;
|
||||
}
|
||||
|
||||
.open .dropdown-toggle:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
}
|
||||
|
||||
li a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.highlight a,
|
||||
.active.highlight a {
|
||||
background: rgba(50,50,50,.1);
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="dropdown" :class="{open: open, }">
|
||||
<div v-el:toggle @click="toggleDropdown" class="btn btn-default dropdown-toggle clearfix" type="button">
|
||||
<span class="form-control" v-if="! searchable && placeholder && ! selected.length">
|
||||
{{ placeholder }}
|
||||
</span>
|
||||
|
||||
<span class="alert alert-info" v-for="option in value">
|
||||
{{ getOptionLabel(option) }}
|
||||
<button v-if="multiple" @click="select(option)" type="button" class="close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<input
|
||||
@keydown.delete="maybeDeleteValue"
|
||||
@keydown.esc="onEscape"
|
||||
@keydown.up.prevent="typeAheadUp"
|
||||
@keydown.down.prevent="typeAheadDown"
|
||||
@keydown.enter.prevent="typeAheadSelect"
|
||||
v-bind:placeholder="searchPlaceholder"
|
||||
class="form-control"
|
||||
:class="{inline: selected.length}"
|
||||
v-el:search type="search"
|
||||
v-show="searchable"
|
||||
v-model="search"
|
||||
>
|
||||
</div>
|
||||
|
||||
<ul v-if="open" :style="{width: dropdownWidth + 'px'}" :transition="transition" class="dropdown-menu animated">
|
||||
<li v-for="option in filteredOptions" :class="{ active: value.indexOf(option.value) !== -1, highlight: $index === typeAheadPointer }">
|
||||
<a @mousedown.prevent="select(option)">
|
||||
{{ getOptionLabel(option) }}
|
||||
</a>
|
||||
</li>
|
||||
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li>
|
||||
<li transition="fade" v-if="!filteredOptions.length" class="text-center">Sorry, no matching options.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
props: {
|
||||
value: {
|
||||
twoway: true,
|
||||
required: true
|
||||
},
|
||||
searchable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'expand'
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default() { return [] },
|
||||
},
|
||||
ajax: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
open: false,
|
||||
typeAheadPointer: -1,
|
||||
}
|
||||
},
|
||||
|
||||
ready() {
|
||||
this.$watch('open', function(open) {
|
||||
if( open ) {
|
||||
this.$els.search.focus();
|
||||
} else {
|
||||
this.$els.search.blur();
|
||||
this.typeAheadPointer = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
select(v) {
|
||||
if (this.value.indexOf(v) === -1) {
|
||||
if (this.multiple) {
|
||||
this.value.push(v)
|
||||
} else {
|
||||
this.value = [v]
|
||||
}
|
||||
} else {
|
||||
if (this.multiple) {
|
||||
this.value.$remove(v)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.multiple) {
|
||||
this.open = !this.open
|
||||
}
|
||||
},
|
||||
|
||||
toggleDropdown( e ) {
|
||||
if( e.target == this.$els.toggle || e.target == this.$els.search ) {
|
||||
this.open = !this.open
|
||||
}
|
||||
},
|
||||
|
||||
getOptionValue( option ) {
|
||||
if( typeof option === 'object' && option.value ) {
|
||||
return option.value;
|
||||
}
|
||||
|
||||
return option;
|
||||
},
|
||||
|
||||
getOptionLabel( option ) {
|
||||
if( typeof option === 'object' && option.label ) {
|
||||
return option.label;
|
||||
}
|
||||
|
||||
return option;
|
||||
},
|
||||
|
||||
typeAheadUp() {
|
||||
if (this.typeAheadPointer > 0) this.typeAheadPointer--
|
||||
},
|
||||
|
||||
typeAheadDown() {
|
||||
if (this.typeAheadPointer < this.filteredOptions.length - 1) this.typeAheadPointer++
|
||||
},
|
||||
|
||||
typeAheadSelect() {
|
||||
var option = this.filteredOptions[ this.typeAheadPointer ];
|
||||
this.select( this.getOptionValue(option) );
|
||||
this.search = "";
|
||||
},
|
||||
|
||||
onEscape() {
|
||||
if( ! this.search.length ) {
|
||||
this.open = false
|
||||
} else {
|
||||
this.$set('search', '')
|
||||
}
|
||||
},
|
||||
|
||||
maybeDeleteValue() {
|
||||
if( ! this.$els.search.value.length ) {
|
||||
this.value.pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
selected() {
|
||||
let foundItems = []
|
||||
if (this.value.length) {
|
||||
for (let item in this.value) {
|
||||
if (typeof this.value[item] === "string") {
|
||||
foundItems.push(this.value[item])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return foundItems
|
||||
},
|
||||
|
||||
searchPlaceholder() {
|
||||
if( ! this.value.length && this.placeholder ) {
|
||||
return this.placeholder;
|
||||
}
|
||||
},
|
||||
|
||||
dropdownWidth() {
|
||||
return this.$els.toggle.offsetWidth
|
||||
},
|
||||
|
||||
filteredOptions() {
|
||||
return this.$options.filters.filterBy(this.options, this.search)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,246 @@
|
||||
module.exports = [
|
||||
{value: "AF", label: "Afghanistan"},
|
||||
{value: "AX", label: "Åland Islands"},
|
||||
{value: "AL", label: "Albania"},
|
||||
{value: "DZ", label: "Algeria"},
|
||||
{value: "AS", label: "American Samoa"},
|
||||
{value: "AD", label: "Andorra"},
|
||||
{value: "AO", label: "Angola"},
|
||||
{value: "AI", label: "Anguilla"},
|
||||
{value: "AQ", label: "Antarctica"},
|
||||
{value: "AG", label: "Antigua and Barbuda"},
|
||||
{value: "AR", label: "Argentina"},
|
||||
{value: "AM", label: "Armenia"},
|
||||
{value: "AW", label: "Aruba"},
|
||||
{value: "AU", label: "Australia"},
|
||||
{value: "AT", label: "Austria"},
|
||||
{value: "AZ", label: "Azerbaijan"},
|
||||
{value: "BS", label: "Bahamas"},
|
||||
{value: "BH", label: "Bahrain"},
|
||||
{value: "BD", label: "Bangladesh"},
|
||||
{value: "BB", label: "Barbados"},
|
||||
{value: "BY", label: "Belarus"},
|
||||
{value: "BE", label: "Belgium"},
|
||||
{value: "BZ", label: "Belize"},
|
||||
{value: "BJ", label: "Benin"},
|
||||
{value: "BM", label: "Bermuda"},
|
||||
{value: "BT", label: "Bhutan"},
|
||||
{value: "BO", label: "Bolivia"},
|
||||
{value: "BA", label: "Bosnia and Herzegovina"},
|
||||
{value: "BW", label: "Botswana"},
|
||||
{value: "BV", label: "Bouvet Island"},
|
||||
{value: "BR", label: "Brazil"},
|
||||
{value: "IO", label: "British Indian Ocean Territory"},
|
||||
{value: "BN", label: "Brunei Darussalam"},
|
||||
{value: "BG", label: "Bulgaria"},
|
||||
{value: "BF", label: "Burkina Faso"},
|
||||
{value: "BI", label: "Burundi"},
|
||||
{value: "KH", label: "Cambodia"},
|
||||
{value: "CM", label: "Cameroon"},
|
||||
{value: "CA", label: "Canada"},
|
||||
{value: "CV", label: "Cape Verde"},
|
||||
{value: "KY", label: "Cayman Islands"},
|
||||
{value: "CF", label: "Central African Republic"},
|
||||
{value: "TD", label: "Chad"},
|
||||
{value: "CL", label: "Chile"},
|
||||
{value: "CN", label: "China"},
|
||||
{value: "CX", label: "Christmas Island"},
|
||||
{value: "CC", label: "Cocos (Keeling) Islands"},
|
||||
{value: "CO", label: "Colombia"},
|
||||
{value: "KM", label: "Comoros"},
|
||||
{value: "CG", label: "Congo"},
|
||||
{value: "CD", label: "Congo, The Democratic Republic of The"},
|
||||
{value: "CK", label: "Cook Islands"},
|
||||
{value: "CR", label: "Costa Rica"},
|
||||
{value: "CI", label: "Cote D'ivoire"},
|
||||
{value: "HR", label: "Croatia"},
|
||||
{value: "CU", label: "Cuba"},
|
||||
{value: "CY", label: "Cyprus"},
|
||||
{value: "CZ", label: "Czech Republic"},
|
||||
{value: "DK", label: "Denmark"},
|
||||
{value: "DJ", label: "Djibouti"},
|
||||
{value: "DM", label: "Dominica"},
|
||||
{value: "DO", label: "Dominican Republic"},
|
||||
{value: "EC", label: "Ecuador"},
|
||||
{value: "EG", label: "Egypt"},
|
||||
{value: "SV", label: "El Salvador"},
|
||||
{value: "GQ", label: "Equatorial Guinea"},
|
||||
{value: "ER", label: "Eritrea"},
|
||||
{value: "EE", label: "Estonia"},
|
||||
{value: "ET", label: "Ethiopia"},
|
||||
{value: "FK", label: "Falkland Islands (Malvinas)"},
|
||||
{value: "FO", label: "Faroe Islands"},
|
||||
{value: "FJ", label: "Fiji"},
|
||||
{value: "FI", label: "Finland"},
|
||||
{value: "FR", label: "France"},
|
||||
{value: "GF", label: "French Guiana"},
|
||||
{value: "PF", label: "French Polynesia"},
|
||||
{value: "TF", label: "French Southern Territories"},
|
||||
{value: "GA", label: "Gabon"},
|
||||
{value: "GM", label: "Gambia"},
|
||||
{value: "GE", label: "Georgia"},
|
||||
{value: "DE", label: "Germany"},
|
||||
{value: "GH", label: "Ghana"},
|
||||
{value: "GI", label: "Gibraltar"},
|
||||
{value: "GR", label: "Greece"},
|
||||
{value: "GL", label: "Greenland"},
|
||||
{value: "GD", label: "Grenada"},
|
||||
{value: "GP", label: "Guadeloupe"},
|
||||
{value: "GU", label: "Guam"},
|
||||
{value: "GT", label: "Guatemala"},
|
||||
{value: "GG", label: "Guernsey"},
|
||||
{value: "GN", label: "Guinea"},
|
||||
{value: "GW", label: "Guinea-bissau"},
|
||||
{value: "GY", label: "Guyana"},
|
||||
{value: "HT", label: "Haiti"},
|
||||
{value: "HM", label: "Heard Island and Mcdonald Islands"},
|
||||
{value: "VA", label: "Holy See (Vatican City State)"},
|
||||
{value: "HN", label: "Honduras"},
|
||||
{value: "HK", label: "Hong Kong"},
|
||||
{value: "HU", label: "Hungary"},
|
||||
{value: "IS", label: "Iceland"},
|
||||
{value: "IN", label: "India"},
|
||||
{value: "ID", label: "Indonesia"},
|
||||
{value: "IR", label: "Iran, Islamic Republic of"},
|
||||
{value: "IQ", label: "Iraq"},
|
||||
{value: "IE", label: "Ireland"},
|
||||
{value: "IM", label: "Isle of Man"},
|
||||
{value: "IL", label: "Israel"},
|
||||
{value: "IT", label: "Italy"},
|
||||
{value: "JM", label: "Jamaica"},
|
||||
{value: "JP", label: "Japan"},
|
||||
{value: "JE", label: "Jersey"},
|
||||
{value: "JO", label: "Jordan"},
|
||||
{value: "KZ", label: "Kazakhstan"},
|
||||
{value: "KE", label: "Kenya"},
|
||||
{value: "KI", label: "Kiribati"},
|
||||
{value: "KP", label: "Korea, Democratic People's Republic of"},
|
||||
{value: "KR", label: "Korea, Republic of"},
|
||||
{value: "KW", label: "Kuwait"},
|
||||
{value: "KG", label: "Kyrgyzstan"},
|
||||
{value: "LA", label: "Lao People's Democratic Republic"},
|
||||
{value: "LV", label: "Latvia"},
|
||||
{value: "LB", label: "Lebanon"},
|
||||
{value: "LS", label: "Lesotho"},
|
||||
{value: "LR", label: "Liberia"},
|
||||
{value: "LY", label: "Libyan Arab Jamahiriya"},
|
||||
{value: "LI", label: "Liechtenstein"},
|
||||
{value: "LT", label: "Lithuania"},
|
||||
{value: "LU", label: "Luxembourg"},
|
||||
{value: "MO", label: "Macao"},
|
||||
{value: "MK", label: "Macedonia, The Former Yugoslav Republic of"},
|
||||
{value: "MG", label: "Madagascar"},
|
||||
{value: "MW", label: "Malawi"},
|
||||
{value: "MY", label: "Malaysia"},
|
||||
{value: "MV", label: "Maldives"},
|
||||
{value: "ML", label: "Mali"},
|
||||
{value: "MT", label: "Malta"},
|
||||
{value: "MH", label: "Marshall Islands"},
|
||||
{value: "MQ", label: "Martinique"},
|
||||
{value: "MR", label: "Mauritania"},
|
||||
{value: "MU", label: "Mauritius"},
|
||||
{value: "YT", label: "Mayotte"},
|
||||
{value: "MX", label: "Mexico"},
|
||||
{value: "FM", label: "Micronesia, Federated States of"},
|
||||
{value: "MD", label: "Moldova, Republic of"},
|
||||
{value: "MC", label: "Monaco"},
|
||||
{value: "MN", label: "Mongolia"},
|
||||
{value: "ME", label: "Montenegro"},
|
||||
{value: "MS", label: "Montserrat"},
|
||||
{value: "MA", label: "Morocco"},
|
||||
{value: "MZ", label: "Mozambique"},
|
||||
{value: "MM", label: "Myanmar"},
|
||||
{value: "NA", label: "Namibia"},
|
||||
{value: "NR", label: "Nauru"},
|
||||
{value: "NP", label: "Nepal"},
|
||||
{value: "NL", label: "Netherlands"},
|
||||
{value: "AN", label: "Netherlands Antilles"},
|
||||
{value: "NC", label: "New Caledonia"},
|
||||
{value: "NZ", label: "New Zealand"},
|
||||
{value: "NI", label: "Nicaragua"},
|
||||
{value: "NE", label: "Niger"},
|
||||
{value: "NG", label: "Nigeria"},
|
||||
{value: "NU", label: "Niue"},
|
||||
{value: "NF", label: "Norfolk Island"},
|
||||
{value: "MP", label: "Northern Mariana Islands"},
|
||||
{value: "NO", label: "Norway"},
|
||||
{value: "OM", label: "Oman"},
|
||||
{value: "PK", label: "Pakistan"},
|
||||
{value: "PW", label: "Palau"},
|
||||
{value: "PS", label: "Palestinian Territory, Occupied"},
|
||||
{value: "PA", label: "Panama"},
|
||||
{value: "PG", label: "Papua New Guinea"},
|
||||
{value: "PY", label: "Paraguay"},
|
||||
{value: "PE", label: "Peru"},
|
||||
{value: "PH", label: "Philippines"},
|
||||
{value: "PN", label: "Pitcairn"},
|
||||
{value: "PL", label: "Poland"},
|
||||
{value: "PT", label: "Portugal"},
|
||||
{value: "PR", label: "Puerto Rico"},
|
||||
{value: "QA", label: "Qatar"},
|
||||
{value: "RE", label: "Reunion"},
|
||||
{value: "RO", label: "Romania"},
|
||||
{value: "RU", label: "Russian Federation"},
|
||||
{value: "RW", label: "Rwanda"},
|
||||
{value: "SH", label: "Saint Helena"},
|
||||
{value: "KN", label: "Saint Kitts and Nevis"},
|
||||
{value: "LC", label: "Saint Lucia"},
|
||||
{value: "PM", label: "Saint Pierre and Miquelon"},
|
||||
{value: "VC", label: "Saint Vincent and The Grenadines"},
|
||||
{value: "WS", label: "Samoa"},
|
||||
{value: "SM", label: "San Marino"},
|
||||
{value: "ST", label: "Sao Tome and Principe"},
|
||||
{value: "SA", label: "Saudi Arabia"},
|
||||
{value: "SN", label: "Senegal"},
|
||||
{value: "RS", label: "Serbia"},
|
||||
{value: "SC", label: "Seychelles"},
|
||||
{value: "SL", label: "Sierra Leone"},
|
||||
{value: "SG", label: "Singapore"},
|
||||
{value: "SK", label: "Slovakia"},
|
||||
{value: "SI", label: "Slovenia"},
|
||||
{value: "SB", label: "Solomon Islands"},
|
||||
{value: "SO", label: "Somalia"},
|
||||
{value: "ZA", label: "South Africa"},
|
||||
{value: "GS", label: "South Georgia and The South Sandwich Islands"},
|
||||
{value: "ES", label: "Spain"},
|
||||
{value: "LK", label: "Sri Lanka"},
|
||||
{value: "SD", label: "Sudan"},
|
||||
{value: "SR", label: "Suriname"},
|
||||
{value: "SJ", label: "Svalbard and Jan Mayen"},
|
||||
{value: "SZ", label: "Swaziland"},
|
||||
{value: "SE", label: "Sweden"},
|
||||
{value: "CH", label: "Switzerland"},
|
||||
{value: "SY", label: "Syrian Arab Republic"},
|
||||
{value: "TW", label: "Taiwan, Province of China"},
|
||||
{value: "TJ", label: "Tajikistan"},
|
||||
{value: "TZ", label: "Tanzania, United Republic of"},
|
||||
{value: "TH", label: "Thailand"},
|
||||
{value: "TL", label: "Timor-leste"},
|
||||
{value: "TG", label: "Togo"},
|
||||
{value: "TK", label: "Tokelau"},
|
||||
{value: "TO", label: "Tonga"},
|
||||
{value: "TT", label: "Trinidad and Tobago"},
|
||||
{value: "TN", label: "Tunisia"},
|
||||
{value: "TR", label: "Turkey"},
|
||||
{value: "TM", label: "Turkmenistan"},
|
||||
{value: "TC", label: "Turks and Caicos Islands"},
|
||||
{value: "TV", label: "Tuvalu"},
|
||||
{value: "UG", label: "Uganda"},
|
||||
{value: "UA", label: "Ukraine"},
|
||||
{value: "AE", label: "United Arab Emirates"},
|
||||
{value: "GB", label: "United Kingdom"},
|
||||
{value: "US", label: "United States"},
|
||||
{value: "UM", label: "United States Minor Outlying Islands"},
|
||||
{value: "UY", label: "Uruguay"},
|
||||
{value: "UZ", label: "Uzbekistan"},
|
||||
{value: "VU", label: "Vanuatu"},
|
||||
{value: "VE", label: "Venezuela"},
|
||||
{value: "VN", label: "Viet Nam"},
|
||||
{value: "VG", label: "Virgin Islands, British"},
|
||||
{value: "VI", label: "Virgin Islands, U.S."},
|
||||
{value: "WF", label: "Wallis and Futuna"},
|
||||
{value: "EH", label: "Western Sahara"},
|
||||
{value: "YE", label: "Yemen"},
|
||||
{value: "ZM", label: "Zambia"},
|
||||
{value: "ZW", label: "Zimbabwe"},
|
||||
];
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.transition('bounce', {
|
||||
enterClass: 'bounceInLeft',
|
||||
leaveClass: 'bounceOutRight'
|
||||
})
|
||||
|
||||
Vue.transition('zoom', {
|
||||
enterClass: 'zoomIn',
|
||||
leaveClass: 'zoomOut'
|
||||
})
|
||||
|
||||
Vue.transition('fade', {
|
||||
enterClass: 'fadeIn',
|
||||
leaveClass: 'fadeOut'
|
||||
})
|
||||
|
||||
Vue.transition('fadeInDownBig', {
|
||||
enterClass: 'fadeInDownBig',
|
||||
leaveClass: 'fadeOutDownBig'
|
||||
})
|
||||
|
||||
Vue.transition('slideInDown', {
|
||||
enterClass: 'slideInDown',
|
||||
leaveClass: 'slideOutDown'
|
||||
})
|
||||
|
||||
Vue.transition('slideUp', {
|
||||
enterClass: 'fadeInDown',
|
||||
leaveClass: 'fadeOutUp'
|
||||
})
|
||||
|
||||
Vue.transition('lightSpeed', {
|
||||
enterClass: 'lightSpeedIn',
|
||||
leaveClass: 'lightSpeedOut'
|
||||
})
|
||||
|
||||
Vue.transition('flipX', {
|
||||
enterClass: 'flipInX',
|
||||
leaveClass: 'flipOutX'
|
||||
})
|
||||
|
||||
Vue.transition('flipY', {
|
||||
enterClass: 'flipInY',
|
||||
leaveClass: 'flipOutY'
|
||||
})
|
||||
|
||||
Vue.transition('rotate', {
|
||||
enterClass: 'rotateIn',
|
||||
leaveClass: 'rotateOut'
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: 'body',
|
||||
components: { App }
|
||||
})
|
||||
Reference in New Issue
Block a user