vue-ripple-effect
Version:
a vue ui-component with typescript
7 lines (6 loc) • 3.59 kB
JavaScript
/*!
* mb-ripple v1.0.8
* author: linjiajian999
* MIT License
*/
!(function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):"object"==typeof exports?exports.MbRipple=e(require("vue")):t.MbRipple=e(t.Vue)})(this,(function(t){return (function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].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,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},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=0)})([(function(t,e,n){t.exports=n(1)}),(function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(2),r=(n.n(o),n(3));n.d(e,"ripple",(function(){return r.b})),n.d(e,"install",(function(){return r.a})),e.default={ripple:r.b,install:r.a}}),(function(t,e){}),(function(t,e,n){"use strict";n.d(e,"a",(function(){return r}));var o=n(4);n.d(e,"b",(function(){return o.a}));var r=function(t,e){t.component("mb-ripple",o.a)};o.a}),(function(t,e,n){"use strict";function o(t){n(5)}var r=n(7),i=n(9),s=n(6),u=o,c=s(r.a,i.a,!1,u,null,null);e.a=c.exports}),(function(t,e){}),(function(t,e){t.exports=function(t,e,n,o,r,i){var s,u=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(s=t,u=t.default);var a="function"==typeof u?u.options:u;e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0),n&&(a.functional=!0),r&&(a._scopeId=r);var f;if(i?(f=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(i)},a._ssrRegister=f):o&&(f=o),f){var p=a.functional,l=p?a.render:a.beforeCreate;p?(a._injectStyles=f,a.render=function(t,e){return f.call(e),l(t,e)}):a.beforeCreate=l?[].concat(l,f):[f]}return{esModule:s,exports:u,options:a}}}),(function(t,e,n){"use strict";var o=n(8),r=n.n(o);e.a=r.a.extend({name:"mb-ripple",props:{color:{type:String,default:"#000"}},data:function(){return{translateX:0,translateY:0,isTouch:!1,isTouchMoment:!1,rippleW:50}},computed:{translate:function(){return"translate(-50%, -50%) translate("+this.translateX+"px,"+this.translateY+"px)"+(this.isTouchMoment?"scale(0.01, 0.01)":"")}},methods:{click:function(t){this.$emit("click",t)},onMousedown:function(t){var e=this;this.setMaskWidth(t.offsetX,t.offsetY),this.translateX=t.offsetX,this.translateY=t.offsetY,this.isTouch=!0,this.isTouchMoment=!0,setTimeout((function(t){e.isTouchMoment=!1}),20)},onMouseup:function(){this.isTouch=!1},setMaskWidth:function(t,e){var n=this.$el.offsetWidth,o=this.$el.offsetHeight,r=t>n/2?t:n-t,i=e>o/2?o:o-e,s=Math.sqrt(r*r+i*i);this.rippleW=2*s}}})}),(function(e,n){e.exports=t}),(function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{staticClass:"mb mb-ripple",on:{click:function(e){t.click(e)},mousedown:function(e){t.onMousedown(e)},mouseout:t.onMouseup,mouseup:t.onMouseup}},[t._t("default"),t._v(" "),n("span",{staticClass:"mb-ripple-container"},[n("span",{class:["mb-ripple-content",{visible:t.isTouch,isAnimating:!t.isTouchMoment}],style:{transform:t.translate,width:t.rippleW+"px",height:t.rippleW+"px",backgroundColor:t.color}})])],2)},r=[],i={render:o,staticRenderFns:r};e.a=i})])}));