vue-intro-step
Version:
基于vue2的系统引导步骤组件。
1,085 lines (965 loc) • 37.8 kB
JavaScript
'use strict';function _regeneratorRuntime() {
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
_regeneratorRuntime = function () {
return exports;
};
var exports = {},
Op = Object.prototype,
hasOwn = Op.hasOwnProperty,
$Symbol = "function" == typeof Symbol ? Symbol : {},
iteratorSymbol = $Symbol.iterator || "@@iterator",
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function define(obj, key, value) {
return Object.defineProperty(obj, key, {
value: value,
enumerable: !0,
configurable: !0,
writable: !0
}), obj[key];
}
try {
define({}, "");
} catch (err) {
define = function (obj, key, value) {
return obj[key] = value;
};
}
function wrap(innerFn, outerFn, self, tryLocsList) {
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
generator = Object.create(protoGenerator.prototype),
context = new Context(tryLocsList || []);
return generator._invoke = function (innerFn, self, context) {
var state = "suspendedStart";
return function (method, arg) {
if ("executing" === state) throw new Error("Generator is already running");
if ("completed" === state) {
if ("throw" === method) throw arg;
return doneResult();
}
for (context.method = method, context.arg = arg;;) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
if ("suspendedStart" === state) throw state = "completed", context.arg;
context.dispatchException(context.arg);
} else "return" === context.method && context.abrupt("return", context.arg);
state = "executing";
var record = tryCatch(innerFn, self, context);
if ("normal" === record.type) {
if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
return {
value: record.arg,
done: context.done
};
}
"throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
}
};
}(innerFn, self, context), generator;
}
function tryCatch(fn, obj, arg) {
try {
return {
type: "normal",
arg: fn.call(obj, arg)
};
} catch (err) {
return {
type: "throw",
arg: err
};
}
}
exports.wrap = wrap;
var ContinueSentinel = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var IteratorPrototype = {};
define(IteratorPrototype, iteratorSymbol, function () {
return this;
});
var getProto = Object.getPrototypeOf,
NativeIteratorPrototype = getProto && getProto(getProto(values([])));
NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function (method) {
define(prototype, method, function (arg) {
return this._invoke(method, arg);
});
});
}
function AsyncIterator(generator, PromiseImpl) {
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if ("throw" !== record.type) {
var result = record.arg,
value = result.value;
return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
invoke("next", value, resolve, reject);
}, function (err) {
invoke("throw", err, resolve, reject);
}) : PromiseImpl.resolve(value).then(function (unwrapped) {
result.value = unwrapped, resolve(result);
}, function (error) {
return invoke("throw", error, resolve, reject);
});
}
reject(record.arg);
}
var previousPromise;
this._invoke = function (method, arg) {
function callInvokeWithMethodAndArg() {
return new PromiseImpl(function (resolve, reject) {
invoke(method, arg, resolve, reject);
});
}
return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
};
}
function maybeInvokeDelegate(delegate, context) {
var method = delegate.iterator[context.method];
if (undefined === method) {
if (context.delegate = null, "throw" === context.method) {
if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
}
return ContinueSentinel;
}
var record = tryCatch(method, delegate.iterator, context.arg);
if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
var info = record.arg;
return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
}
function pushTryEntry(locs) {
var entry = {
tryLoc: locs[0]
};
1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal", delete record.arg, entry.completion = record;
}
function Context(tryLocsList) {
this.tryEntries = [{
tryLoc: "root"
}], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
}
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) return iteratorMethod.call(iterable);
if ("function" == typeof iterable.next) return iterable;
if (!isNaN(iterable.length)) {
var i = -1,
next = function next() {
for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
return next.value = undefined, next.done = !0, next;
};
return next.next = next;
}
}
return {
next: doneResult
};
}
function doneResult() {
return {
value: undefined,
done: !0
};
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
var ctor = "function" == typeof genFun && genFun.constructor;
return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
}, exports.mark = function (genFun) {
return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
}, exports.awrap = function (arg) {
return {
__await: arg
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
return this;
}), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
void 0 === PromiseImpl && (PromiseImpl = Promise);
var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
return result.done ? result.value : iter.next();
});
}, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
return this;
}), define(Gp, "toString", function () {
return "[object Generator]";
}), exports.keys = function (object) {
var keys = [];
for (var key in object) keys.push(key);
return keys.reverse(), function next() {
for (; keys.length;) {
var key = keys.pop();
if (key in object) return next.value = key, next.done = !1, next;
}
return next.done = !0, next;
};
}, exports.values = values, Context.prototype = {
constructor: Context,
reset: function (skipTempReset) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
},
stop: function () {
this.done = !0;
var rootRecord = this.tryEntries[0].completion;
if ("throw" === rootRecord.type) throw rootRecord.arg;
return this.rval;
},
dispatchException: function (exception) {
if (this.done) throw exception;
var context = this;
function handle(loc, caught) {
return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i],
record = entry.completion;
if ("root" === entry.tryLoc) return handle("end");
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc"),
hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
} else if (hasCatch) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
} else {
if (!hasFinally) throw new Error("try statement without catch or finally");
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
}
}
}
},
abrupt: function (type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
var record = finallyEntry ? finallyEntry.completion : {};
return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
},
complete: function (record, afterLoc) {
if ("throw" === record.type) throw record.arg;
return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
},
finish: function (finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
}
},
catch: function (tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if ("throw" === record.type) {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
throw new Error("illegal catch attempt");
},
delegateYield: function (iterable, resultName, nextLoc) {
return this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
}, "next" === this.method && (this.arg = undefined), ContinueSentinel;
}
}, exports;
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
function throttle(fn, delay) {
var timerId = null;
var flag = true;
return function () {
if (!flag) return;
flag = false;
var self = this;
var args = arguments;
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 1000);
};
}
var script = {
name: "vueIntroStep",
props: {
show: {
type: Boolean,
default: false,
required: true
},
config: {
type: Object,
required: true
}
},
model: {
prop: "show",
event: "close"
},
data: function data() {
return {
// 聚焦盒子的信息
originalBox: {
left: 250,
top: 250,
width: 200,
height: 100
},
// 提示盒子的位置
tipBoxPosition: 'bottom',
// 当前显示的提示进度索引
currentIndex: 0
};
},
watch: {
config: {
deep: true,
handler: function handler() {
// 监听配置变化 重置当前显示的索引
this.currentIndex = 0;
},
immediate: true
},
show: function show(val) {
if (val) {
this.setBoxInfo();
} else {
// 允许页面滚动
document.body.style.overflow = 'auto';
}
}
},
computed: {
// 计算提示盒子的位置
// eslint-disable-next-line vue/return-in-computed-property
tipBoxStyle: function tipBoxStyle() {
// 如果提示盒子的位置是right
if (this.tipBoxPosition === 'right') {
return {
left: "".concat(this.originalBox.left + this.originalBox.width, "px"),
top: "".concat(this.originalBox.top, "px")
};
} else if (this.tipBoxPosition === 'left') {
return {
right: "".concat(window.innerWidth - this.originalBox.left, "px"),
top: "".concat(this.originalBox.top, "px")
};
} else if (this.tipBoxPosition === 'top') {
return {
left: "".concat(this.originalBox.left, "px"),
bottom: "".concat(window.innerHeight - this.originalBox.top, "px")
};
} else if (this.tipBoxPosition === 'bottom') {
return {
left: "".concat(this.originalBox.left > window.innerWidth - 300 ? window.innerWidth - 300 : this.originalBox.left, "px"),
top: "".concat(this.originalBox.top + this.originalBox.height, "px")
};
}
}
},
created: function created() {
this.init();
},
mounted: function mounted() {
var _this = this;
window.onresize = throttle(function () {
if (_this.show) {
_this.setBoxInfo();
}
}, 100);
},
beforeDestroy: function beforeDestroy() {
window.onresize = null;
},
methods: {
prev: function prev() {
var _this2 = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var flag;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
// 判断是否有onPrev 是否可以继续往下走
flag = true;
if (!(_this2.config.tips[_this2.currentIndex] && _this2.config.tips[_this2.currentIndex].onPrev)) {
_context.next = 5;
break;
}
_context.next = 4;
return _this2.config.tips[_this2.currentIndex].onPrev();
case 4:
flag = _context.sent;
case 5:
if (flag) {
_context.next = 7;
break;
}
throw new Error('onPrev 需要 Promise.resolve(true) 才可以继续往下走');
case 7:
_this2.setBoxInfo(_this2.currentIndex - 1);
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
},
next: function next() {
var _this3 = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
var flag;
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
// 判断是否有onNext 是否可以继续往下走
flag = true;
if (!(_this3.config.tips[_this3.currentIndex] && _this3.config.tips[_this3.currentIndex].onNext)) {
_context2.next = 5;
break;
}
_context2.next = 4;
return _this3.config.tips[_this3.currentIndex].onNext();
case 4:
flag = _context2.sent;
case 5:
if (flag) {
_context2.next = 7;
break;
}
throw new Error('onNext 需要 Promise.resolve(true) 才可以继续往下走');
case 7:
_this3.setBoxInfo(_this3.currentIndex + 1);
case 8:
case "end":
return _context2.stop();
}
}
}, _callee2);
}))();
},
done: function done() {
this.$emit('close', false);
},
// 根据标签获取盒子的位置
setBoxInfo: function setBoxInfo(index) {
var _this4 = this;
return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
var el, box, rect;
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.prev = 0;
if (index === undefined) {
index = _this4.currentIndex;
}
if (_this4.show) {
// 禁止页面滚动
document.body.style.overflow = 'hidden';
}
el = _this4.config.tips[index].el;
box = document.querySelector(el);
if (box) {
_context3.next = 7;
break;
}
throw new Error('没有找到相应的元素');
case 7:
rect = box.getBoundingClientRect();
_this4.originalBox = {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height
};
_this4.tipBoxPosition = _this4.config.tips[index].tipPosition;
_this4.currentIndex = index;
_context3.next = 16;
break;
case 13:
_context3.prev = 13;
_context3.t0 = _context3["catch"](0);
throw new Error(_context3.t0.message);
case 16:
case "end":
return _context3.stop();
}
}
}, _callee3, null, [[0, 13]]);
}))();
},
// 根据配置初始化
init: function init() {
var _this5 = this;
// 获取config中的tips数组
var tips = this.config.tips;
var timer = null; // 判断tips是否存在 并且tips是否是数组
if (tips && Array.isArray(tips)) {
// 如果tips存在 并且tips是数组
// 判断tips数组是否有数据
if (tips.length > 0) {
// 如果tips数组有数据
// 初始化当前提示进度索引
this.currentIndex = 0; // 获取第一个盒子
try {
var firstBox = document.querySelector(tips[0].el);
timer = setInterval(function () {
firstBox = document.querySelector(tips[0].el);
if (firstBox) {
// 如果第一个盒子存在
_this5.setBoxInfo(0);
clearInterval(timer);
}
}, 0);
} catch (e) {
throw new Error(e.message);
}
} else {
throw new Error('tips数组不能为空');
}
} else {
throw new Error('config中的tips不存在或者不是数组');
}
}
}
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let 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 (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
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 (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}function createInjectorSSR(context) {
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
if (!context)
return () => { };
if (!('styles' in context)) {
context._styles = context._styles || {};
Object.defineProperty(context, 'styles', {
enumerable: true,
get: () => context._renderStyles(context._styles)
});
context._renderStyles = context._renderStyles || renderStyles;
}
return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
const group = css.media || 'default' ;
const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
if (!style.ids.includes(id)) {
style.media = css.media;
style.ids.push(id);
let code = css.source;
style.css += code + '\n';
}
}
function renderStyles(styles) {
let css = '';
for (const key in styles) {
const style = styles[key];
css +=
'<style data-vue-ssr-id="' +
Array.from(style.ids).join(' ') +
'"' +
(style.media ? ' media="' + style.media + '"' : '') +
'>' +
style.css +
'</style>';
}
return css;
}/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('transition', {
attrs: {
"name": "custom-classes-transition",
"enter-active-class": "animate__animated animate__fadeIn animate__faster",
"leave-active-class": "animate__animated animate__fadeOut animate__faster"
}
}, [_vm.show ? _c('div', {
attrs: {
"id": "intro_box"
}
}, [_c('div', {
staticClass: "top",
style: {
height: _vm.originalBox.top + "px",
backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
}
}), _vm._v(" "), _c('div', {
staticClass: "content",
style: {
height: _vm.originalBox.height + "px"
}
}, [_c('div', {
staticClass: "left",
style: {
top: _vm.originalBox.top + "px",
width: _vm.originalBox.left + "px",
height: _vm.originalBox.height + "px",
backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
}
}), _vm._v(" "), _c('div', {
staticClass: "original-box",
style: {
top: _vm.originalBox.top + "px",
left: _vm.originalBox.left + "px",
width: _vm.originalBox.width + "px",
height: _vm.originalBox.height + "px"
}
}, [_c('div', {
staticClass: "round round-flicker"
})]), _vm._v(" "), _c('div', {
staticClass: "tip-box",
style: _vm.tipBoxStyle
}, [_c('div', {
staticClass: "tip-content"
}, [_vm.config.tips[_vm.currentIndex].title ? _c('div', {
staticClass: "title",
style: {
textAlign: _vm.config.titleStyle ? _vm.config.titleStyle.textAlign ? _vm.config.titleStyle.textAlign : 'center' : 'center',
fontSize: _vm.config.titleStyle ? _vm.config.titleStyle.fontSize ? _vm.config.titleStyle.fontSize : '19px' : '19px'
}
}, [_vm._v("\n " + _vm._s(_vm.config.tips[_vm.currentIndex].title) + "\n ")]) : _vm._e(), _vm._v(" "), _c('div', {
staticClass: "content",
style: {
textAlign: _vm.config.contentStyle ? _vm.config.contentStyle.textAlign ? _vm.config.contentStyle.textAlign : 'center' : 'center',
fontSize: _vm.config.contentStyle ? _vm.config.contentStyle.fontSize ? _vm.config.contentStyle.fontSize : '15px' : '15px'
}
}, [_vm._v("\n " + _vm._s(_vm.config.tips[_vm.currentIndex].content) + "\n ")]), _vm._v(" "), _c('div', {
staticClass: "action",
style: {
justifyContent: 'center'
}
}, [_vm.currentIndex !== 0 ? _vm._t("prev", function () {
return [_c('div', {
staticClass: "item prev",
on: {
"click": _vm.prev
}
}, [_vm._v("上一步")])];
}, {
"index": _vm.currentIndex,
"tipItem": _vm.config.tips[_vm.currentIndex]
}) : _vm._e(), _vm._v(" "), _vm.currentIndex !== _vm.config.tips.length - 1 ? _vm._t("next", function () {
return [_c('div', {
staticClass: "item next",
on: {
"click": _vm.next
}
}, [_vm._v("下一步")])];
}, {
"index": _vm.currentIndex,
"tipItem": _vm.config.tips[_vm.currentIndex]
}) : _vm._e(), _vm._v(" "), _vm.currentIndex === _vm.config.tips.length - 1 ? _vm._t("done", function () {
return [_c('div', {
staticClass: "item done",
on: {
"click": _vm.done
}
}, [_vm._v("完成")])];
}, {
"index": _vm.currentIndex,
"tipItem": _vm.config.tips[_vm.currentIndex]
}) : _vm._t("skip", function () {
return [_c('div', {
staticClass: "item skip",
on: {
"click": _vm.done
}
}, [_vm._v("跳过")])];
}, {
"index": _vm.currentIndex,
"tipItem": _vm.config.tips[_vm.currentIndex]
})], 2)])]), _vm._v(" "), _c('div', {
ref: "tip_box",
staticClass: "right",
style: {
top: _vm.originalBox.top + "px",
left: _vm.originalBox.left + _vm.originalBox.width + "px",
width: "calc(100% - " + (_vm.originalBox.left + _vm.originalBox.width) + "px)",
height: _vm.originalBox.height + "px",
backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
}
})]), _vm._v(" "), _c('div', {
staticClass: "bottom",
style: {
height: "calc(100% - " + _vm.originalBox.top + "px - " + _vm.originalBox.height + "px)",
backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
}
})]) : _vm._e()]);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-6e78b694_0", {
source: "#intro_box[data-v-6e78b694]{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999}#intro_box>.top[data-v-6e78b694]{width:100%}#intro_box>.content[data-v-6e78b694]{width:100%}#intro_box>.content>.left[data-v-6e78b694]{position:absolute;left:0}#intro_box>.content>.original-box[data-v-6e78b694]{position:absolute;background-color:transparent;transition:all .3s cubic-bezier(0,0,.58,1)}#intro_box>.content>.original-box .round[data-v-6e78b694]{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;opacity:.65;background-color:#90f}#intro_box>.content>.original-box .round-flicker[data-v-6e78b694]:after,#intro_box>.content>.original-box .round-flicker[data-v-6e78b694]:before{content:'';width:100%;height:100%;position:absolute;left:-1px;top:-1px;box-shadow:#90f 0 0 2px 2px;border:1px solid rgba(153,0,255,.5);border-radius:50%;animation:warn-data-v-6e78b694 2s linear 0s infinite}@keyframes warn-data-v-6e78b694{0%{transform:scale(.5);opacity:1}25%{transform:scale(1);opacity:.75}50%{transform:scale(1.5);opacity:.5}75%{transform:scale(2);opacity:.25}100%{transform:scale(2.5);opacity:0}}#intro_box>.content>.tip-box[data-v-6e78b694]{position:absolute;width:fit-content;max-width:300px;box-sizing:border-box;height:fit-content;transition:all .3s;z-index:99999;padding:12px;font-size:15px}#intro_box>.content>.tip-box>.tip-content[data-v-6e78b694]{border-radius:10px;overflow:hidden;padding:10px;color:#fff}#intro_box>.content>.tip-box>.tip-content>.title[data-v-6e78b694]{font-weight:700;margin-bottom:10px}#intro_box>.content>.tip-box>.tip-content>.content[data-v-6e78b694]{white-space:normal;overflow-wrap:break-word;line-height:1.5}#intro_box>.content>.tip-box>.tip-content>.action[data-v-6e78b694]{margin-top:15px;width:100%;display:flex}#intro_box>.content>.tip-box>.tip-content>.action>.item[data-v-6e78b694]{display:flex;justify-content:center;align-items:center;text-align:center;border-radius:15px;font-size:12px;cursor:pointer;transition:all .3s;padding:5px 15px;color:#fff;font-weight:700;border:1px solid #ccc;margin:5px}#intro_box>.content>.tip-box>.tip-content>.action>.item.prev[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.next[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.done[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.skip[data-v-6e78b694]{color:#ccc}#intro_box>.content>.right[data-v-6e78b694]{position:absolute;background-color:rgba(0,0,0,.9)}#intro_box>.bottom[data-v-6e78b694]{width:100%;background-color:rgba(0,0,0,.9)}",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__ = "data-v-6e78b694";
/* module identifier */
var __vue_module_identifier__ = "data-v-6e78b694";
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);
var component$1 = __vue_component__;// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Get component instance
var installable = component$1; // Attach install function executed by Vue.use()
installable.install = function (Vue) {
Vue.component('VueIntroStep', installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;