liveh5-nuxt/app/pages/countryRegion/index.vue

<script setup>
import {ref} from 'vue';
import pinyin from 'pinyin';
import countryCode from './data/index.js';

const value = ref('');
const alphabet = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];

function groupByPinyinInitial(data) {
  const grouped = {};
  data.forEach(country => {
    const initial = pinyin(country.cn, {style: pinyin.STYLE_FIRST_LETTER})[0][0].toUpperCase();
    if (!grouped[initial]) {
      grouped[initial] = [];
    }
    grouped[initial].push(country);
  });

  return grouped;
}

const groupedCountries = ref([])
const initData=()=>{
  groupedCountries.value = groupByPinyinInitial(countryCode);
}
const searchCountry = computed(() => {
  if (!value.value) {
    return groupedCountries.value;
  }
  return Object.keys(groupedCountries.value).reduce((filtered, initial) => {
    const countries = groupedCountries.value[initial].filter(country =>
        country.cn.includes(value.value)
    );
    if (countries.length > 0) {
      filtered[initial] = countries;
    }
    return filtered;
  }, {});
});
initData()
</script>

<template>
  <div>
    <van-sticky>
      <van-search v-model="value" placeholder="请输入国家和地区"/>
    </van-sticky>
    <van-index-bar sticky :sticky-offset-top="55"  :index-list="alphabet">
      <template v-for="(countries, index) in searchCountry" :key="index">
        <van-index-anchor
            :index="index"
        ></van-index-anchor>
        <van-cell v-for="country in countries" :key="country.code" :title="country.cn">
          <div class="pr-[25px]"> +{{ country.zone }}</div>
        </van-cell>
      </template>


    </van-index-bar>
    <van-back-top right="15vw" bottom="10vh"/>
  </div>
</template>

<style scoped>

</style>