vue3-intro-step
Version:
基于vue3的系统引导步骤组件。
927 lines (809 loc) • 36 kB
JavaScript
'use strict';var vue=require('vue');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.");
}var _this = undefined;
var throttle = function throttle(fn, delay) {
var timerId = null;
var flag = true;
return function () {
if (!flag) return;
flag = false;
for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
arg[_key] = arguments[_key];
}
var args = arg;
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
flag = true;
fn.apply(_this, args);
}, delay || 1000);
};
};
var script = /*#__PURE__*/vue.defineComponent({
name: 'Vue3IntroStep',
// vue component name
props: {
show: {
type: Boolean,
required: true
},
config: {
type: Object,
required: true
}
},
emits: ['update:show'],
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 _this2 = this;
window.onresize = throttle(function () {
if (_this2.show) {
_this2.setBoxInfo();
}
}, 100);
},
beforeUnmount: function beforeUnmount() {
window.onresize = null;
},
methods: {
prev: function prev() {
var _this3 = 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 (!(_this3.config.tips[_this3.currentIndex] && _this3.config.tips[_this3.currentIndex].onPrev)) {
_context.next = 5;
break;
}
_context.next = 4;
return _this3.config.tips[_this3.currentIndex].onPrev();
case 4:
flag = _context.sent;
case 5:
if (flag) {
_context.next = 7;
break;
}
throw new Error('onPrev 需要 Promise.resolve(true) 才可以继续往下走');
case 7:
_this3.setBoxInfo(_this3.currentIndex - 1);
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}))();
},
next: function next() {
var _this4 = 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 (!(_this4.config.tips[_this4.currentIndex] && _this4.config.tips[_this4.currentIndex].onNext)) {
_context2.next = 5;
break;
}
_context2.next = 4;
return _this4.config.tips[_this4.currentIndex].onNext();
case 4:
flag = _context2.sent;
case 5:
if (flag) {
_context2.next = 7;
break;
}
throw new Error('onNext 需要 Promise.resolve(true) 才可以继续往下走');
case 7:
_this4.setBoxInfo(_this4.currentIndex + 1);
case 8:
case "end":
return _context2.stop();
}
}
}, _callee2);
}))();
},
done: function done() {
this.$emit('update:show', false);
},
// 根据标签获取盒子的位置
setBoxInfo: function setBoxInfo(index) {
var _this5 = 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 = _this5.currentIndex;
}
if (_this5.show) {
// 禁止页面滚动
document.body.style.overflow = 'hidden';
}
el = _this5.config.tips[index].el;
box = document.querySelector(el);
if (box) {
_context3.next = 7;
break;
}
throw new Error('没有找到相应的元素');
case 7:
rect = box.getBoundingClientRect();
_this5.originalBox = {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height
};
_this5.tipBoxPosition = _this5.config.tips[index].tipPosition;
_this5.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 _this6 = 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) {
// 如果第一个盒子存在
_this6.setBoxInfo(0);
clearInterval(timer);
}
}, 0);
} catch (e) {
throw new Error(e.message);
}
} else {
throw new Error('tips数组不能为空');
}
} else {
throw new Error('config中的tips不存在或者不是数组');
}
}
}
});var _withScopeId = function _withScopeId(n) {
return vue.pushScopeId("data-v-5d3b253c"), n = n(), vue.popScopeId(), n;
};
var _hoisted_1 = {
key: 0,
id: "intro_box"
};
var _hoisted_2 = /*#__PURE__*/_withScopeId(function () {
return /*#__PURE__*/vue.createElementVNode("div", {
class: "round round-flicker"
}, null, -1);
});
var _hoisted_3 = [_hoisted_2];
var _hoisted_4 = {
class: "tip-content"
};
var _hoisted_5 = {
class: "action",
style: {
justifyContent: 'center'
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.Transition, {
name: "custom-classes-transition",
"enter-active-class": "animate__animated animate__fadeIn animate__faster",
"leave-active-class": "animate__animated animate__fadeOut animate__faster"
}, {
default: vue.withCtx(function () {
return [_ctx.show ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createElementVNode("div", {
class: "top",
style: vue.normalizeStyle({
height: "".concat(_ctx.originalBox.top, "px"),
backgroundColor: "rgba(0, 0, 0, ".concat(_ctx.config.backgroundOpacity ? _ctx.config.backgroundOpacity : 0.9, ")")
})
}, null, 4), vue.createElementVNode("div", {
class: "content",
style: vue.normalizeStyle({
height: "".concat(_ctx.originalBox.height, "px")
})
}, [vue.createElementVNode("div", {
class: "left",
style: vue.normalizeStyle({
top: "".concat(_ctx.originalBox.top, "px"),
width: "".concat(_ctx.originalBox.left, "px"),
height: "".concat(_ctx.originalBox.height, "px"),
backgroundColor: "rgba(0, 0, 0, ".concat(_ctx.config.backgroundOpacity ? _ctx.config.backgroundOpacity : 0.9, ")")
})
}, null, 4), vue.createElementVNode("div", {
class: "original-box",
style: vue.normalizeStyle({
top: "".concat(_ctx.originalBox.top, "px"),
left: "".concat(_ctx.originalBox.left, "px"),
width: "".concat(_ctx.originalBox.width, "px"),
height: "".concat(_ctx.originalBox.height, "px")
})
}, _hoisted_3, 4), vue.createElementVNode("div", {
class: "tip-box",
style: vue.normalizeStyle(_ctx.tipBoxStyle)
}, [vue.createElementVNode("div", _hoisted_4, [_ctx.config.tips[_ctx.currentIndex].title ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "title",
style: vue.normalizeStyle({
textAlign: _ctx.config.titleStyle ? _ctx.config.titleStyle.textAlign ? _ctx.config.titleStyle.textAlign : 'center' : 'center',
fontSize: _ctx.config.titleStyle ? _ctx.config.titleStyle.fontSize ? _ctx.config.titleStyle.fontSize : '19px' : '19px'
})
}, vue.toDisplayString(_ctx.config.tips[_ctx.currentIndex].title), 5)) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
class: "content",
style: vue.normalizeStyle({
textAlign: _ctx.config.contentStyle ? _ctx.config.contentStyle.textAlign ? _ctx.config.contentStyle.textAlign : 'center' : 'center',
fontSize: _ctx.config.contentStyle ? _ctx.config.contentStyle.fontSize ? _ctx.config.contentStyle.fontSize : '15px' : '15px'
})
}, vue.toDisplayString(_ctx.config.tips[_ctx.currentIndex].content), 5), vue.createElementVNode("div", _hoisted_5, [_ctx.currentIndex !== 0 ? vue.renderSlot(_ctx.$slots, "prev", {
key: 0,
index: _ctx.currentIndex,
tipItem: _ctx.config.tips[_ctx.currentIndex]
}, function () {
return [vue.createElementVNode("div", {
class: "item prev",
onClick: _cache[0] || (_cache[0] = function () {
return _ctx.prev && _ctx.prev.apply(_ctx, arguments);
})
}, "上一步")];
}) : vue.createCommentVNode("", true), _ctx.currentIndex !== _ctx.config.tips.length - 1 ? vue.renderSlot(_ctx.$slots, "next", {
key: 1,
index: _ctx.currentIndex,
tipItem: _ctx.config.tips[_ctx.currentIndex]
}, function () {
return [vue.createElementVNode("div", {
class: "item next",
onClick: _cache[1] || (_cache[1] = function () {
return _ctx.next && _ctx.next.apply(_ctx, arguments);
})
}, "下一步")];
}) : vue.createCommentVNode("", true), _ctx.currentIndex === _ctx.config.tips.length - 1 ? vue.renderSlot(_ctx.$slots, "done", {
key: 2,
index: _ctx.currentIndex,
tipItem: _ctx.config.tips[_ctx.currentIndex]
}, function () {
return [vue.createElementVNode("div", {
class: "item done",
onClick: _cache[2] || (_cache[2] = function () {
return _ctx.done && _ctx.done.apply(_ctx, arguments);
})
}, "完成")];
}) : vue.renderSlot(_ctx.$slots, "skip", {
key: 3,
index: _ctx.currentIndex,
tipItem: _ctx.config.tips[_ctx.currentIndex]
}, function () {
return [vue.createElementVNode("div", {
class: "item skip",
onClick: _cache[3] || (_cache[3] = function () {
return _ctx.done && _ctx.done.apply(_ctx, arguments);
})
}, "跳过")];
})])])], 4), vue.createElementVNode("div", {
class: "right",
style: vue.normalizeStyle({
top: "".concat(_ctx.originalBox.top, "px"),
left: "".concat(_ctx.originalBox.left + _ctx.originalBox.width, "px"),
width: "calc(100% - ".concat(_ctx.originalBox.left + _ctx.originalBox.width, "px)"),
height: "".concat(_ctx.originalBox.height, "px"),
backgroundColor: "rgba(0, 0, 0, ".concat(_ctx.config.backgroundOpacity ? _ctx.config.backgroundOpacity : 0.9, ")")
}),
ref: "tip_box"
}, null, 4)], 4), vue.createElementVNode("div", {
class: "bottom",
style: vue.normalizeStyle({
height: "calc(100% - ".concat(_ctx.originalBox.top, "px - ").concat(_ctx.originalBox.height, "px)"),
backgroundColor: "rgba(0, 0, 0, ".concat(_ctx.config.backgroundOpacity ? _ctx.config.backgroundOpacity : 0.9, ")")
})
}, null, 4)])) : vue.createCommentVNode("", true)];
}),
_: 3
});
}function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}var css_248z = "\n#intro_box[data-v-5d3b253c] {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n z-index: 99999;\n}\n#intro_box > .top[data-v-5d3b253c] {\n width: 100%;\n}\n#intro_box > .content[data-v-5d3b253c] {\n width: 100%;\n}\n#intro_box > .content > .left[data-v-5d3b253c] {\n position: absolute;\n left: 0;\n}\n#intro_box > .content > .original-box[data-v-5d3b253c] {\n position: absolute;\n background-color: transparent;\n transition: all 0.3s cubic-bezier(0, 0, 0.58, 1);\n}\n#intro_box > .content > .original-box .round[data-v-5d3b253c] {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n opacity: 0.65;\n background-color: #9900ff;\n}\n#intro_box > .content > .original-box .round-flicker[data-v-5d3b253c]:before,\n#intro_box > .content > .original-box .round-flicker[data-v-5d3b253c]:after {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n left: -1px;\n top: -1px;\n box-shadow: #9900ff 0px 0px 2px 2px;\n border: 1px solid rgba(153, 0, 255, 0.5);\n border-radius: 50%;\n animation: warn-5d3b253c 2s linear 0s infinite;\n}\n@keyframes warn-5d3b253c {\n0% {\n transform: scale(0.5);\n opacity: 1;\n}\n25% {\n transform: scale(1);\n opacity: 0.75;\n}\n50% {\n transform: scale(1.5);\n opacity: 0.5;\n}\n75% {\n transform: scale(2);\n opacity: 0.25;\n}\n100% {\n transform: scale(2.5);\n opacity: 0;\n}\n}\n#intro_box > .content > .tip-box[data-v-5d3b253c] {\n position: absolute;\n /*宽度应为内容宽*/\n width: fit-content;\n max-width: 300px;\n box-sizing: border-box;\n /*高度应为内容高度*/\n height: fit-content;\n transition: all 0.3s;\n z-index: 99999;\n padding: 12px;\n font-size: 15px;\n}\n#intro_box > .content > .tip-box > .tip-content[data-v-5d3b253c] {\n border-radius: 10px;\n overflow: hidden;\n padding: 10px;\n color: #fff;\n}\n#intro_box > .content > .tip-box > .tip-content > .title[data-v-5d3b253c] {\n font-weight: bold;\n margin-bottom: 10px;\n}\n#intro_box > .content > .tip-box > .tip-content > .content[data-v-5d3b253c] {\n white-space: normal;\n overflow-wrap: break-word;\n line-height: 1.5;\n}\n#intro_box > .content > .tip-box > .tip-content > .action[data-v-5d3b253c] {\n margin-top: 15px;\n width: 100%;\n display: flex;\n}\n#intro_box > .content > .tip-box > .tip-content > .action > .item[data-v-5d3b253c] {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border-radius: 15px;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.3s;\n padding: 5px 15px;\n color: #fff;\n font-weight: bold;\n border: 1px solid #ccc;\n margin: 5px;\n}\n#intro_box > .content > .tip-box > .tip-content > .action > .item.prev[data-v-5d3b253c] {\n color: #ccc;\n}\n#intro_box > .content > .tip-box > .tip-content > .action > .item.next[data-v-5d3b253c] {\n color: #ccc;\n}\n#intro_box > .content > .tip-box > .tip-content > .action > .item.done[data-v-5d3b253c] {\n color: #ccc;\n}\n#intro_box > .content > .tip-box > .tip-content > .action > .item.skip[data-v-5d3b253c] {\n color: #ccc;\n}\n#intro_box > .content > .right[data-v-5d3b253c] {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.9);\n}\n#intro_box > .bottom[data-v-5d3b253c] {\n width: 100%;\n background-color: rgba(0, 0, 0, 0.9);\n}\n";
styleInject(css_248z);script.render = render;
script.__scopeId = "data-v-5d3b253c";// Import vue component
// Default export is installable instance of component.
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Assign InstallableComponent type
var installable = script; // Attach install function executed by Vue.use()
installable.install = function (app) {
app.component('Vue3IntroStep', 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;