logo
简体中文

导航菜单

文档
Vue

MacWindow

简介

MacWindow Vue 组件是 MacWindow 组件的 Vue 版本，提供相同的 macOS 风格应用窗口功能，但使用 Vue 3 Composition API 实现。

组件特性：

  • 完整的 macOS 风格窗口外观，包含关闭、最小化、最大化按钮
  • 支持标签页功能，可切换不同内容区域
  • 提供工具栏和状态栏插槽，支持自定义内容
  • 支持侧边栏布局，适合文件浏览器等应用
  • 可自定义窗口高度和阴影效果
  • 支持窗口操作事件回调
  • 支持多种预设背景色主题，包括默认、主要、次要、强调、中性、信息、成功、警告、错误

案例

最简单的窗口展示：

代码编辑器-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

背景色主题类型，支持多种预设颜色，包括基础色和透明度变体。

默认背景窗口

这是使用默认背景的 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

自定义窗口高度，支持像素值或百分比。

自定义高度窗口

自定义高度示例

这个窗口使用了自定义高度 `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

标签页配置，支持多个标签页切换。

设置-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

窗口关闭事件回调函数。

应用窗口-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

窗口最小化事件回调函数。

应用窗口-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

窗口最大化事件回调函数。

应用窗口-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

工具栏插槽，用于放置工具栏按钮和功能。

文件浏览器-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>

侧边栏插槽，用于创建文件浏览器风格的布局。

文件浏览器-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

默认插槽，用于放置窗口的主要内容。

搜索