更新记录

1.0.0（2026-02-10） 下载此版本

高性能国家选择器组件，支持搜索、CDN SVG图标

平台兼容性

uni-app(4.0)

其他

df-country-select

高性能国家/地区选择器组件，使用CDN加载SVG国旗图标。

特性

• ✅ 轻量级，无本地图片资源
• ✅ 支持250+国家/地区
• ✅ 实时搜索过滤
• ✅ 支持本地化名称显示
• ✅ CDN加载SVG图标，清晰度高
• ✅ 流畅的动画效果

基础用法

<template>
  <view>
    <df-country-select v-model="countryCode" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      countryCode: '86'
    }
  }
}
</script>

Props

Events

使用示例

<template>
  <view class="container">
    <!-- 完整显示 -->
    <df-country-select
      v-model="countryCode"
      :show-flag="true"
      :show-code="true"
      :show-name="true"
    />

    <!-- 仅显示区号 -->
    <df-country-select
      v-model="countryCode"
      :show-flag="false"
      :show-code="true"
    />

    <!-- 仅显示国旗和区号 -->
    <df-country-select
      v-model="countryCode"
      :show-flag="true"
      :show-code="true"
      :show-name="false"
    />
  </view>
</template>

注意事项

1. SVG图标从CDN加载，需要网络连接
2. 如需离线使用，请下载SVG文件到本地并修改cdnBaseUrl
3. 小程序环境可能需要配置downloadFile域名

平台支持

• H5
• App (iOS/Android)
• 微信小程序（需配置网络域名）