vue3前端实现全屏显示及元素垂直填满页面效果
作者：土豆丶杨
这篇文章主要给大家介绍了关于vue3前端实现全屏显示及元素垂直填满页面效果的相关资料,文中还给大家介绍了vue3实现某一个元素全屏之后就黑屏了的解决办法,需要的朋友可以参考下
1、 toggleFullscreen方法实现选定元素全屏展示
2、使用flex属性+ flex-direction 实现垂直布局填满整个页面
<template>
<div id="aaa" class="container">
<div class="header">
<el-button @click="toggleFullscreen">全屏</el-button>
</div>
<div class="content">
<div style="display: flex;height: 100%">
<el-table :data="countData" border style="width: 30%" height="88%">
<el-table-column label="线体" prop="prolineCode" align="center" min-width="120px" />
<el-table-column label="点检异常次数" prop="count" align="center" min-width="120px" />
</el-table>
<div id="bbb" style="width: 70%; height: 100%"></div>
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
export default {
name: 'App',
setup() {
const countData = ref([])
onMounted(() => {
initChart()
// initChart1()
})
onUnmounted(() => {
})
const initChart = () => {
var chartDom = document.getElementById('bbb')
let myChart = echarts.getInstanceByDom(chartDom);
if (myChart) {
myChart.dispose();
}
myChart = echarts.init(chartDom);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
}
option && myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
const initChart1 = () => {
var chartDom = document.getElementById('ccc')
let myChart = echarts.getInstanceByDom(chartDom);
if (myChart) {
myChart.dispose();
}
myChart = echarts.init(chartDom);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
}
option && myChart.setOption(option)
window.addEventListener('resize', function () {
myChart.resize()
})
}
const toggleFullscreen = () => {
const element = document.getElementById('aaa')
if (element) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen()
.catch(err => {
console.log('无法进入全屏模式：', err)
})
}
}
}
return {
countData,
toggleFullscreen
}
}
}
</script>
<style>
body {
margin: 0;
}
/* 使用flex布局 */
.container {
display: flex;
flex-direction: column;
height: 100vh;
/* 确保容器元素的高度与视口高度一致 */
}
/* 设置上部元素 */
.header {
border: 1px solid green;
height: 100px;
/* 上部元素的高度 */
background-color: #ccc;
/* 上部元素的样式 */
}
/* 设置下部元素 */
.content {
border: 1px solid yellow;
flex-grow: 1;
/* 下部元素占据父元素的剩余空间 */
background-color: #eee;
/* 下部元素的样式 */
}
</style>附：vue3实现某一个元素全屏为什么全屏之后就黑屏了
A：可能是因为全屏之后该元素覆盖了整个屏幕，导致后续的内容无法显示。你可以考虑在该元素上添加一些内容使其可见，或者通过下面的代码来解决该问题：
<div ref="fullscreenElement"></div>
<script>
const fullscreenElement = this.$refs.fullscreenElement;
function requestFullscreen() {
if (fullscreenElement.requestFullscreen) {
fullscreenElement.requestFullscreen();
} else if (fullscreenElement.webkitRequestFullscreen) {
fullscreenElement.webkitRequestFullscreen();
} else if (fullscreenElement.msRequestFullscreen) {
fullscreenElement.msRequestFullscreen();
}
}
requestFullscreen();
</script>
该代码会在指定元素上调用全屏方法，并在原始页面上添加一些样式。你可以在其中添加你自己的样式。
总结
到此这篇关于vue3前端实现全屏显示及元素垂直填满页面效果的文章就介绍到这了,更多相关vue3前端全屏显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！