使用css更新的Vue网格布局

Question

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

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

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

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

​

 <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 grind的一个示例

​

.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>

​