header.vue
1.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script setup lang="ts">
import type {
LayoutHeaderMenuAlignType,
LayoutHeaderModeType,
SelectOption,
} from '@vben/types';
import { $t } from '@vben/locales';
import SelectItem from '../select-item.vue';
import SwitchItem from '../switch-item.vue';
import ToggleItem from '../toggle-item.vue';
defineProps<{ disabled: boolean }>();
const headerEnable = defineModel<boolean>('headerEnable');
const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
const headerMenuAlign =
defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
const localeItems: SelectOption[] = [
{
label: $t('preferences.header.modeStatic'),
value: 'static',
},
{
label: $t('preferences.header.modeFixed'),
value: 'fixed',
},
{
label: $t('preferences.header.modeAuto'),
value: 'auto',
},
{
label: $t('preferences.header.modeAutoScroll'),
value: 'auto-scroll',
},
];
const headerMenuAlignItems: SelectOption[] = [
{
label: $t('preferences.header.menuAlignStart'),
value: 'start',
},
{
label: $t('preferences.header.menuAlignCenter'),
value: 'center',
},
{
label: $t('preferences.header.menuAlignEnd'),
value: 'end',
},
];
</script>
<template>
<SwitchItem v-model="headerEnable" :disabled="disabled">
{{ $t('preferences.header.visible') }}
</SwitchItem>
<SelectItem
v-model="headerMode"
:disabled="!headerEnable"
:items="localeItems"
>
{{ $t('preferences.mode') }}
</SelectItem>
<ToggleItem
v-model="headerMenuAlign"
:disabled="!headerEnable"
:items="headerMenuAlignItems"
>
{{ $t('preferences.header.menuAlign') }}
</ToggleItem>
</template>