type-animation
Version:
vue 打字动画组件,炫酷的打字动画效果
2 lines • 7.07 kB
JavaScript
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["typing-animation"]=e():t["typing-animation"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"03c4":function(t,e,n){},"6f85":function(t,e,n){"use strict";var i=n("03c4"),s=n.n(i);s.a},d999:function(t,e){!function(t){var e,n='<svg><symbol id="iconcloudshell-copy" viewBox="0 0 1024 1024"><path d="M917.333333 835.413333H106.666667V188.586667h810.666666zM186.666667 755.413333h650.666666V268.586667H186.666667z" fill="#ffffff" ></path><path d="M343.04 648.746667l-56.533333-56.533334 88.32-88.32-88.32-88.32 56.533333-56.746666 144.853333 145.066666-144.853333 144.853334zM507.093333 585.173333h230.4v80h-230.4z" fill="#ffffff" ></path></symbol></svg>',i=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(i&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var n=function(){document.removeEventListener("DOMContentLoaded",n,!1),e()};document.addEventListener("DOMContentLoaded",n,!1)}else document.attachEvent&&(s=e,o=t.document,r=!1,(c=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(c,50)}i()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,i())});function i(){r||(r=!0,s())}var s,o,r,c}((function(){var t,e;(t=document.createElement("div")).innerHTML=n,n=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))}))}(window)},f6fd:function(t,e){(function(t){var e="currentScript",n=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(i){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(i.stack)||[!1])[1];for(t in n)if(n[t].src==e||"interactive"==n[t].readyState)return n[t];return null}}})})(document)},fb15:function(t,e,n){"use strict";var i;(n.r(e),"undefined"!==typeof window)&&(n("f6fd"),(i=window.document.currentScript)&&(i=i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=i[1]));var s=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[t.isCssText?n("div",{staticClass:"text"},t._l(t.textArr,(function(e,i){return n("p",{key:i,ref:"column",refInFor:!0,class:{typing:t.isAnimation,lastTyping:t.isLast},attrs:{id:"column"+i}},[t._v(" "+t._s(e)+" ")])})),0):t._e(),t.isCssCmd?n("div",{staticClass:"dos"},[n("div",{staticClass:"header"},[n("i",{staticClass:"icon-box"},[n("svg",{staticClass:"icon svg-icon",attrs:{"aria-hidden":"true"}},[n("use",{attrs:{"xlink:href":"#iconcloudshell-copy"}})])]),t._v(" 命令提示符 ")]),t._l(t.textArr,(function(e,i){return n("p",{key:i,ref:"column",refInFor:!0,class:{typing:t.isAnimation,lastTyping:t.isLast},attrs:{id:"column"+i}},[t._v(" "+t._s(e)+" ")])}))],2):t._e()])},o=[],r=(n("d999"),{name:"typingAnimation",props:{text:String,separators:String,type:String,isSingle:Boolean},data(){return{isAnimation:!1,isLast:!1,textArr:[],isCssText:!1,isCssCmd:!1}},mounted(){this.commaSegmentation();const t=this;this.selectType();for(let e=0;e<this.textArr.length;e++){const n=this.textArr[e];(i=>{setTimeout(()=>{this.isSingle?t.single(n,e):t.flowAnimation(n,e)},3e3*i)})(e)}},methods:{flowAnimation(t,e){this.$nextTick(()=>{const n=this.$refs.column[e];if(n){n.classList.add("typing");const e=this.getTextLength(t);function i(){n&&(n.style.borderRight="none")}n.style.width=e+"rem",n.addEventListener("animationend",i,!1)}})},single(t,e){const n=this;this.$nextTick(()=>{const i=this.$refs.column[e];if(i){i.classList.add("typing");const o=this.getTextLength(t);function s(){i&&(i.style.borderRight="none");const t=n.$refs.column[e];t.style.display="none"}i.style.width=o+"rem",i.addEventListener("animationend",s,!1)}})},commaSegmentation(){this.separators?this.textArr=this.text.split(this.separators):this.textArr=this.text.split(",")},selectType(){"text"===this.type?(this.isCssText=!0,this.isCssCmd=!1):"cmd"===this.type&&(this.isCssText=!1,this.isCssCmd=!0)},equalDivision(){if(this.text.length>100){const t=Math.floor(this.text.length/40),e=this.text.length%40;for(let n=0;n<t;n++){const t=this.text.slice(40*n,n>0?40*(n+1):40);this.textArr.push(t),this.trimSpace(this.textArr)}e&&this.textArr.push(this.text.slice(40*t,this.text.length))}},getTextLength(t){let e=0;for(let n=0;n<t.length;n++)t.charCodeAt(n)>127||94===t.charCodeAt(n)?e+=1:e++;return e},trimSpace(t){for(let e=0;e<t.length;e++)""!==t[e]&&null!==t[e]&&"undefined"!==typeof t[e]||(t.splice(e,1),e-=1);return t}}}),c=r;n("6f85");function a(t,e,n,i,s,o,r,c){var a,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),r?(a=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__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=a):s&&(a=c?function(){s.call(this,this.$root.$options.shadowRoot)}:s),a)if(l.functional){l._injectStyles=a;var d=l.render;l.render=function(t,e){return a.call(e),d(t,e)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,a):[a]}return{exports:t,options:l}}var l=a(c,s,o,!1,null,"65234585",null),d=l.exports;d.install=t=>{t.component(d.name,d)};var f=d;const u=[f],h=function(t){h.installed||(h.installed=!0,u.map(e=>t.component(e.name,e)))};"undefined"!==typeof window&&window.Vue&&h(window.Vue);var p={install:h,...u};e["default"]=p}})}));
//# sourceMappingURL=typing-animation.umd.min.js.map