带有 css 更新的 Vue 网格布局

Question

我正在使用 Vue js 和 vue-grid-layout。 我想创建一个带有一些小部件的仪表板。

css 正在使用布局对象中已有的其他网格。 因此，我可以添加一个带有按钮的网格，但 css 不适用于新网格。

有一个按钮带有一个名为addGrid((的单击操作，它将在布局对象的末尾添加一个新行。

提前感谢，希望我的帖子每个人都能理解。

<grid-layout
:layout="layout"
:col-num="10"
:row-height="10"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:vertical-compact="false"
:margin="[10, 10]"
:use-css-transforms="false">
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<span class="text">{{item.i}}</span>
</grid-item>
</grid-layout>

import VueGridLayout from "vue-grid-layout";
export default {
name: "Home",
data() {
return {
layout: [
{ x: 0, y: 0, w: 2, h: 2, i: "0" },
{ x: 2, y: 0, w: 2, h: 4, i: "1" },
{ x: 4, y: 0, w: 2, h: 5, i: "2" },
],
};
},
methods: {
addGrid() {
this.layout.push({x:0, y:-1, w:2, h:5, i:parseInt(this.layout[this.layout.length - 1].i, 10) + 1});
}
}
};

这是 css 研磨的示例

.vue-grid-item:not(.vue-grid-placeholder) {
background: #4caf50;
opacity: 0.7;
border: 1px solid black;
}

Answer 1

好吧，我找到了一个解决方案。首先删除了"样式范围"中的范围，我在 中添加了一个类以将 css 应用于网格！

<grid-item v-for="item in layout" class="grid-widget"
[........]
<span class="text">{{item.i}}</span>
</grid-item>

<style>
.grid-widget {
background: #4caf50;
opacity: 0.7;
border: 1px solid black;
}
</style>