在Vuejs中带有标志的下拉菜单

Question

我想做一个下拉与标志的电话号码的形式使用Vuejs，但我没有找到一个解决方案。我尝试了所有的解决方案在互联网上使用html和css，但没有结果，我也尝试了vuejs解决方案flag-dropdown- value，但安装总是给我错误，请任何帮助是非常感激的。

Answer 1

您可以简单地使用vue-select包实现这一点。

Live Demo:

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: {
options: [
{ value: 'AF', label: 'Afghanistan'},
{ value: 'AX', label: 'Aland Islands'},
{ value: 'AL', label: 'Albania'},
{ value: 'DZ', label: 'Algeria'},
{ value: 'AS', label: 'American Samoa'}
]
}
});

<script src="https://unpkg.com/vue@2.7.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@2.6.4/dist/vue-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"/>
<div id="app">
<v-select :options="options">
<template slot="option" slot-scope="option">
<span class="flag-icon flag-icon-squared" :class="['flag-icon-' + option.value.toLowerCase()]"></span>
<span class="flag-text">{{ option.label }}</span>
</template>
</v-select>
</div>