带有 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>