如何在VueJS的选择列表中插入图标?

Question

我想在选择下拉菜单中的每个国家的名称附近插入国家图标。我有一个有这些图标的文件夹，路径应该指定到这个文件夹。

代码如下:

<select v-model="defCountry">
<option
v-for="item in countries"
:selected="item.def"
:key="item.key"
:value="{key: item.key, val: item.val, def: item.def}"
>
{{item.val}}
</option>
</select>

另外，澄清key字段与文件名匹配是很重要的，因此将其自动化是很好的。我的意思是，如果文件名，例如，ZW.svg与名称为ZW的key匹配，那么这个文件应该作为一个图标。

我如何实现这个?

谢谢你的回答!

Answer 1

只需在国家名称前添加图像标签(根据您的项目更改图像路径)。但是你必须添加一些库来将原生选择更改为自定义选择，或者使用标志图标字体来实现这一点，正如巴拉特在他的评论中所说。

<select v-model="defCountry">
<option
v-for="item in countries"
:selected="item.def"
:key="item.key"
:value="{key: item.key, val: item.val, def: item.def}"
>
<img src="../assets/images/flags/{{item.key}}.svg" /> {{item.val}}
</option>
</select>

Answer 2

直接使用基本的选择，我们所能做的就是使用像font awesome这样的字体并添加一个图标。否则你需要自定义下拉(菜单一样)。下面是使用el-select

的示例https://jsfiddle.net/budgw/L4y8zw1e/36/

select {
font-family: 'FontAwesome'
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<label>Font Awesome</label>
<select class="fa">
<option value="">Select</option>
<option class="fa">&#xf2b9 Some text </option>
<option class="fa"> &#xf30b Some text  </option>
<option class="fa">&#xf0f3 Some text  </option>
<option class="fa">&#xf273 Some text  </option>
</select>