mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useTranslate } from '@demo/use-translate';
|
|
|
|
const i18n = {
|
|
'zh-CN': {
|
|
text: '文本',
|
|
customIndexList: '自定义索引列表',
|
|
},
|
|
'en-US': {
|
|
text: 'Text',
|
|
customIndexList: 'Custom Index List',
|
|
},
|
|
};
|
|
|
|
const t = useTranslate(i18n);
|
|
const activeTab = ref(0);
|
|
const indexList: string[] = [];
|
|
const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
|
|
const charCodeOfA = 'A'.charCodeAt(0);
|
|
|
|
for (let i = 0; i < 26; i++) {
|
|
indexList.push(String.fromCharCode(charCodeOfA + i));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<van-tabs v-model:active="activeTab">
|
|
<van-tab :title="t('basicUsage')">
|
|
<van-index-bar>
|
|
<div v-for="index in indexList" :key="index">
|
|
<van-index-anchor :index="index" />
|
|
<van-cell :title="t('text')" />
|
|
<van-cell :title="t('text')" />
|
|
<van-cell :title="t('text')" />
|
|
</div>
|
|
</van-index-bar>
|
|
</van-tab>
|
|
|
|
<van-tab :title="t('customIndexList')">
|
|
<van-index-bar :index-list="customIndexList">
|
|
<div v-for="index in customIndexList" :key="index">
|
|
<van-index-anchor :index="index">
|
|
{{ t('title') + index }}
|
|
</van-index-anchor>
|
|
<van-cell :title="t('text')" />
|
|
<van-cell :title="t('text')" />
|
|
<van-cell :title="t('text')" />
|
|
</div>
|
|
</van-index-bar>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</template>
|