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
75
76
77
78
79
80
81
82
|
<template>
<v-card class="mx-auto" variant="outlined" max-height="500">
<v-card-title class="text-h5 font-weight-regular align-center">
<span>{{ currentTitle }}</span>
</v-card-title>
<v-window v-model="location" show-arrows="hover">
<v-window-item :value="1">
<v-card-text>
<v-container fluid>
<v-row>
<v-col>
<v-card-text>Title Size: {{ titleSize }}px</v-card-text>
<v-slider
v-model="titleSize"
:min="25"
:max="35"
step="1"
></v-slider>
</v-col>
<v-col>
<v-card-text>Content Size</v-card-text>
<v-radio-group v-model="contentSize" column>
<v-radio label="text-h4" value="text-h4"></v-radio>
<v-radio label="text-h5" value="text-h5"></v-radio>
<v-radio label="text-h6" value="text-h6"></v-radio>
</v-radio-group>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-window-item>
<v-window-item :value="2">
<v-card-text>
<span class="text-h2">Card {{ n }}</span>
</v-card-text>
</v-window-item>
</v-window>
</v-card>
</template>
<script>
export default {
name: "SettingsPage",
props: ["realTitleSize", "realContentSize"],
emits: ["updateTitleSize", "updateContentSize"],
computed: {
currentTitle() {
switch (this.location) {
case 1:
return "MainPage Settings";
default:
return "About Otonashi";
}
},
},
watch: {
// eslint-disable-next-line no-unused-vars
titleSize(s, _) {
this.$emit("updateTitleSize", s);
},
// eslint-disable-next-line no-unused-vars
contentSize(s, _) {
this.$emit("updateContentSize", s);
},
},
mounted() {
// Sync titleSize with realTitleSize
this.titleSize = this.realTitleSize;
// Same
this.contentSize = this.realContentSize;
},
data: () => ({
titleSize: 35,
contentSize: "text-h5",
location: 1,
}),
};
</script>
|
