type-animation
Version:
vue 打字动画组件，炫酷的打字动画效果
624 lines (544 loc) • 21.2 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["typing-animation"] = factory();
else
root["typing-animation"] = factory();
})((typeof self !== 'undefined' ? self : this), function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "fb15");
/******/ })
/************************************************************************/
/******/ ({
/***/ "03c4":
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "6f85":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_main_vue_vue_type_style_index_0_id_65234585_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("03c4");
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_main_vue_vue_type_style_index_0_id_65234585_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_main_vue_vue_type_style_index_0_id_65234585_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */
/* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_main_vue_vue_type_style_index_0_id_65234585_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/***/ "d999":
/***/ (function(module, exports) {
!(function(d) {
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>',
t = (e = document.getElementsByTagName("script"))[
e.length - 1
].getAttribute("data-injectcss");
if (t && !d.__iconfont__svg__cssinject__) {
d.__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 t = function() {
document.removeEventListener("DOMContentLoaded", t, !1), e();
};
document.addEventListener("DOMContentLoaded", t, !1);
}
else
document.attachEvent &&
((o = e),
(i = d.document),
(c = !1),
(l = function() {
try {
i.documentElement.doScroll("left");
} catch (e) {
return void setTimeout(l, 50);
}
n();
})(),
(i.onreadystatechange = function() {
"complete" == i.readyState && ((i.onreadystatechange = null), n());
}));
function n() {
c || ((c = !0), o());
}
var o, i, c, l;
})(function() {
var e, t;
((e = document.createElement("div")).innerHTML = n),
(n = null),
(t = e.getElementsByTagName("svg")[0]) &&
(t.setAttribute("aria-hidden", "true"),
(t.style.position = "absolute"),
(t.style.width = 0),
(t.style.height = 0),
(t.style.overflow = "hidden"),
(function(e, t) {
t.firstChild
? (function(e, t) {
t.parentNode.insertBefore(e, t);
})(e, t.firstChild)
: t.appendChild(e);
})(t, document.body));
});
})(window);
/***/ }),
/***/ "f6fd":
/***/ (function(module, exports) {
// document.currentScript polyfill by Adam Miller
// MIT license
(function(document){
var currentScript = "currentScript",
scripts = document.getElementsByTagName('script'); // Live NodeList collection
// If browser needs currentScript polyfill, add get currentScript() to the document object
if (!(currentScript in document)) {
Object.defineProperty(document, currentScript, {
get: function(){
// IE 6-10 supports script readyState
// IE 10+ support stack trace
try { throw new Error(); }
catch (err) {
// Find the second match for the "at" string to get file src url from stack.
// Specifically works with the format of stack traces in IE.
var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];
// For all scripts on the page, if src matches or if ready state is interactive, return the script tag
for(i in scripts){
if(scripts[i].src == res || scripts[i].readyState == "interactive"){
return scripts[i];
}
}
// If no match, return null
return null;
}
}
});
}
})(document);
/***/ }),
/***/ "fb15":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
if (true) {
__webpack_require__("f6fd")
}
var i
if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
__webpack_require__.p = i[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a4363f04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/typing-animation/src/main.vue?vue&type=template&id=65234585&scoped=true&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.isCssText)?_c('div',{staticClass:"text"},_vm._l((_vm.textArr),function(text,index){return _c('p',{key:index,ref:'column',refInFor:true,class:{
typing: _vm.isAnimation,
lastTyping: _vm.isLast
},attrs:{"id":'column' + index}},[_vm._v(" "+_vm._s(text)+" ")])}),0):_vm._e(),(_vm.isCssCmd)?_c('div',{staticClass:"dos"},[_c('div',{staticClass:"header"},[_c('i',{staticClass:"icon-box"},[_c('svg',{staticClass:"icon svg-icon",attrs:{"aria-hidden":"true"}},[_c('use',{attrs:{"xlink:href":"#iconcloudshell-copy"}})])]),_vm._v(" 命令提示符 ")]),_vm._l((_vm.textArr),function(text,index){return _c('p',{key:index,ref:'column',refInFor:true,class:{ typing: _vm.isAnimation, lastTyping: _vm.isLast },attrs:{"id":'column' + index}},[_vm._v(" "+_vm._s(text)+" ")])})],2):_vm._e()])}
var staticRenderFns = []
// CONCATENATED MODULE: ./packages/typing-animation/src/main.vue?vue&type=template&id=65234585&scoped=true&
// EXTERNAL MODULE: ./examples/assets/iconfont/iconfont.js
var iconfont = __webpack_require__("d999");
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/typing-animation/src/main.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// 打字动画
/* harmony default export */ var mainvue_type_script_lang_js_ = ({
name: "typingAnimation",
props: {
text: String, // 文本
separators: String, // 分隔符
type: String, // 模式，样式类型
isSingle: Boolean // 单行效果
},
data() {
return {
isAnimation: false,
isLast: false,
textArr: [],
isCssText: false,
isCssCmd: false
};
},
mounted() {
this.commaSegmentation(); // 分割文本，以达到换行的目的
const that = this;
this.selectType();
for (let index = 0; index < this.textArr.length; index++) {
const element = this.textArr[index];
(j => {
setTimeout(() => {
if (this.isSingle) {
that.single(element, index);
} else {
that.flowAnimation(element, index);
}
}, j * 3000);
})(index); // 使用立即执行函数解决setTimeout函数的闭包问题，详细讲解请参考，《你不知道的JavaScript（上卷）》：第三章：3.3.2
}
},
methods: {
flowAnimation(element, index) {
this.$nextTick(() => {
// const textDom = document.getElementById("column" + index);
const textDom = this.$refs.column[index];
// console.log(this.$refs.column);
if (textDom) {
textDom.classList.add("typing");
const len = this.getTextLength(element);
textDom.style.width = len + "rem";
textDom.addEventListener("animationend", changeStyle, false);
function changeStyle() {
if (textDom) {
textDom.style.borderRight = "none";
}
}
}
});
},
// 实现单行效果，输入一行，下一行消失
single(element, index) {
const that = this;
this.$nextTick(() => {
// const textDom = document.getElementById("column" + index);
const textDom = this.$refs.column[index];
if (textDom) {
textDom.classList.add("typing");
const len = this.getTextLength(element);
textDom.style.width = len + "rem";
textDom.addEventListener("animationend", changeStyle, false);
function changeStyle() {
if (textDom) {
textDom.style.borderRight = "none";
}
// const lastDom = document.getElementById("column" + index);
const lastDom = that.$refs.column[index];
lastDom.style.display = "none";
}
}
});
},
// 符号分隔，默认”，“分割（中文字符）
commaSegmentation() {
if (this.separators) {
this.textArr = this.text.split(this.separators);
} else {
this.textArr = this.text.split("，");
}
},
// css类型选择
selectType() {
if (this.type === "text") {
this.isCssText = true;
this.isCssCmd = false;
} else if (this.type === "cmd") {
this.isCssText = false;
this.isCssCmd = true;
}
},
// 字符等分
equalDivision() {
if (this.text.length > 100) {
const column = Math.floor(this.text.length / 40); // 行数
const lastColumn = this.text.length % 40;
for (let index = 0; index < column; index++) {
const element = this.text.slice(
index * 40,
index > 0 ? 40 * (index + 1) : 40
);
this.textArr.push(element);
this.trimSpace(this.textArr);
}
if (lastColumn) {
this.textArr.push(this.text.slice(40 * column, this.text.length));
}
}
},
// 获取文本长度，计算动画设置宽度
getTextLength(element) {
let len = 0;
for (let i = 0; i < element.length; i++) {
if (element.charCodeAt(i) > 127 || element.charCodeAt(i) === 94) {
len += 1;
} else {
len++;
}
}
return len;
},
// 删除数组空白元素
trimSpace(array) {
for (let i = 0; i < array.length; i++) {
if (
array[i] === "" ||
array[i] === null ||
typeof array[i] === "undefined"
) {
array.splice(i, 1);
i = i - 1;
}
}
return array;
}
}
});
// CONCATENATED MODULE: ./packages/typing-animation/src/main.vue?vue&type=script&lang=js&
/* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
// EXTERNAL MODULE: ./packages/typing-animation/src/main.vue?vue&type=style&index=0&id=65234585&scoped=true&lang=css&
var mainvue_type_style_index_0_id_65234585_scoped_true_lang_css_ = __webpack_require__("6f85");
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functioal component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./packages/typing-animation/src/main.vue
/* normalize component */
var component = normalizeComponent(
src_mainvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
"65234585",
null
)
/* harmony default export */ var main = (component.exports);
// CONCATENATED MODULE: ./packages/typing-animation/index.js
main.install = Vue => {
Vue.component(main.name, main);
};
/* harmony default export */ var typing_animation = (main);
// CONCATENATED MODULE: ./packages/index.js
const components = [typing_animation];
const install = function(Vue) {
if (install.installed) return;
install.installed = true;
components.map(component => Vue.component(component.name, component));
};
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
/* harmony default export */ var packages_0 = ({
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
...components
});
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (packages_0);
/***/ })
/******/ });
});
//# sourceMappingURL=typing-animation.umd.js.map