这里使用开源库 flag-icons
源码地址：https://github.com/lipis/flag-icons
源码的介绍如下：
1、安装依赖：
npm install flag-icons --save
# or
yarn add flag-icons 2、在main.ts引入 CSS 文件：
import 'flag-icons/css/flag-icons.min.css'; // 引入国旗css库
3、封装成一个通用组件
这里只做了简单封装，国旗大小我直接写死了，可根据需求修改
在项目中新建组件 命名 country.vue
country.vue 组件完整代码如下：
<template><div :id="'flag' + timeId" style="width: 20px; height: 16px;"></div>
</template>
<script lang='ts' setup>
import { nextTick, onMounted, ref, watch } from 'vue';const props = defineProps({code: {type: String,default: '',}
})
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯一id
const countryCode = ref(props.code); // 国家编码// 根据国家编码生成国旗图标
function generateFlagIcon(code: string) {const flagContainer = document.getElementById(`flag${timeId.value}`);if (!flagContainer) returnflagContainer.classList.add('fi');flagContainer.classList.add(`fi-${code.toLowerCase()}`);
}
watch(() => props.code, (val) => {// console.log('国家编号', val);countryCode.value = valnextTick(() => {// 调用函数生成国旗图标generateFlagIcon(countryCode.value);})
})onMounted(() => {nextTick(() => {// 调用函数生成国旗图标generateFlagIcon(countryCode.value);})
})
</script>
<style scoped lang='scss'></style>
4、使用组件
