vfullscreen v2.2.2
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
2 months ago
4 months ago
4 months ago
4 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago