# vfullscreen

**Repository Path**: liz42/vfullscreen

## Basic Information

- **Project Name**: vfullscreen
- **Description**: 根据多次开发可视化大屏的经验，两个常规的需求：每个图表根据窗口的自适应展示和图表的排版展示，vfullscreen插件就是为解决这两个问题而存在
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-24
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vfullsrceen

> w2fe团队vue插件项目 (w2fe-plugin)

> 1, 大屏可视化项目的组件自适应，默认纵向排版

> 2, 傻瓜式使用，把设计图的大小填入对应标签即可

> 3, 根据浏览器窗口大小，自动改变模块大小

> 4, 支持esc推迟全屏、支持点击头部切换全屏

> 5, 提供标签: v-fullscreen包裹全局，v-col列表签, v-row横标签, v-chart图表标签

## Build Setup

```bash
npm install vfullscreen -save
```

> 下载完成后，引入插件，vue.use(vfullscreen)一下，即可使用

> 示例布局代码如下：

```bash
<template>
    <v-fullscreen @popStatus="handlePopStatus" title="点击切换全屏">
        <template v-slot:header>
            <upper :height="70"></upper>
        </template>
        <v-row :width="1920" :height="650">
            <v-col :width="420">
                <divice :height="320" :width="420"/>
                <film :height="300" :width="420"/>
            </v-col>
            <v-col :width="1020">
                <divice :height="300" :width="1020"/>
                <film :height="310" :width="1020"/>
            </v-col>
            <v-col :width="420">
                <divice :height="310" :width="420"/>
                <film :height="300" :width="420"/>
            </v-col>
        </v-row>
        <template v-slot:footer>
            <film :height="350" :width="400"/>
            <event :height="350" :width="380"/>
            <film :height="350" :width="1100"/>
        </template>
    </v-fullscreen>
</template>
<script setup>
    import upper from './widget/upper.vue'
    import divice from './widget/divice.vue'
    import film from './widget/film.vue'
    import event from './widget/event.vue'
    const handlePopStatus = (status) => {
        console.log('handlePopStatus--', status)
    }
</script>
```

## 更新日志

> 1，升级vue版本至3.4.14

> 2，删除v-head、v-foot标签

> 3，使用provide、inject注入方式，动态修改模块大小

> 4，添加设置头部标签的title属性

> 5，添加实时获取大屏窗口的宽高和是否全屏状态

## 使用建议

> 1，所有图表模块使用v-chart标签包裹，实现模块自适应；

> 2，v-col，v-row，v-chart标签，支持设置width、height