vue-grid-layout 单元格调整大小

在vue-grid-layout中我们可以通过is-resizable属性设置为true允许用户缩放单元格的大小，并通过resize和resized事件来获取单元格是否进行了缩放。

缩放属性

<!-- 设置true允许缩放单元格大小 -->
<grid-layout :is-resizable="true" </grid-layout>

缩放事件

<!-- resize缩放中 resized缩放完成 -->
<grid-item @resize="resizeEvent" @resized="resizedEvent"> </grid-item>

完整代码

<div id="app">
    <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"
        :margin="[10, 10]">

        <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i"
            @resize="resizeEvent" @resized="resizedEvent">
            {{item.i}}
        </grid-item>
    </grid-layout>
    <div>{{message}}</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            GridLayout: VueGridLayout.GridLayout,
            GridItem: VueGridLayout.GridItem
        },
        data() {
            return {
                message: '',
                layout: [
                    { "x": 0, "y": 0, "w": 2, "h": 2, "i": "0" },
                    { "x": 2, "y": 0, "w": 2, "h": 2, "i": "1" },
                    { "x": 4, "y": 0, "w": 2, "h": 2, "i": "2" },
                    { "x": 0, "y": 1, "w": 6, "h": 2, "i": "3" },
                ]
            };
        },
        methods: {
            //单元格缩放中的事件
            resizeEvent: function (i, newH, newW, newHPx, newWPx) {
                this.message = "缩放中 i=" + i + ", X=" + newHPx + ", Y=" + newWPx;
            },
            //单元格缩放完成的事件
            resizedEvent: function (i, newH, newW, newHPx, newWPx) {
                this.message = "缩放完成 i=" + i + ", X=" + newHPx + ", Y=" + newWPx;
            },
        }
    });
</script>

在线试一试