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

使用CSS更新的Vue网格布局

1 个答案: