logo
English

导航菜单

Documents
Vue

MacWindow

Introduction

The MacWindow Vue component is the Vue version of the MacWindow component, providing the same macOS-style application window functionality but implemented using Vue 3 Composition API.

Component features:

  • Complete macOS-style window appearance with close, minimize, and maximize buttons
  • Tab functionality support for switching between different content areas
  • Toolbar and status bar slots for custom content
  • Sidebar layout support, suitable for file browsers and other applications
  • Customizable window height and shadow effects
  • Window operation event callback support
  • Multiple preset background color themes including default, primary, secondary, accent, neutral, info, success, warning, and error

Examples

Simplest window display:

代码编辑器-Vue版本
窗口内容区域
 
<script setup>
import { MacWindow } from '@coffic/cosy-ui/vue';
</script>

<template>
  <MacWindow title="代码编辑器-Vue版本">
    <div class="cosy:p-4">窗口内容区域</div>
  </MacWindow>
</template>

Props

bgType

Background color theme type, supporting multiple preset colors including base colors and opacity variants.

默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="默认背景窗口" height="h-48" bgType="base-100">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用默认背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="主要背景窗口" height="h-48" bgType="primary">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用主要背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="次要背景窗口" height="h-48" bgType="secondary">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用次要背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="强调背景窗口" height="h-48" bgType="accent">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用强调背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="中性背景窗口" height="h-48" bgType="neutral">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用中性背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="信息背景窗口" height="h-48" bgType="info">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用信息背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="成功背景窗口" height="h-48" bgType="success">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用成功背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="警告背景窗口" height="h-48" bgType="warning">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用警告背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>
默认背景窗口

这是使用默认背景的 MacWindow 组件。
主要背景窗口

这是使用主要背景的 MacWindow 组件。
次要背景窗口

这是使用次要背景的 MacWindow 组件。
强调背景窗口

这是使用强调背景的 MacWindow 组件。
中性背景窗口

这是使用中性背景的 MacWindow 组件。
信息背景窗口

这是使用信息背景的 MacWindow 组件。
成功背景窗口

这是使用成功背景的 MacWindow 组件。
警告背景窗口

这是使用警告背景的 MacWindow 组件。
错误背景窗口

这是使用错误背景的 MacWindow 组件。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { PlaceHolder } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="错误背景窗口" height="h-48" bgType="error">
        <PlaceHolder width="full" height="lg" padding="md">
            <p>这是使用错误背景的 MacWindow 组件。</p>
        </PlaceHolder>
    </MacWindow>
</template>

height

Custom window height, supporting pixel values or percentages.

自定义高度窗口

自定义高度示例

这个窗口使用了自定义高度 `h-32`，比默认的 `h-96` 要矮一些。

你可以通过 `height` 属性来调整窗口的高度。

 
<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
</script>

<template>
    <MacWindow title="自定义高度窗口" height="h-32" bgType="accent">
        <div style="padding: 1rem;">
            <h3 style="margin-bottom: 1rem; font-weight: 600;">自定义高度示例</h3>
            <p>这个窗口使用了自定义高度 `h-32`，比默认的 `h-96` 要矮一些。</p>
            <p>你可以通过 `height` 属性来调整窗口的高度。</p>
        </div>
    </MacWindow>
</template>

tabs

Tab configuration, supporting multiple tab switching.

设置-Vue版本
当前选择的标签: 外观
 
<!--
@component MacWindow.WithTabs

@description
带标签页的MacWindow组件示例，展示标签页功能。
使用Vue的响应式特性来处理标签切换，无需手动DOM操作。
-->
<template>
  <MacWindow
    title="设置-Vue版本"
    :tabs="['通用', '外观', '高级']"
    :defaultTab="activeTab"
    :onTabClick="handleTabClick"
  >
    <div class="cosy:p-4">
      <div>当前选择的标签: {{ activeTab }}</div>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态
const activeTab = ref('外观');

// 处理标签点击事件
const handleTabClick = (tab: string) => {
  console.log('切换到标签:', tab);
  activeTab.value = tab;
};
</script>

onClose

Window close event callback function.

应用窗口-Vue版本
窗口内容区域
 
<!--
@component MacWindow.WithEvents

@description
带事件处理的MacWindow组件示例，展示窗口操作事件。
使用Vue的响应式特性来显示事件信息，而不是使用alert。
-->
<template>
  <MacWindow
    title="应用窗口-Vue版本"
    :tabs="['信息', '设置', '帮助']"
    :onTabClick="handleTabClick"
    :onCloseWindow="handleCloseWindow"
    :onMinimizeWindow="handleMinimizeWindow"
    :onMaximizeWindow="handleMaximizeWindow"
  >
    <div class="cosy:p-4">
      <div class="cosy:space-y-2">
        <div class="cosy:font-medium">窗口内容区域</div>
        <div v-if="eventLog.length > 0" class="cosy:space-y-1">
          <div class="cosy:text-sm cosy:text-base-content/70">最近事件：</div>
          <div
            v-for="(event, index) in eventLog"
            :key="index"
            class="cosy:text-xs cosy:bg-base-200 cosy:px-2 cosy:py-1 cosy:rounded"
          >
            {{ event }}
          </div>
        </div>
      </div>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态 - 事件日志
const eventLog = ref<string[]>([]);

// 添加事件到日志
const addEvent = (event: string) => {
  const timestamp = new Date().toLocaleTimeString();
  eventLog.value.unshift(`${timestamp} - ${event}`);
  // 只保留最近5个事件
  if (eventLog.value.length > 5) {
    eventLog.value = eventLog.value.slice(0, 5);
  }
};

// 处理标签点击事件
const handleTabClick = (tab: string) => {
  console.log('切换到标签:', tab);
  addEvent(`切换到标签: ${tab}`);
};

// 处理关闭窗口事件
const handleCloseWindow = () => {
  console.log('关闭窗口');
  addEvent('关闭窗口');
};

// 处理最小化窗口事件
const handleMinimizeWindow = () => {
  console.log('最小化窗口');
  addEvent('最小化窗口');
};

// 处理最大化窗口事件
const handleMaximizeWindow = () => {
  console.log('最大化窗口');
  addEvent('最大化窗口');
};
</script>

onMinimize

Window minimize event callback function.

应用窗口-Vue版本
窗口内容区域
 
<!--
@component MacWindow.WithEvents

@description
带事件处理的MacWindow组件示例，展示窗口操作事件。
使用Vue的响应式特性来显示事件信息，而不是使用alert。
-->
<template>
  <MacWindow
    title="应用窗口-Vue版本"
    :tabs="['信息', '设置', '帮助']"
    :onTabClick="handleTabClick"
    :onCloseWindow="handleCloseWindow"
    :onMinimizeWindow="handleMinimizeWindow"
    :onMaximizeWindow="handleMaximizeWindow"
  >
    <div class="cosy:p-4">
      <div class="cosy:space-y-2">
        <div class="cosy:font-medium">窗口内容区域</div>
        <div v-if="eventLog.length > 0" class="cosy:space-y-1">
          <div class="cosy:text-sm cosy:text-base-content/70">最近事件：</div>
          <div
            v-for="(event, index) in eventLog"
            :key="index"
            class="cosy:text-xs cosy:bg-base-200 cosy:px-2 cosy:py-1 cosy:rounded"
          >
            {{ event }}
          </div>
        </div>
      </div>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态 - 事件日志
const eventLog = ref<string[]>([]);

// 添加事件到日志
const addEvent = (event: string) => {
  const timestamp = new Date().toLocaleTimeString();
  eventLog.value.unshift(`${timestamp} - ${event}`);
  // 只保留最近5个事件
  if (eventLog.value.length > 5) {
    eventLog.value = eventLog.value.slice(0, 5);
  }
};

// 处理标签点击事件
const handleTabClick = (tab: string) => {
  console.log('切换到标签:', tab);
  addEvent(`切换到标签: ${tab}`);
};

// 处理关闭窗口事件
const handleCloseWindow = () => {
  console.log('关闭窗口');
  addEvent('关闭窗口');
};

// 处理最小化窗口事件
const handleMinimizeWindow = () => {
  console.log('最小化窗口');
  addEvent('最小化窗口');
};

// 处理最大化窗口事件
const handleMaximizeWindow = () => {
  console.log('最大化窗口');
  addEvent('最大化窗口');
};
</script>

onMaximize

Window maximize event callback function.

应用窗口-Vue版本
窗口内容区域
 
<!--
@component MacWindow.WithEvents

@description
带事件处理的MacWindow组件示例，展示窗口操作事件。
使用Vue的响应式特性来显示事件信息，而不是使用alert。
-->
<template>
  <MacWindow
    title="应用窗口-Vue版本"
    :tabs="['信息', '设置', '帮助']"
    :onTabClick="handleTabClick"
    :onCloseWindow="handleCloseWindow"
    :onMinimizeWindow="handleMinimizeWindow"
    :onMaximizeWindow="handleMaximizeWindow"
  >
    <div class="cosy:p-4">
      <div class="cosy:space-y-2">
        <div class="cosy:font-medium">窗口内容区域</div>
        <div v-if="eventLog.length > 0" class="cosy:space-y-1">
          <div class="cosy:text-sm cosy:text-base-content/70">最近事件：</div>
          <div
            v-for="(event, index) in eventLog"
            :key="index"
            class="cosy:text-xs cosy:bg-base-200 cosy:px-2 cosy:py-1 cosy:rounded"
          >
            {{ event }}
          </div>
        </div>
      </div>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MacWindow } from '@coffic/cosy-ui/vue';

// 响应式状态 - 事件日志
const eventLog = ref<string[]>([]);

// 添加事件到日志
const addEvent = (event: string) => {
  const timestamp = new Date().toLocaleTimeString();
  eventLog.value.unshift(`${timestamp} - ${event}`);
  // 只保留最近5个事件
  if (eventLog.value.length > 5) {
    eventLog.value = eventLog.value.slice(0, 5);
  }
};

// 处理标签点击事件
const handleTabClick = (tab: string) => {
  console.log('切换到标签:', tab);
  addEvent(`切换到标签: ${tab}`);
};

// 处理关闭窗口事件
const handleCloseWindow = () => {
  console.log('关闭窗口');
  addEvent('关闭窗口');
};

// 处理最小化窗口事件
const handleMinimizeWindow = () => {
  console.log('最小化窗口');
  addEvent('最小化窗口');
};

// 处理最大化窗口事件
const handleMaximizeWindow = () => {
  console.log('最大化窗口');
  addEvent('最大化窗口');
};
</script>

Slots

toolbar

Toolbar slot for placing toolbar buttons and functionality.

文件浏览器-Vue版本
窗口内容
就绪
 
<!--
@component MacWindow.WithToolbar

@description
带工具栏的MacWindow组件示例，展示工具栏和状态栏插槽的使用。
-->
<template>
  <MacWindow title="文件浏览器-Vue版本">
    <div slot="toolbar">
      <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
        <SearchIcon class="cosy:w-4 cosy:h-4" />
      </button>
      <button class="cosy:btn cosy:btn-ghost cosy:btn-sm">
        <SettingsIcon class="cosy:w-4 cosy:h-4" />
      </button>
    </div>

    <div class="cosy:p-4">窗口内容</div>

    <div slot="status">
      <div class="cosy:text-xs">就绪</div>
      <button class="cosy:btn cosy:btn-ghost cosy:btn-xs">
        <InfoIcon class="cosy:w-4 cosy:h-4" />
      </button>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
import { SearchIcon, SettingsIcon, InfoIcon } from '@coffic/cosy-ui/vue';
</script>

Sidebar slot for creating file browser-style layouts.

文件浏览器-Vue版本
文件夹
📁 文档
📁 图片
📁 音乐
📁 视频
文件列表
📄document.pdf
📄report.docx
📄presentation.pptx
 
<!--
@component MacWindow.WithSidebar

@description
带侧边栏的MacWindow组件示例，展示侧边栏插槽的使用。
-->
<template>
  <MacWindow title="文件浏览器-Vue版本">
    <div
      slot="sidebar"
      class="cosy:w-64 cosy:bg-base-200 cosy:border-r cosy:border-base-300"
    >
      <div class="cosy:p-4">
        <div class="cosy:font-medium cosy:mb-2">文件夹</div>
        <div class="cosy:space-y-1">
          <div
            class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded cosy:bg-base-100"
          >
            📁 文档
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 图片
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 音乐
          </div>
          <div class="cosy:text-sm cosy:px-2 cosy:py-1 cosy:rounded">
            📁 视频
          </div>
        </div>
      </div>
    </div>

    <div class="cosy:p-4">
      <div class="cosy:font-medium cosy:mb-4">文件列表</div>
      <div class="cosy:space-y-2">
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">document.pdf</span>
        </div>
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">report.docx</span>
        </div>
        <div class="cosy:flex cosy:items-center cosy:space-x-2">
          <span class="cosy:text-lg">📄</span>
          <span class="cosy:text-sm">presentation.pptx</span>
        </div>
      </div>
    </div>
  </MacWindow>
</template>

<script setup lang="ts">
import { MacWindow } from '@coffic/cosy-ui/vue';
</script>

default

Default slot for placing the main content of the window.

搜索