基于Vue实现魔方矩阵排列效果

基于 Vue 实现魔方矩阵排列效果

相信大家看到过有赞里面店铺装修的魔方效果，我这边基于 Vue 写了个类似的效果。

运行效果如下：

                个人中心                                #app{            padding: 40px;        }        .decorate-cube{            position: relative;        }        .decorate-cube .cube-row:last-of-type .cube-item {            border-right: 1px solid #e5e5e5;        }        .decorate-cube .cube-selected {            position: absolute;            background-color: #fff;            border: 1px solid #ebedf0;            text-align: center;            color: #7d7e80;            cursor: pointer;            box-sizing: border-box;        }        .decorate-cube .cube-selected.cube-selected-click {            background: #e0edff;            border: 1px solid #155bd4;            color: #155bd4;            z-index: 2;            cursor: auto;        }        .decorate-cube .cube-selected-text {            font-size: 12px;            width: 100%;            position: absolute;            top: 50%;            left: 50%;            transform: translateX(-50%) translateY(-50%);        }        .decorate-cube .cube-row {            float: left;            list-style: none;            padding: 0;            margin: 0;        }        .decorate-cube .cube-item:first-child {            border-top: 1px solid #e5e5e5;        }        .decorate-cube .cube-item {            background: #f8f8f8;            border-left: 1px solid #e5e5e5;            border-bottom: 1px solid #e5e5e5;            cursor: pointer;            text-align: center;            box-sizing: border-box;        }        .decorate-cube .cube-item.item-selecting{            background: #e0edff;        }        .decorate-cube .cube-item.item-selecting .van-icon{            display: none;        }        .decorate-cube .cube-item.item-selected {            background: #e0edff;            visibility: hidden;        }        .decorate-cube .cube-item.item-selected .van-icon{            display: none;        }    
    
        魔方密度:                    4 x 4            5 x 5            6 x 6            7 x 7            
    
        
            
                            
        
        
            
                {{ Math.round(750/density*((parseInt(item.end.y) - parseInt(item.start.y) + 1))) }}                x                {{ Math.round(750/density*((parseInt(item.end.x) - parseInt(item.start.x) + 1))) }}                像素
        
    
    var vm = new Vue({        el: '#app',        data:{            'density':4, //密度            'cubeWidth':320, //魔方宽度            'cubeHeight':320, //魔方高度            'cudeSelecting':{                'start':null,                'end':null,                'data':[]            },            'cudeSelected':[] //已经生成的单元        },        computed:{            //密度值            densityNum:function () {                return parseInt(this.density);            },            //单元魔方高度            cubeItemHeight:function () {                return this.cubeHeight/this.density;            },            //单元魔方宽度            cubeItemWidth:function () {                return this.cubeWidth/this.density;            }        },        methods:{            //魔方点击事件            cubeItemClick:function (event) {                var el = event.currentTarget;                var x = el.getAttribute('data-x');                var y = el.getAttribute('data-y');                var domclass = el.getAttribute('class');                console.log('['+x+','+y+','+domclass+']执行了点击');                var cudeSelectingStart = this.cudeSelecting.start;                var coord = {x:x,y:y};                if(-1 !== domclass.indexOf('item-selected')){                    alert("已经被占用");                    return;                }                if(null == cudeSelectingStart){                    this.cudeSelecting.start = coord;                    this.cudeSelecting.data.push(coord);                }else{                    this.cudeSelecting.end = coord;                    this.cudeSelecting.data.push(coord);                    //获取开始和结束之间所有魔方单元                    var start = cudeSelectingStart;                    var end = coord;                    var x_start = Math.min(start.x,end.x);                    var x_end = Math.max(start.x,end.x);                    var y_start = Math.min(start.y,end.y);                    var y_end = Math.max(start.y,end.y);                    var real_start = {x:Math.min(start.x,end.x),y:Math.min(start.y,end.y)};                    var real_end = {x:Math.max(start.x,end.x),y:Math.max(start.y,end.y)};                    //清空正在选择的                    vm.cudeSelecting.data.splice(0);                    for(var i=x_start;i