vue2-vant2-components/lib/vvc-zoom-item/index.js

基于 vue2 和 vant2 开发的移动端表格组件

(function(){"use strict";var t={};!function(){t.d=function(e,i){for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})}}(),function(){t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){t.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}();var e={};t.r(e),t.d(e,{default:function(){return h}});var i=function(){var t=this,e=t._self._c;return e("div",{staticClass:"vvc-zoomItem",style:t.zoomItemStyle},[t._t("default")],2)},n=[],o={name:"vvcZoomItem",props:{width:{type:[String,Number]},height:{type:[String,Number]},disabled:{type:Boolean,default:!1},defaultScale:{type:[Number,String],default:"auto",validator:t=>"number"===typeof t||"auto"===t},min:{type:Number,default:1},max:{type:Number,default:5},doubleClickScale:{type:Boolean,default:!1}},data(){return{translateX:0,translateY:0,transitionDurationX:0,scale:1,initScale:1,zoomListContext:this.$parent,domObserver:null,viewport:{},autoScaleRange:null}},computed:{zoomItemStyle(){return{width:"number"===typeof this.width?`${this.width}px`:this.width,height:"number"===typeof this.height?`${this.height}px`:this.height,transform:`translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`,transitionDuration:`${this.transitionDurationX}ms`,transitionProperty:""+(this.transitionDurationX?"all":"none")}},minScale(){return this.autoScaleRange?this.autoScaleRange.minScale:this.min},maxScale(){return this.autoScaleRange?this.autoScaleRange.maxScale:this.max}},mounted(){this.initEvent(),this.init()},beforeDestroy(){this.domObserver.disconnect()},methods:{init(t){this.autoScaleRange=null,void 0!==t&&null!==t?this.initScale=this.scale=t:"auto"===this.defaultScale?(this.initScale=this.scale=this.zoomListContext.viewport.width/this.$el.offsetWidth||1,this.autoScaleRange={minScale:Math.min(this.scale,this.min),maxScale:Math.max(this.scale,this.max)}):this.initScale=this.scale=this.defaultScale,this.viewport.width=this.$el.offsetWidth*this.scale,this.viewport.height=this.$el.offsetHeight*this.scale},initEvent(){this.domObserver=new ResizeObserver(this.getViewport),this.domObserver.observe(this.$el)},getViewport(){const{top:t,left:e}=this.$el.getBoundingClientRect();return this.viewport={top:t,left:e,offsetWidth:this.$el.offsetWidth,offsetHeight:this.$el.offsetHeight,width:this.$el.offsetWidth*this.scale,height:this.$el.offsetHeight*this.scale},this.viewport}}},s=o;function a(t,e,i,n,o,s,a,r){var l,h="function"===typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=i,h._compiled=!0),n&&(h.functional=!0),s&&(h._scopeId="data-v-"+s),a?(l=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__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},h._ssrRegister=l):o&&(l=r?function(){o.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(h.functional){h._injectStyles=l;var u=h.render;h.render=function(t,e){return l.call(e),u(t,e)}}else{var c=h.beforeCreate;h.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:h}}var r=a(s,i,n,!1,null,null,null),l=r.exports,h=l;module.exports=e})();