105 lines
2.1 KiB
Vue
105 lines
2.1 KiB
Vue
<template>
|
|
<div class="grid-container" :style="gridStyle">
|
|
<div
|
|
v-for="(cell, index) in cells"
|
|
:key="index"
|
|
class="grid-cell"
|
|
:style="cellStyle"
|
|
@dblclick="toggleFullScreen(index)"
|
|
>
|
|
<div v-if="fullScreenIndex === index" class="full-screen">
|
|
<div class="content">
|
|
<canvas class="canvas" :ref="`canvas-${fullScreenIndex}`"></canvas>
|
|
<!-- 这里可以放置单元格的内容 -->
|
|
<!-- Cell {{ index + 1 }} -->
|
|
<!-- <button @click="toggleFullScreen(null)">Exit Full Screen</button> -->
|
|
</div>
|
|
</div>
|
|
<div v-else class="content">
|
|
<!-- Cell {{ index + 1 }} -->
|
|
<canvas class="canvas" :ref="`canvas-${index}`"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
rows: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
cols: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
fullScreenIndex: null,
|
|
};
|
|
},
|
|
computed: {
|
|
gridStyle() {
|
|
return {
|
|
display: 'grid',
|
|
gridTemplateRows: `repeat(${this.rows}, 1fr)`,
|
|
gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
|
|
height: '100vh',
|
|
width: '100vw',
|
|
};
|
|
},
|
|
cellStyle() {
|
|
return {
|
|
border: '1px solid #ccc',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
};
|
|
},
|
|
cells() {
|
|
return Array(this.rows * this.cols).fill(0);
|
|
},
|
|
},
|
|
methods: {
|
|
toggleFullScreen(index) {
|
|
this.fullScreenIndex = this.fullScreenIndex === index ? null : index;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.grid-container {
|
|
display: grid;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.grid-cell {
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.full-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: white;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.content {
|
|
/* text-align: center; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |