vfullsrceen

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

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

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

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

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

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

Build Setup

npm install vfullscreen -save

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

示例布局代码如下：

<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