当前位置：首页 > article >正文

在vue3中根据需要展示特定国家的国旗

article 2025/1/7 23:53:27

这里使用开源库 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) return
  flagContainer.classList.add('fi');
  flagContainer.classList.add(`fi-${code.toLowerCase()}`);
}
watch(() => props.code, (val) => {
  // console.log('国家编号', val);

  countryCode.value = val
  nextTick(() => {
    // 调用函数生成国旗图标
    generateFlagIcon(countryCode.value);
  })
})

onMounted(() => {
  nextTick(() => {
    // 调用函数生成国旗图标
    generateFlagIcon(countryCode.value);
  })
})
</script>
<style scoped lang='scss'></style>