基于vue的可自动以参数的元素拖动效果-html代码-BFW代码库

代码语言：html
代码描述：基于vue的可自动以参数的元素拖动效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <style>
       
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueDragResize=e():t.VueDragResize=e()}(window,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=44)}([function(t,e,n){var i=n(16);"string"==typeof i&&(i=[[t.i,i,""]]);var r={};r.transform=void 0;n(5)(i,r);i.locals&&(t.exports=i.locals)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i={y:{t:"top",m:"marginTop",b:"bottom"},x:{l:"left",m:"marginLeft",r:"right"}};e.default={name:"vue-drag-resize",props:{parentScaleX:{type:Number,default:1},parentScaleY:{type:Number,default:1},isActive:{type:Boolean,default:!1},preventActiveBehavior:{type:Boolean,default:!1},isDraggable:{type:Boolean,default:!0},isResizable:{type:Boolean,default:!0},aspectRatio:{type:Boolean,default:!1},parentLimitation:{type:Boolean,default:!1},parentW:{type:Number,default:0,validator:function(t){return t>=0}},parentH:{type:Number,default:0,validator:function(t){return t>=0}},w:{type:Number,default:100,validator:function(t){return t>0}},h:{type:Number,default:100,validator:function(t){return t>0}},minw:{type:Number,default:50,validator:function(t){return t>0}},minh:{type:Number,default:50,validator:function(t){return t>0}},x:{type:Number,default:0,validator:function(t){return"number"==typeof t}},y:{type:Number,default:0,validator:function(t){return"number"==typeof t}},z:{type:[String,Number],default:"auto",validator:function(t){return"string"==typeof t?"auto"===t:t>=0}},dragHandle:{type:String,default:null},dragCancel:{type:String,default:null},sticks:{type:Array,default:function(){return["tl","tm","tr","mr","br","bm","bl","ml"]}},axis:{type:String,default:"both",validator:function(t){return-1!==["x","y","both","none"].indexOf(t)}}},data:function(){return{active:this.isActive,rawWidth:this.w,rawHeight:this.h,rawLeft:this.x,rawTop:this.y,rawRight:null,rawBottom:null,zIndex:this.z,aspectFactor:this.w/this.h,parentWidth:null,parentHeight:null,left:this.x,top:this.y,right:null,bottom:null,minWidth:this.minw,minHeight:this.minh}},created:function(){this.stickDrag=!1,this.bodyDrag=!1,this.stickAxis=null,this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null},this.currentStick=[]},mounted:function(){if(this.parentElement=this.$el.parentNode,this.parentWidth=this.parentW?this.parentW:this.parentElement.clientWidth,this.parentHeight=this.parentH?this.parentH:this.parentElement.clientHeight,this.rawRight=this.parentWidth-this.rawWidth-this.rawLeft,this.rawBottom=this.parentHeight-this.rawHeight-this.rawTop,document.documentElement.addEventListener("mousemove",this.move),document.documentElement.addEventListener("mouseup",this.up),document.documentElement.addEventListener("mouseleave",this.up),document.documentElement.addEventListener("mousedown",this.deselect),document.documentElement.addEventListener("touchmove",this.move,!0),document.documentElement.addEventListener("touchend touchcancel",this.up,!0),document.documentElement.addEventListener("touchstart",this.up,!0),this.dragHandle){var t=Array.prototype.slice.call(this.$el.querySelectorAll(this.dragHandle));for(var e in t)t[e].setAttribute("data-drag-handle",this._uid)}if(this.dragCancel){var n=Array.prototype.slice.call(this.$el.querySelectorAll(this.dragCancel));for(var i in n)n[i].setAttribute("data-drag-cancel",this._uid)}},beforeDestroy:function(){document.documentElement.removeEventListener("mousemove",this.move),document.documentElement.removeEventListener("mouseup",this.up),document.documentElement.removeEventListener("mouseleave",this.up),document.documentElement.removeEventListener("mousedown",this.deselect),document.documentElement.removeEventListener("touchmove",this.move,!0),document.documentElement.removeEventListener("touchend touchcancel",this.up,!0),document.documentElement.removeEventListener("touchstart",this.up,!0)},methods:{deselect:function(){this.preventActiveBehavior||(this.active=!1)},move:function(t){(this.stickDrag||this.bodyDrag)&&(t.stopPropagation(),this.stickDrag&&this.stickMove(t),this.bodyDrag&&this.bodyMove(t))},up:function(t){this.stickDrag&&this.stickUp(t),this.bodyDrag&&this.bodyUp(t)},bodyDown:function(t){var e=t.target||t.srcElement;this.preventActiveBehavior||(this.active=!0),t.button&&0!==t.button||(this.$emit("clicked",t),this.isDraggable&&this.active&&(this.dragHandle&&e.getAttribute("data-drag-handle")!==this._uid.toString()||this.dragCancel&&e.getAttribute("data-drag-cancel")===this._uid.toString()||(this.bodyDrag=!0,this.stickStartPos.mouseX=t.pageX||t.touches[0].pageX,this.stickStartPos.mouseY=t.pageY||t.touches[0].pageY,this.stickStartPos.left=this.left,this.stickStartPos.right=this.right,this.stickStartPos.top=this.top,this.stickStartPos.bottom=this.bottom,this.parentLimitation&&(this.limits=this.calcDragLimitation()))))},calcDragLimitation:function(){var t=this.parentWidth,e=this.parentHeight;return{minLeft:0,maxLeft:t-this.width,minRight:0,maxRight:t-this.width,minTop:0,maxTop:e-this.height,minBottom:0,maxBottom:e-this.height}},bodyMove:function(t){var e=this.stickStartPos,n={x:("y"!==this.axis&&"none"!==this.axis?e.mouseX-(t.pageX||t.touches[0].pageX):0)/this.parentScaleX,y:("x"!==this.axis&&"none"!==this.axis?e.mouseY-(t.pageY||t.touches[0].pageY):0)/this.parentScaleY};this.rawTop=e.top-n.y,this.rawBottom=e.bottom+n.y,this.rawLeft=e.left-n.x,this.rawRight=e.right+n.x,this.$emit("dragging",this.rect)},bodyUp:function(){this.bodyDrag=!1,this.$emit("dragging",this.rect),this.$emit("dragstop",this.rect),this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null}},stickDown:function(t,e){if(this.isResizable&&this.active){switch(this.stickDrag=!0,this.stickStartPos.mouseX=e.pageX||e.touches[0].pageX,this.stickStartPos.mouseY=e.pageY||e.touches[0].pageY,this.stickStartPos.left=this.left,this.stickStartPos.right=this.right,this.stickStartPos.top=this.top,this.stickStartPos.bottom=this.bottom,this.currentStick=t.split(""),this.stickAxis=null,this.currentStick[0]){case"b":case"t":this.stickAxis="y"}switch(this.currentStick[1]){case"r":case"l":this.stickAxis="y"===this.stickAxis?"xy":"x"}this.limits=this.calcResizeLimitation()}},calcResizeLimitation:function(){var t=this.minWidth,e=this.minHeight,n=this.aspectFactor,i=this.width,r=this.height,o=this.bottom,a=this.top,s=this.left,c=this.right,u=this.stickAxis,l=this.parentLimitation?0:null;this.aspectRatio&&(t/e>n?e=t/n:t=n*e);var f={minLeft:l,maxLeft:s+(i-t),minRight:l,maxRight:c+(i-t),minTop:l,maxTop:a+(r-e),minBottom:l,maxBottom:o+(r-e)};if(this.aspectRatio){var d={minLeft:s-Math.min(a,o)*n*2,maxLeft:s+(r-e)/2*n*2,minRight:c-Math.min(a,o)*n*2,maxRight:c+(r-e)/2*n*2,minTop:a-Math.min(s,c)/n*2,maxTop:a+(i-t)/2/n*2,minBottom:o-Math.min(s,c)/n*2,maxBottom:o+(i-t)/2/n*2};"x"===u?f={minLeft:Math.max(f.minLeft,d.minLeft),maxLeft:Math.min(f.maxLeft,d.maxLeft),minRight:Math.max(f.minRight,d.minRight),maxRight:Math.min(f.maxRight,d.maxRight)}:"y"===u&&(f={minTop:Math.max(f.minTop,d.minTop),maxTop:Math.min(f.maxTop,d.maxTop),minBottom:Math.max(f.minBottom,d.minBottom),maxBottom:Math.min(f.maxBottom,d.maxBottom)})}return f},stickMove:function(t){var e=this.stickStartPos,n={x:(e.mouseX-(t.pageX||t.touches[0].pageX))/this.parentScaleX,y:(e.mouseY-(t.pageY||t.touches[0].pageY))/this.parentScaleY};switch(this.currentStick[0]){case"b":this.rawBottom=e.bottom+n.y;break;case"t":this.rawTop=e.top-n.y}switch(this.currentStick[1]){case"r":this.rawRight=e.right+n.x;break;case"l":this.rawLeft=e.left-n.x}this.$emit("resizing",this.rect)},stickUp:function(){this.stickDrag=!1,this.stickStartPos={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.limits={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null},this.rawTop=this.top,this.rawBottom=this.bottom,this.rawLeft=this.left,this.rawRight=this.right,this.stickAxis=null,this.$emit("resizing",this.rect),this.$emit("resizestop",this.rect)},aspectRatioCorrection:function(){if(this.aspectRatio){var t=this.bottom,e=this.top,n=this.left,i=this.right,r=this.width,o=this.height,a=this.aspectFactor,s=this.currentStick;if(r/o>a){var c=a*o;"l"===s[1]?this.left=n+r-c:this.right=i+r-c}else{var u=r/a;"t"===s[0]?this.top=e+o-u:this.bottom=t+o-u}}}},computed:{style:function(){return{top:this.top+"px",left:this.left+"px",width:this.width+"px",height:this.height+"px",zIndex:this.zIndex}},vdrStick:function(){var t=this;return function(e){var n={width:8/t.parentScaleX+"px",height:8/t.parentScaleY+"px"};return n[i.y[e[0]]]=8/t.parentScaleX/-2+"px",n[i.x[e[1]]]=8/t.parentScaleX/-2+"px",n}},width:function(){return this.parentWidth-this.left-this.right},height:function(){return this.parentHeight-this.top-this.bottom},rect:function(){return{left:Math.round(this.left),top:Math.round(this.top),width:Math.round(this.width),height:Math.round(this.height)}}},watch:{rawLeft:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.left,a=this.bottom,s=this.top;if(null!==e.minLeft&&t<e.minLeft?t=e.minLeft:null!==e.maxLeft&&e.maxLeft<t&&(t=e.maxLeft),r&&"x"===n){var c=o-t;this.rawTop=s-c/i/2,this.rawBottom=a-c/i/2}this.left=t},rawRight:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.bottom,s=this.top;if(null!==e.minRight&&t<e.minRight?t=e.minRight:null!==e.maxRight&&e.maxRight<t&&(t=e.maxRight),r&&"x"===n){var c=o-t;this.rawTop=s-c/i/2,this.rawBottom=a-c/i/2}this.right=t},rawTop:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.left,s=this.top;if(null!==e.minTop&&t<e.minTop?t=e.minTop:null!==e.maxTop&&e.maxTop<t&&(t=e.maxTop),r&&"y"===n){var c=s-t;this.rawLeft=a-c*i/2,this.rawRight=o-c*i/2}this.top=t},rawBottom:function(t){var e=this.limits,n=this.stickAxis,i=this.aspectFactor,r=this.aspectRatio,o=this.right,a=this.left,s=this.bottom;if(null!==e.minBottom&&t<e.minBottom?t=e.minBottom:null!==e.maxBottom&&e.maxBottom<t&&(t=e.maxBottom),r&&"y"===n){var c=s-t;this.rawLeft=a-c*i/2,this.rawRight=o-c*i/2}this.bottom=t},width:function(){this.aspectRatioCorrection()},height:function(){this.aspectRatioCorrection()},active:function(t){t?this.$emit("activated"):this.$emit("deactivated")},isActive:function(t){this.active=t},z:function(t){(t>=0||"auto"===t)&&(this.zIndex=t)},aspectRatio:function(t){t&&(this.aspectFactor=this.width/this.height)},minw:function(t){t>0&&t<=this.width&&(this.minWidth=t)},minh:function(t){t>0&&t<=this.height&&(this.minHeight=t)},x:function(){if(!this.stickDrag&&!this.bodyDrag){this.parentLimitation&&(this.limits=this.calcDragLimitation());var t=this.x-this.left;this.rawLeft=this.x,this.rawRight=this.right-t}},y:function(){if(!this.stickDrag&&!this.bodyDrag){this.parentLimitation&&(this.limits=this.calcDragLimitation());var t=this.y-this.top;this.rawTop=this.y,this.rawBottom=this.bottom-t}},w:function(){if(!this.stickDrag&&!this.bodyDrag){this.currentStick=["m","r"],this.stickAxis="x",this.parentLimitation&&(this.limits=this.calcResizeLimitation());var t=this.width-this.w;this.rawRight=this.right+t}},h:function(){if(!this.stickDrag&&!this.bodyDrag){this.currentStick=["b","m"],this.stickAxis="y",this.parentLimitation&&(this.limits=this.calcResizeLimitation());var t=this.height-this.h;this.rawBottom=this.bottom+t}},parentW:function(t){this.right=t-this.width-this.left,this.parentWidth=t},parentH:function(t){this.bottom=t-this.height-this.top,this.parentHeight=t}}}},function(t,e,n){"use strict";n.r(e);var i=n(1),r=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);e.default=r.a},function(t,e,n){"use strict";function i(t,e,n,i,r,o,a,s){var c="function"==typeof t?t.options:t;e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),o&&(c._scopeId="data-v-"+o);var u;if(a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):r&&(u=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(c.functional){c._injectStyles=u;var l=c.render;c.render=function(t,e){return u.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:c}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vdr",class:t.active||t.isActive?"active":"inactive",style:t.style,on:{mousedown:function(e){e.stopPropagation(),e.preventDefault(),t.bodyDown(e)},touchstart:function(e){e.stopPropagation(),e.preventDefault(),t.bodyDown(e)}}},[t._t("default"),t._v(" "),t._l(t.sticks,function(e){return n("div",{staticClass:"vdr-stick",class:["vdr-stick-"+e,t.isResizable?"":"not-resizable"],style:t.vdrStick(e),on:{mousedown:function(n){n.stopPropagation(),n.preventDefault(),t.stickDown(e,n)},touchstart:function(n){n.stopPropagation(),n.preventDefault(),t.stickDown(e,n)}}})})],2)},r=[];i._withStripped=!0;n.d(e,"a",function(){return i}),n.d(e,"b",function(){return r})},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=h[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(l(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(l(i.parts[o],e));h[i.id]={id:i.id,refs:1,parts:a}}}}function r(t,e){for(var n=[],i={},r=0;r<t.length;r++){var o=t[r],a=e.base?o[0]+e.base:o[0],s=o[1],c=o[2],u=o[3],l={css:s,media:c,sourceMap:u};i[a]?i[a].parts.push(l):n.push(i[a]={id:a,parts:[l]})}return n}function o(t,e){var n=m(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var i=b[b.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),b.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=b.indexOf(t);e>=0&&b.splice(e,1)}function s(t){var e=document.createElement("style");return t.attrs.type="text/css",u(e,t.attrs),o(t,e),e}function c(t){var e=document.createElement("link");return t.attrs.type="text/css",t.attrs.rel="stylesheet",u(e,t.attrs),o(t,e),e}function u(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function l(t,e){var n,i,r,o;if(e.transform&&t.css){if(!(o=e.transform(t.css)))return function(){};t.css=o}if(e.singleton){var u=y++;n=g||(g=s(e)),i=f.bind(null,n,u,!1),r=f.bind(null,n,u,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=c(e),i=p.bind(null,n,e),r=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(e),i=d.bind(null,n),r=function(){a(n)});return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function f(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=w(e,r);else{var o=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function d(t,e){var n=e.css,i=e.media;if(i&&t.setAttribute("media",i),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function p(t,e,n){var i=n.css,r=n.sourceMap,o=void 0===e.convertToAbsoluteUrls&&r;(e.convertToAbsoluteUrls||o)&&(i=_(i)),r&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var a=new Blob([i],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}var h={},v=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}}(function(){return window&&document&&document.all&&!window.atob}),m=function(t){var e={};return function(n){return void 0===e[n]&&(e[n]=t.call(this,n)),e[n]}}(function(t){return document.querySelector(t)}),g=null,y=0,b=[],_=n(15);t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},e.attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||(e.singleton=v()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=r(t,e);return i(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],c=h[s.id];c.refs--,o.push(c)}if(t){i(r(t,e),e)}for(var a=0;a<o.length;a++){var c=o[a];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete h[c.id]}}}};var w=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){function n(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=i(r);return[n].concat(r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"})).concat([o]).join("\n")}return[n].join("\n")}function i(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var i=n(e,t);return e[2]?"@media "+e[2]+"{"+i+"}":i}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<t.length;r++){var a=t[r];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){!function(e,n){t.exports=function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="dist/",e(e.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){var i=n(2)(n(3),n(4),null,null,null);t.exports=i.exports},function(t,e){t.exports=function(t,e,n,i,r){var o,a=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(o=t,a=t.default);var c="function"==typeof a?a.options:a;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns),i&&(c._scopeId=i);var u;if(r?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=u):n&&(u=n),u){var l=c.functional,f=l?c.render:c.beforeCreate;l?c.render=function(t,e){return u.call(e),f(t,e)}:c.beforeCreate=f?[].concat(f,u):[u]}return{esModule:o,exports:a,options:c}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i={},r=[],o="",a="",s="svg";e.default={data:function(){return{loaded:!1}},props:{icon:String,name:String,width:{type:String,default:""},height:{type:String,default:""},scale:String,dir:String,fill:{type:Boolean,default:!0},color:String,original:{type:Boolean,default:!1}},computed:{clazz:function(){var t=s+"-icon";return this.fill&&(t+=" "+s+"-fill"),this.dir&&(t+=" "+s+"-"+this.dir),t},iconName:function(){return this.name||this.icon},iconData:function(){return this.iconName&&this.loaded?i[this.iconName]:null},colors:function(){return this.color?this.color.split(" "):[]},path:function(){var t="";return this.iconData?(t=this.iconData.data,this.original&&(t=this.addOriginalColor(t)),this.colors.length>0&&(t=this.addColor(t))):r.push({name:this.iconName,component:this}),this.getValidPathData(t)},box:function(){var t=this.width||16,e=this.width||16;return this.iconData?this.iconData.viewBox?this.iconData.viewBox:"0 0 "+this.iconData.width+" "+this.iconData.height:"0 0 "+parseFloat(t)+" "+parseFloat(e)},style:function(){var t=/^\d+$/,e=Number(this.scale),n=void 0,i=void 0;return!isNaN(e)&&this.iconData?(n=Number(this.iconData.width)*e+"px",i=Number(this.iconData.height)*e+"px"):(n=t.test(this.width)?this.width+"px":this.width,i=t.test(this.height)?this.height+"px":this.height),{width:n||o,height:i||a}}},created:function(){i[this.iconName]&&(this.loaded=!0)},methods:{addColor:function(t){var e=this,n=/<(path|rect|circle|polygon|line|polyline|ellipse)\s/gi,i=0;return t.replace(n,function(t){var n=e.colors[i++]||e.colors[e.colors.length-1],r=e.fill;return n&&"_"===n?t:(n&&0===n.indexOf("r-")&&(r=!r,n=n.split("r-")[1]),t+(r?"fill":"stroke")+'="'+n+'" '+(r?"stroke":"fill")+'="none" ')})},addOriginalColor:function(t){var e=/_fill="|_stroke="/gi;return t.replace(e,function(t){return t&&t.slice(1)})},getValidPathData:function(t){if(this.original&&this.colors.length>0){var e=/<(path|rect|circle|polygon|line|polyline|ellipse)(\sfill|\sstroke)([="\w\s\.\-\+#\$\&>]+)(fill|stroke)/gi;t=t.replace(e,function(t,e,n,i,r){return"<"+e+n+i+"_"+r})}return t}},install:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.tagName||"svgicon";e.classPrefix&&(s=e.classPrefix),e.defaultWidth&&(o=e.defaultWidth),e.defaultHeight&&(a=e.defaultHeight),t.component(n,this)},register:function(t){for(var e in t)!function(e){i[e]||(i[e]=t[e]),r=r.filter(function(t,n){return t.name===e&&t.component.$set(t.component,"loaded",!0),t.name!==e})}(e)},icons:i}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("svg",{class:t.clazz,style:t.style,attrs:{version:"1.1",viewBox:t.box},domProps:{innerHTML:t._s(t.path)}})},staticRenderFns:[]}}])}()}()},function(t,e,n){var i=n(31);"string"==typeof i&&(i=[[t.i,i,""]]);var r={};r.transform=void 0;n(5)(i,r);i.locals&&(t.exports=i.locals)},function(t,e,n){var i=n(37);"string"==typeof i&&(i=[[t.i,i,""]]);var r={};r.transform=void 0;n(5)(i,r);i.locals&&(t.exports=i.locals)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={computed:{activeRect:function(){return this.$store.getters["rect/getActive"]},width:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].width},height:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].height},top:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].top},left:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].left},minw:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].minw},minh:function(){return null===this.activeRect?"":this.$store.state.rect.rects[this.activeRect].minh},aspectRatio:function(){return null!==this.activeRect&&this.$store.state.rect.rects[this.activeRect].aspectRatio},parentLim:function(){return null!==this.activeRect&&this.$store.state.rect.rects[this.activeRect].parentLim},draggable:function(){return null!==this.activeRect&&this.$store.state.rect.rects[this.activeRect].draggable},resizable:function(){return null!==this.activeRect&&this.$store.state.rect.rects[this.activeRect].resizable},topIsLocked:function(){return null!==this.activeRect&&("x"===this.$store.state.rect.rects[this.activeRect].axis||"none"===this.$store.state.rect.rects[this.activeRect].axis)},leftIsLocked:function(){return null!==this.activeRect&&("y"===this.$store.state.rect.rects[this.activeRect].axis||"none"===this.$store.state.rect.rects[this.activeRect].axis)},zIndex:function(){return null===this.activeRect?null:1===this.$store.state.rect.rects[this.activeRect].zIndex?"isFirst":this.$store.state.rect.rects[this.activeRect].zIndex===this.$store.state.rect.rects.length?"isLast":"normal"}},methods:{toggleYLock:function(){if(null===this.activeRect)return void this.$ga.event("toolbar","lock","y lock",0);this.$ga.event("toolbar","lock","y lock",1),this.$store.dispatch("rect/changeYLock",{id:this.activeRect})},toggleXLock:function(){if(null===this.activeRect)return void this.$ga.event("toolbar","lock","x lock",0);this.$ga.event("toolbar","lock","x lock",1),this.$store.dispatch("rect/changeXLock",{id:this.activeRect})},toggleAspect:function(){if(null===this.activeRect)return void this.$ga.event("toolbar","lock","aspect",0);this.$ga.event("toolbar","lock","aspect",1),this.$store.state.rect.rects[this.activeRect].aspectRatio?this.$store.dispatch("rect/unsetAspect",{id:this.activeRect}):this.$store.dispatch("rect/setAspect",{id:this.activeRect})},toggleParentLimitation:function(){this.$ga.even.........完整代码请登录后点击上方下载按钮下载查看