29 lines
1.2 KiB
Vue
29 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { nextTick } from 'vue'
|
|
|
|
const mode = defineModel<'firstleg' | 'external'>({ required: true })
|
|
const tabs = [{ key: 'firstleg', label: '头程货物' }, { key: 'external', label: '外接货物' }] as const
|
|
async function handleKeydown(event: KeyboardEvent, index: number) {
|
|
let next: number
|
|
if (event.key === 'ArrowRight') next = (index + 1) % tabs.length
|
|
else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length
|
|
else if (event.key === 'Home') next = 0
|
|
else if (event.key === 'End') next = tabs.length - 1
|
|
else return
|
|
event.preventDefault()
|
|
const key = tabs[next]!.key
|
|
mode.value = key
|
|
await nextTick()
|
|
document.getElementById(`appointment-cargo-tab-${key}`)?.focus()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="density-status-tabs" role="tablist" aria-label="预约货源类型">
|
|
<button v-for="(tab, index) in tabs" :id="`appointment-cargo-tab-${tab.key}`" :key="tab.key" type="button" role="tab"
|
|
:aria-selected="mode === tab.key" :tabindex="mode === tab.key ? 0 : -1"
|
|
:class="{ 'is-active': mode === tab.key }"
|
|
@click="mode = tab.key" @keydown="handleKeydown($event, index)">{{ tab.label }}</button>
|
|
</div>
|
|
</template>
|