vue-country-flag在vue3+ts中详细使用

好的，下面是在 Vue 3 + TypeScript 中详细使用 `vue-country-flag` 的步骤：

1. 安装 `vue-country-flag`：

npm install vue-country-flag --save

2. 在 Vue 组件中使用 `vue-country-flag`：

<template>
  <div>
    <vue-country-flag :code="countryCode" :size="32" />
    <p>当前国家代码：{{ countryCode }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import VueCountryFlag from 'vue-country-flag'

export default defineComponent({
  name: 'MyComponent',
  components: {
    VueCountryFlag
  },
  setup() {
    const countryCode = ref('CN')

    return {
      countryCode
    }
  }
})
</script>

以上代码中，我们使用 `defineComponent` 函数定义了一个名为 `MyComponent` 的 Vue 组件，并在其中引入了 `vue-country-flag` 组件，并将其注册为局部组件。

在 `setup` 函数中，我们使用 `ref` 函数创建了一个名为 `countryCode` 的响应式变量，并将其初始值设为 `'CN'`。

在模板中，我们使用 `vue-country-flag` 组件并通过 `:code` 属性绑定了 `countryCode` 变量，通过 `:size` 属性设置了图标尺寸为 `32`。

另外，我们在模板中还使用了插值语法来显示当前国家代码。

需要注意的是，`vue-country-flag` 的 `code` 属性只接受大写的 ISO 3166-1 两位字母国家代码，如果传入其他值，`vue-country-flag` 会显示一个空白图标。

希望以上内容能够帮助您更好地使用 `vue-country-flag`。