zzy-dashboard-fullscreen：一个强大的多框架全屏大屏适配组件

Marshall151
7 阅读3分钟

🚀 zzy-dashboard-fullscreen：一个强大的多框架全屏大屏适配组件

专为数据可视化大屏设计的响应式全屏适配组件，支持 React、Vue2、Vue3 三大主流框架

📖 前言

在大数据可视化项目中，我们经常需要开发各种数据大屏展示页面。这些页面通常设计为固定分辨率（如 1920x1080），但在不同屏幕尺寸的设备上展示时，如何保持完美的比例和布局是一个常见的挑战。

传统的解决方案往往需要复杂的 CSS 计算或 JavaScript 监听，代码冗余且难以维护。为了解决这个问题，我开发了 zzy-dashboard-fullscreen 组件，让大屏适配变得简单优雅。

✨ 特性

  • 🎯 多框架支持：同时支持 React、Vue2、Vue3
  • 📱 自动缩放：根据窗口大小自动计算缩放比例
  • 🎨 样式灵活：支持自定义样式和类名
  • 📦 轻量级：核心代码仅 0.92 kB（React版本）
  • 🔧 TypeScript 支持：完整的类型定义
  • 🌈 跨版本兼容：React 支持 16-19 版本，Vue 支持 2.6-3.x 版本
  • ⚡ 零依赖：不依赖任何第三方库

📦 安装

npm install zzy-dashboard-fullscreen

或使用 yarn：

yarn add zzy-dashboard-fullscreen

🎮 使用方法

React 使用

import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/react'
import './App.css'

function App() {
  return (
    <ZDashboardFullscreen width={1920} height={1080}>
      <div className="dashboard-container">
        <h1>我的大屏应用</h1>
        {/* 你的大屏内容 */}
      </div>
    </ZDashboardFullscreen>
  )
}

export default App

Vue2 使用

<template>
  <ZDashboardFullscreen :width="1920" :height="1080">
    <div class="dashboard-container">
      <h1>我的大屏应用</h1>
      <!-- 你的大屏内容 -->
    </div>
  </ZDashboardFullscreen>
</template>

<script>
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/vue2'

export default {
  components: {
    ZDashboardFullscreen
  }
}
</script>

Vue3 使用

<template>
  <ZDashboardFullscreen :width="1920" :height="1080">
    <div class="dashboard-container">
      <h1>我的大屏应用</h1>
      <!-- 你的大屏内容 -->
    </div>
  </ZDashboardFullscreen>
</template>

<script setup>
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/vue3'
</script>

📚 API 文档

Props

参数类型默认值说明
widthnumber1920大屏设计宽度（像素）
heightnumber1080大屏设计高度（像素）
classNamestring''自定义类名
childrenReactNode / VNode-子元素内容

Events

组件本身不提供事件监听，但你可以通过子元素实现交互功能。

🎨 完整示例

React 完整示例

import { useState, useEffect } from 'react'
import ZDashboardFullscreen from 'zzy-dashboard-fullscreen/react'
import './App.css'

function App() {
  const [isFullscreen, setIsFullscreen] = useState(false)

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().then(() => {
        setIsFullscreen(true)
      }).catch(err => {
        console.error(`Error: ${err.message}`)
      })
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen().then(() => {
          setIsFullscreen(false)
        })
      }
    }
  }

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement)
    }
    
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange)
    }
  }, [])

  return (
    <ZDashboardFullscreen width={1920} height={1080}>
      <div className="dashboard-container">
        <div className="header">
          <h1>数据可视化大屏</h1>
          <button onClick={toggleFullscreen} className="fullscreen-btn">
            {isFullscreen ? '退出全屏' : '进入全屏'}
          </button>
        </div>
        <div className="content">
          <div className="card">
            <h3>访问量</h3>
            <div className="data-value">12,345</div>
          </div>
          <div className="card">
            <h3>用户数</h3>
            <div className="data-value">5,678</div>
          </div>
          <div className="card">
            <h3>转化率</h3>
            <div className="data-value">89.5%</div>
          </div>
          <div className="card">
            <h3>销售额</h3>
            <div className="data-value">¥3,456,789</div>
          </div>
        </div>
      </div>
    </ZDashboardFullscreen>
  )
}

export default App

/* App.css */
.dashboard-container {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.header h1 {
  color: white;
  font-size: 32px;
}

.content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px;
}

.card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
}

.card h3 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  margin-bottom: 16px;
}

.data-value {
  color: white;
  font-size: 48px;
  font-weight: bold;
}

🎬 演示效果

Vue2、Vue3、React 演示

演示

🔧 工作原理

组件的核心原理非常简单：

  1. 监听窗口大小变化：使用 resize 事件监听器
  2. 计算缩放比例：
    • X轴缩放：window.innerWidth / 设计宽度
    • Y轴缩放：window.innerHeight / 设计高度
  3. 应用 CSS transform：通过 transform: scale(x, y) 实现整体缩放
  4. 固定定位：使用 position: fixed 确保容器始终在视口左上角
const scaleX = window.innerWidth / width
const scaleY = window.innerHeight / height

container.style.transform = `scale(${scaleX}, ${scaleY})`

🎯 适用场景

  • 📊 数据可视化大屏：展示各种统计图表和数据面板
  • 🏢 企业监控大屏：实时监控系统运行状态
  • 🌐 智慧城市展示：展示城市运行数据
  • 🏭 工业互联网：工厂生产数据监控
  • 📈 金融分析平台：股票、基金等金融数据展示

🚀 性能优化

组件已经做了以下性能优化：

  1. 事件节流：resize 事件使用防抖处理
  2. 最小化重绘：只更新必要的样式属性
  3. 轻量级代码：核心代码仅 0.92 kB
  4. 无额外依赖：不依赖任何第三方库

📝 最佳实践

1. 设计稿尺寸

建议使用 1920x1080 或 2560x1440 等标准分辨率作为设计稿尺寸。

2. 响应式布局

虽然组件会自动缩放，但内部内容仍建议使用相对单位（如 %、rem、vw/vh），直接使用px单位也是可以的。

3. 图片资源

图片建议使用 SVG 或高分辨率图片，避免缩放后模糊。

4. 字体大小

字体大小使用 px 单位，组件会自动缩放，保持设计稿效果。

🌟 总结

zzy-dashboard-fullscreen 是一个简单、高效、易用的全屏大屏适配组件，解决了传统大屏适配方案复杂、难维护的问题。

主要优势：

  • ✅ 支持三大主流框架
  • ✅ API 简单直观
  • ✅ 自动响应式缩放
  • ✅ 轻量级无依赖
  • ✅ 完整的 TypeScript 支持
  • ✅ 跨版本兼容

如果你正在开发大屏项目，不妨试试 zzy-dashboard-fullscreen，相信它会大大提升你的开发效率！

📞 反馈与支持

如果这篇文章对你有帮助，请点赞、收藏、关注！ ❤️

avatar
文章
阅读
粉丝