【vue2静态复古win95简历网页】模仿电脑桌面实现

最新推荐文章于 2025-10-13 23:07:09 发布

原创

最新推荐文章于 2025-10-13 23:07:09 发布 · 828 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #开发语言

文章描述了一个Vue.js应用程序中如何管理桌面图标的窗口状态，包括窗口ID、位置、内容和全屏状态等信息，使用Vuex进行状态存储和更新，通过组件动态渲染窗口内容，并处理窗口的打开、关闭和最小化操作。此外，还涉及到了窗口尺寸变化时的响应式布局调整。

整体效果：

在这里插入图片描述
桌面图标的状态存在了store/index.js中定义的windows列表中：

    windows: [
      {
   
   
        windowId: "BiographyWindow", // 窗口ID
        windowState: "close", // 窗口状态[open, close, minimize]
        displayName: "Biography", // 展示名字(title under icon)
        windowComponent: 'window', // 窗口组件 (can be changed to use modified windows)
        windowContent: 'bio', //窗口内容(used under slots)
        windowContentPadding: {
   
   
          top: null,
          right: null,
          bottom: null,
          left: null
        }, // 窗口内容边距
        position: "absolute", //窗口位置
        positionX: "5vw", // Window Position X (when first opened)
        positionY: "5%", // Window Position Y (when first opened)
        iconImage: "bio.png", // Window Icon Image
        altText: "Biography", // Window Icon Alt Text
        fullscreen: false //窗口全屏状态 [true, false]
      },
      {
   
   
        windowId: "ResumeWindow", // Unique ID
        windowState: "close", // Window State [open, close, minimize]
        displayName: "Résumé", // Display Name (title under icon)
        windowComponent: 'window', // Window Component (can be changed to use modified windows)
        windowContent: 'resume', // Window Content (used under slots)
        windowContentPadding: {
   
   
          top: '0',
          right: '0',
          bottom: '0',
          left: '0'
        }, // Window Content Padding 
        position: "absolute", // Window Position
        positionX: "10vw", // Window Position X (when first opened)
        positionY: "15vh", // Window Position Y (when first opened)
        iconImage: "resume.png", // Window Icon Image
        altText: "Résumé", // Window Icon Alt Text
        fullscreen: false // Window Fullscreen State [true, false]
      },
      {
   
   
        windowId: "PhotosWindow", 
          windowState: "close",
          displayName: "Photos",
          windowComponent: 'window',
          windowContent: 'photos',
          windowContentPadding: {
   
   
            top: '10px',
            right: '10px',
            bottom: '10px',
            left: '10px'
          },
          position: "absolute",
          positionX: "6vw",
          positionY: "12vh",
          iconImage