@mu-ui/mu-notice-bar/dist/index.esm.js

notice-bar vue component for vue 2.x

/**
* @name @mu-ui/mu-notice-bar
* @license MIT
* @version 0.0.0
* @description: notice-bar vue component for vue 2.x
* @copyright (c) 2018-2019
* @author JR93 <gjr_china@163.com>
*/
function _arrayWithoutHoles(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}function _iterableToArray(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_nonIterableSpread()}var script={name:"MuNoticeBar",props:{text:{type:[String,Array],default:""},speed:{type:Number,default:50},interval:{type:Number,default:3},delay:{type:Number,default:1}},data:function(){return{cur:0,curEl:null,wrapWidth:0,wrapHeight:0,textWidth:0,duration:0,diff:0,timer:null,wrapTimer:null,single:!1,from:"start",list:[],rawData:[]}},watch:{text:{handler:function(t){var e="string"==typeof t?[t]:t,i=this.list.length;if(this.single=1===e.length,0===i)this.list=e.map(function(t){return{text:t,diff:0,dur:0}});else if(this.single)this.rawData.push({text:e[0],diff:0,dur:0});else{var n,r=e.slice(i).map(function(t){return{text:t,diff:0,dur:0}});(n=this.list).push.apply(n,_toConsumableArray(r))}},immediate:!0}},mounted:function(){this.init()},methods:{init:function(){var t=this;this.wrapper=this.$refs["notice-bar-wrapper"],this.wrapWidth=this.wrapper.clientWidth,this.wrapHeight=this.wrapper.clientHeight,this.wrapper.addEventListener("transitionend",function(e){e.stopPropagation(),t.duration=0,t.cur++,t.cur===t.list.length&&(t.diff=0,t.cur=0),t.check()}),this.check()},check:function(){this.curEl=document.querySelector(".notice-bar-text-".concat(this.cur)),this.textWidth=this.curEl.children[0].offsetWidth,this.textWidth>this.wrapWidth?(this.curEl.addEventListener("transitionend",this.transitionHandler),this.run()):this.single||this.wrapMove()},wrapMove:function(t){var e=this;this.wrapTimer&&clearTimeout(this.wrapTimer),t?(this.duration=500,this.diff+=-this.wrapHeight):this.wrapTimer=setTimeout(function(){e.duration=500,e.diff+=-e.wrapHeight},t?10:1e3*this.interval)},run:function(t){var e=this;this.timer&&clearTimeout(this.timer);var i=this.list[this.cur];i.dur=0,i.diff="end"===this.from?this.wrapWidth:0,this.timer=setTimeout(function(){t&&(e.textWidth=e.curEl.children[0].offsetWidth),i.dur=e.textWidth/e.speed*1e3,i.diff=-e.textWidth},1e3*this.delay)},transitionHandler:function(t){t.stopPropagation(),this.single?(this.from="end",1===this.rawData.length?(this.list=this.rawData,this.rawData=[],this.run(!0)):this.run()):(this.curEl.removeEventListener("transitionend",this.transitionHandler),this.wrapMove(!0))}}};function normalizeComponent(t,e,i,n,r,a,s,o,d,l){"function"==typeof s&&(d=o,o=s,s=!1);var u,c="function"==typeof i?i.options:i;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),n&&(c._scopeId=n),a?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):e&&(u=s?function(){e.call(this,l(this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),u)if(c.functional){var h=c.render;c.render=function(t,e){return u.call(e),h(t,e)}}else{var _=c.beforeCreate;c.beforeCreate=_?[].concat(_,u):[u]}return i}var isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(t){return function(t,e){return addStyle(t,e)}}var HEAD=document.head||document.getElementsByTagName("head")[0],styles={};function addStyle(t,e){var i=isOldIE?e.media||"default":t,n=styles[i]||(styles[i]={ids:new Set,styles:[]});if(!n.ids.has(t)){n.ids.add(t);var r=e.source;if(e.map&&(r+="\n/*# sourceURL="+e.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",e.media&&n.element.setAttribute("media",e.media),HEAD.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(r),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{var a=n.ids.size-1,s=document.createTextNode(r),o=n.element.childNodes;o[a]&&n.element.removeChild(o[a]),o.length?n.element.insertBefore(s,o[a]):n.element.appendChild(s)}}}var __vue_script__=script,__vue_render__=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"notice-bar-wrapper",staticClass:"mu-notice-bar"},[i("div",{staticClass:"mu-notice-bar-container",style:{"transition-duration":t.duration+"ms",transform:"translate(0, "+t.diff+"px) scale(1) translateZ(0px)"}},t._l(t.list,function(e,n){return i("p",{key:n,class:"mu-notice-bar-text notice-bar-text-"+n,style:{height:t.wrapHeight+"px","transition-duration":e.dur+"ms",transform:"translate("+e.diff+"px, 0) scale(1) translateZ(0px)"}},[i("span",[t._v(t._s(e.text))])])}))])},__vue_staticRenderFns__=[],__vue_inject_styles__=function(t){t&&t("data-v-d650fafe_0",{source:"\n.mu-notice-bar{width:100%;height:100%;overflow:hidden\n}\n.mu-notice-bar-text{display:flex;align-items:center;white-space:nowrap;transition-timing-function:linear\n}",map:void 0,media:void 0})},__vue_scope_id__=void 0,__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,noticeBar=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,createInjector,void 0);export default noticeBar;