@coffic/cosy-ui 0.6.16 → 0.6.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -19,6 +19,7 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
|
|
|
19
19
|
<MacWindow
|
|
20
20
|
title="设置"
|
|
21
21
|
:tabs="['通用', '外观', '高级']"
|
|
22
|
+
defaultTab="外观"
|
|
22
23
|
:onTabClick="(tab) => {
|
|
23
24
|
activeTab = tab;
|
|
24
25
|
console.log('切换到标签:', tab);
|
|
@@ -34,7 +35,7 @@ MacWindow 组件模拟 macOS 风格的应用窗口，包含标题栏、工具栏
|
|
|
34
35
|
import { ref } from 'vue';
|
|
35
36
|
import { MacWindow } from 'cosy-ui';
|
|
36
37
|
|
|
37
|
-
const activeTab = ref('
|
|
38
|
+
const activeTab = ref('外观');
|
|
38
39
|
</script>
|
|
39
40
|
```
|
|
40
41
|
|
|
@@ -77,6 +78,7 @@ const activeTab = ref('通用');
|
|
|
77
78
|
@prop {String} [title=''] - 窗口标题
|
|
78
79
|
@prop {Boolean} [withShadow=true] - 是否显示阴影效果
|
|
79
80
|
@prop {Array} [tabs=[]] - 标签页字符串数组，如 ['标签1', '标签2', '标签3']
|
|
81
|
+
@prop {String} [defaultTab=''] - 默认选中的标签页
|
|
80
82
|
@prop {Function} [onCloseWindow=null] - 关闭窗口时调用的函数
|
|
81
83
|
@prop {Function} [onMinimizeWindow=null] - 最小化窗口时调用的函数
|
|
82
84
|
@prop {Function} [onMaximizeWindow=null] - 最大化窗口时调用的函数
|
|
@@ -119,6 +121,10 @@ export default defineComponent({
|
|
|
119
121
|
type: Array as PropType<string[]>,
|
|
120
122
|
default: () => []
|
|
121
123
|
},
|
|
124
|
+
defaultTab: {
|
|
125
|
+
type: String,
|
|
126
|
+
default: ''
|
|
127
|
+
},
|
|
122
128
|
onCloseWindow: {
|
|
123
129
|
type: Function,
|
|
124
130
|
default: null
|
|
@@ -139,10 +145,10 @@ export default defineComponent({
|
|
|
139
145
|
setup(props) {
|
|
140
146
|
const showAlertDialog = ref(false)
|
|
141
147
|
const alertMessage = ref('')
|
|
142
|
-
const activeTab = ref(
|
|
148
|
+
const activeTab = ref(props.defaultTab)
|
|
143
149
|
|
|
144
|
-
//
|
|
145
|
-
if (props.tabs.length > 0
|
|
150
|
+
// 如果没有设置默认标签或默认标签不在tabs中，则选择第一个标签
|
|
151
|
+
if ((!activeTab.value || !props.tabs.includes(activeTab.value)) && props.tabs.length > 0) {
|
|
146
152
|
activeTab.value = props.tabs[0] as string
|
|
147
153
|
}
|
|
148
154
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { ref } from 'vue';
|
|
3
3
|
import { MacWindow } from './index';
|
|
4
4
|
|
|
5
|
-
const activeTab = ref('
|
|
5
|
+
const activeTab = ref('外观');
|
|
6
6
|
|
|
7
7
|
const handleTabClick = (tab) => {
|
|
8
8
|
activeTab.value = tab;
|
|
@@ -11,7 +11,7 @@ const handleTabClick = (tab) => {
|
|
|
11
11
|
</script>
|
|
12
12
|
|
|
13
13
|
<template>
|
|
14
|
-
<MacWindow title="设置" :tabs="['通用', '外观', '高级']" :onTabClick="handleTabClick">
|
|
14
|
+
<MacWindow title="设置" :tabs="['通用', '外观', '高级']" defaultTab="外观" :onTabClick="handleTabClick">
|
|
15
15
|
<div class="cosy:p-4">
|
|
16
16
|
<div v-if="activeTab === '通用'">通用设置内容</div>
|
|
17
17
|
<div v-if="activeTab === '外观'">外观设置内容</div>
|