51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
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 = groupByPinyinInitial(countryCode);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<van-sticky>
|
||
|
|
<van-search v-model="value" placeholder="请输入国家和地区" />
|
||
|
|
</van-sticky>
|
||
|
|
<van-index-bar class="mt-[00px]" :index-list="alphabet">
|
||
|
|
<van-index-anchor
|
||
|
|
v-for="(countries, index) in groupedCountries"
|
||
|
|
:key="index"
|
||
|
|
:index="index"
|
||
|
|
>
|
||
|
|
<div class="text-#939393 text-[14px] pl-[16px] bg-[#F3F3F3]">{{ index }}</div>
|
||
|
|
<van-cell v-for="country in countries" :key="country.code" :title="country.cn"/>
|
||
|
|
</van-index-anchor>
|
||
|
|
</van-index-bar>
|
||
|
|
<van-back-top right="15vw" bottom="10vh" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
:deep(.van-index-anchor) {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
</style>
|