我把这个vue组件（https://github.com/sagalbot/vue-select/tree/master/src）的Select.vue和advanced.js拿出来放到一个文件中，想不用打包运行一下，
advanced.js：https://github.com/sagalbot/vue-select/tree/master/src/countries
Select.vue：https://github.com/sagalbot/vue-select/tree/master/src/components
不知道advanced.js的内容应该放到那里才能运行，请大神帮看看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<style>
.v-select.dropdown {
position: relative;
}
.v-select .open-indicator {
position: absolute;
bottom: 6px;
right: 10px;
display: inline-block;
cursor: pointer;
pointer-events: all;
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
}
.v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5);
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 10px;
width: 10px;
vertical-align: top;
transform: rotate(133deg);
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
}
.v-select.open .open-indicator {
bottom: 1px;
}
.v-select.open .open-indicator:before {
transform: rotate(315deg);
}
.v-select .dropdown-toggle {
display: block;
padding: 0;
background: none;
border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4px;
white-space: normal;
}
.v-select.searchable .dropdown-toggle {
cursor: text;
}
.v-select.open .dropdown-toggle {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.v-select > .dropdown-menu {
margin: 0;
width: 100%;
overflow-y: auto;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.v-select .selected-tag {
color: #333;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
height: 26px;
margin: 4px 1px 0px 3px;
padding: 0 0.25em;
float: left;
line-height: 1.7em;
}
.v-select .selected-tag .close {
float: none;
margin-right: 0;
font-size: 20px;
}
.v-select input[type=search],
.v-select input[type=search]:focus {
display: inline-block;
border: none;
outline: none;
margin: 0;
padding: 0 .5em;
width: 10em;
max-width: 100%;
background: none;
position: relative;
box-shadow: none;
float: left;
clear: none;
}
.v-select input[type=search]:disabled {
cursor: pointer;
}
.v-select li a {
cursor: pointer;
}
.v-select .active a {
background: rgba(50, 50, 50, .1);
color: #333;
}
.v-select .highlight a,
.v-select li:hover > a {
background: #f0f0f0;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div id="app">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<selector></selector>
</div>
<template id="selector-template">
<div class="dropdown v-select" :class="dropdownClasses">
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
<span class="form-control" v-if="!searchable && isValueEmpty">
{{ placeholder }}
</span>
<span class="selected-tag" v-for="option in valueAsArray">
{{ getOptionLabel(option) }}
<button v-if="multiple" @click="select(option)" type="button" class="close">
<span aria-hidden="true">×</span>
</button>
</span>
<input
v-el:search
v-show="searchable"
v-model="search"
@keyup.delete="maybeDeleteValue"
@keyup.esc="onEscape"
@keyup.up.prevent="typeAheadUp"
@keyup.down.prevent="typeAheadDown"
@keyup.enter.prevent="typeAheadSelect"
@blur="open = false"
@focus="open = true"
type="search"
class="form-control"
:placeholder="searchPlaceholder"
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
>
<i v-el:open-indicator role="presentation" class="open-indicator"></i>
</div>
<ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }"
class="dropdown-menu animated">
<li v-for="option in filteredOptions"
:class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }"
@mouseover="typeAheadPointer = $index">
<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>
</div>
<script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script>
Vue.component('selector', {
template: '#selector-template',
props: {
value: {
default: null
},
options: {
type: Array,
default() {
return []
}
},
maxHeight: {
type: String,
default: '400px'
},
searchable: {
type: Boolean,
default: true
},
multiple: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ''
},
transition: {
type: String,
default: 'expand'
},
clearSearchOnSelect: {
type: Boolean,
default: true
},
label: {
type: String,
default: 'label'
},
onChange: Function
},
data() {
return {
search: '',
open: false,
typeAheadPointer: -1
}
},
watch: {
value(val, old) {
this.onChange && val !== old ? this.onChange(val) : null
},
options() {
this.$set('value', this.multiple ? [] : null)
},
multiple(val) {
this.$set('value', val ? [] : null)
},
filteredOptions() {
this.typeAheadPointer = 0;
}
},
methods: {
select(option) {
if (!this.isOptionSelected(option)) {
if (this.multiple) {
if (!this.value) {
this.$set('value', [option])
} else {
this.value.push(option)
}
} else {
this.value = option
}
} else {
if (this.multiple) {
this.value.$remove(option)
}
}
this.onAfterSelect(option)
},
onAfterSelect(option) {
if (!this.multiple) {
this.open = !this.open;
this.$els.search.blur()
}
if (this.clearSearchOnSelect) {
this.search = ''
}
// if( this.onChange ) {
// this.onChange(this.$get('value'))
// }
},
toggleDropdown(e) {
if (e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el) {
if (this.open) {
this.$els.search.blur(); // dropdown will close on blur
} else {
this.open = true;
this.$els.search.focus()
}
}
},
isOptionSelected(option) {
if (this.multiple && this.value) {
return this.value.indexOf(option) !== -1
}
return this.value === option;
},
getOptionValue(option) {
if (typeof option === 'object' && option.value) {
return option.value;
}
return option;
},
getOptionLabel(option) {
if (typeof option === 'object') {
if (this.label && option[this.label]) {
return option[this.label];
} else if (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() {
if (this.filteredOptions[this.typeAheadPointer]) {
this.select(this.filteredOptions[this.typeAheadPointer]);
}
if (this.clearSearchOnSelect) {
this.search = "";
}
},
onEscape() {
if (!this.search.length) {
this.$els.search.blur()
} else {
this.$set('search', '')
}
},
maybeDeleteValue() {
if (!this.$els.search.value.length && this.value) {
return this.multiple ? this.value.pop() : this.$set('value', null)
}
}
},
computed: {
dropdownClasses() {
return {
open: this.open,
searchable: this.searchable
}
},
searchPlaceholder() {
if (this.isValueEmpty && this.placeholder) {
return this.placeholder;
}
},
filteredOptions() {
return this.$options.filters.filterBy(this.options, this.search)
},
isValueEmpty() {
if (this.value) {
if (typeof this.value === 'object') {
return !Object.keys(this.value).length
}
return !this.value.length
}
return true;
},
valueAsArray() {
if (this.multiple) {
return this.value
} else if (this.value) {
return [this.value]
}
return []
}
}
});
new Vue({
el:"#app"
});
</script>
<script>
//下面是advanced.js里面的内容，不知道放到什么地方，请大神帮忙看看。
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"}
];
</script>
</body>
</html>
var Selector = Vue.component('selector', {
//...
});
new Vue({
el:"#app",
components: {
selector: Selector // 把组件挂到 Vue 实例上
},
data: {
options: [ // 组件数据绑定的是 props 里的 options，需要从父组件 data 中传递过去
{value: "AF", label: "Afghanistan"},
{value: "AX", label: "Åland Islands"}
]
}
});