項(xiàng)目中使用vue-draggable-resizable這個(gè)插件，項(xiàng)目地址https://github.com/mauricius/...
數(shù)據(jù)結(jié)構(gòu)如下：
{
pageData: [{

    id: '001',
    lay_num: '3',
    layData: [{
            lay_id: 'lay001',
            lay_type: 'image',
            lay_name: '圖層一',
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 0,
            lay_zindex: 0,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: '',
            lay_ani_title: '無(wú)',
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: true
        },
        {
            lay_id: 'lay002',
            lay_type: 'image',
            lay_name: '圖層二',
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 150,
            lay_zindex: 2,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: '',
            lay_ani_title: '無(wú)',
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        },
        {
            lay_id: 'lay003',
            lay_type: 'image',
            lay_name: '圖層三',
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 300,
            lay_zindex: 3,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: '',
            lay_ani_title: '無(wú)',
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        }]
},
{
    id: '002',
    lay_num: '1',
    layData: [
        {
            lay_id: 'lay002001',
            lay_type: 'image',
            lay_name: '圖層一',
            lay_img: img_lay1,
            lay_x: 0,
            lay_y: 0,
            lay_zindex: 0,
            lay_width: 233,
            lay_height: 116,
            lay_ani_name: '',
            lay_ani_title: '無(wú)',
            lay_ani_time: 1,
            lay_ani_delay: 0,
            lay_ani_rotate: 0,
            active: false
        }]
}]

}

視圖代碼：
<template v-for="(pageItem,pageIndex) in pageData" v-if="pageIndex==pageActive">

                        <template v-for="(layItem,layIndex) in pageItem.layData">
                            <vue-draggable-resizable 
                                :w="layItem.lay_width" 
                                :h="layItem.lay_height" 
                                :x="layItem.lay_x" 
                                :y="layItem.lay_y" 
                                :z="layItem.lay_zindex" 
                                @dragging="onDrag" 
                                @resizing="onResize" 
                                @activated="onActivated(layIndex)" 
                                @deactivated="onDeactivated" 
                                :parent="false" 
                                :active="layItem.active" 
                                :class="'code-image-lay '+layItem.lay_ani_name">
                                    <div class="code-lay-cont" 
                                        :style="'-webkit-transform:rotate('+layItem.lay_ani_rotate+'deg);transform:rotate('+layItem.lay_ani_rotate+'deg);'">
                                        <img :src="layItem.lay_img"/>
                                    </div>
                            </vue-draggable-resizable>
                        </template>
                    </template>

控件方法：
onResize(x, y, width, height) {

        this.dragResizeWidth = width;
        this.dragResizeHeight = height;
        this.dragResizeX = x;
        this.dragResizeY = y;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(this.pageData[index].layData[i].active == true) {
                        this.$set(this.pageData[index].layData[i], 'lay_width', width);
                        this.$set(this.pageData[index].layData[i], 'lay_height', height);
                    }
                }
            }
        }
    },
    onDrag(x, y) {
        this.dragResizeX = x;
        this.dragResizeY = y;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(this.pageData[index].layData[i].active == true) {
                        this.$set(this.pageData[index].layData[i], 'lay_x', x);
                        this.$set(this.pageData[index].layData[i], 'lay_y', y);
                    }
                }
            }
        }
    },
    onActivated(layIndex) {
        this.setAccActive = layIndex;
        for(let index in this.pageData) {
            if(this.pageActive == index) {
                for(let i in this.pageData[index].layData) {
                    if(i == layIndex) {
                        this.$set(this.pageData[index].layData[i], 'active', true);
                    } else {
                        this.$set(this.pageData[index].layData[i], 'active', false);
                    }
                }
            }
        }
    }                    

現(xiàn)在發(fā)現(xiàn)一個(gè)問(wèn)題，就是當(dāng)我點(diǎn)擊其中一個(gè)元素時(shí)激活拖動(dòng)的元素，然后進(jìn)行resize操作，此時(shí)通過(guò)vue瀏覽器插件查看，元素大小數(shù)據(jù)已被更新，視圖也更新，但當(dāng)我點(diǎn)另外的元素后，原來(lái)第一次點(diǎn)擊的元素寬高數(shù)據(jù)被重置為初始值了，什么鬼？這個(gè)是插件問(wèn)題，還是我vue數(shù)據(jù)循環(huán)問(wèn)題呢？ 有沒(méi)有大神指導(dǎo)一下，謝謝。