vue3-intro-step/dist/vue3-intro-step.min.js

基于vue3的系统引导步骤组件。

var Vue3IntroStep=function(t){"use strict";function n(){
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
n=function(){return t};var t={},e=Object.prototype,o=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},i=r.iterator||"@@iterator",c=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function l(t,n,e){return Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}),t[n]}try{l({},"")}catch(t){l=function(t,n,e){return t[n]=e}}function s(t,n,e,o){var r=n&&n.prototype instanceof f?n:f,i=Object.create(r.prototype),c=new _(o||[]);return i._invoke=function(t,n,e){var o="suspendedStart";return function(r,i){if("executing"===o)throw new Error("Generator is already running");if("completed"===o){if("throw"===r)throw i;return I()}for(e.method=r,e.arg=i;;){var c=e.delegate;if(c){var a=w(c,e);if(a){if(a===d)continue;return a}}if("next"===e.method)e.sent=e._sent=e.arg;else if("throw"===e.method){if("suspendedStart"===o)throw o="completed",e.arg;e.dispatchException(e.arg)}else"return"===e.method&&e.abrupt("return",e.arg);o="executing";var l=u(t,n,e);if("normal"===l.type){if(o=e.done?"completed":"suspendedYield",l.arg===d)continue;return{value:l.arg,done:e.done}}"throw"===l.type&&(o="completed",e.method="throw",e.arg=l.arg)}}}(t,e,c),i}function u(t,n,e){try{return{type:"normal",arg:t.call(n,e)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var d={};function f(){}function p(){}function h(){}var x={};l(x,i,(function(){return this}));var g=Object.getPrototypeOf,y=g&&g(g(B([])));y&&y!==e&&o.call(y,i)&&(x=y);var v=h.prototype=f.prototype=Object.create(x);function m(t){["next","throw","return"].forEach((function(n){l(t,n,(function(t){return this._invoke(n,t)}))}))}function b(t,n){function e(r,i,c,a){var l=u(t[r],t,i);if("throw"!==l.type){var s=l.arg,d=s.value;return d&&"object"==typeof d&&o.call(d,"__await")?n.resolve(d.__await).then((function(t){e("next",t,c,a)}),(function(t){e("throw",t,c,a)})):n.resolve(d).then((function(t){s.value=t,c(s)}),(function(t){return e("throw",t,c,a)}))}a(l.arg)}var r;this._invoke=function(t,o){function i(){return new n((function(n,r){e(t,o,n,r)}))}return r=r?r.then(i,i):i()}}function w(t,n){var e=t.iterator[n.method];if(void 0===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=void 0,w(t,n),"throw"===n.method))return d;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return d}var o=u(e,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,d;var r=o.arg;return r?r.done?(n[t.resultName]=r.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=void 0),n.delegate=null,d):r:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,d)}function k(t){var n={tryLoc:t[0]};1 in t&&(n.catchLoc=t[1]),2 in t&&(n.finallyLoc=t[2],n.afterLoc=t[3]),this.tryEntries.push(n)}function S(t){var n=t.completion||{};n.type="normal",delete n.arg,t.completion=n}function _(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(k,this),this.reset(!0)}function B(t){if(t){var n=t[i];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var e=-1,r=function n(){for(;++e<t.length;)if(o.call(t,e))return n.value=t[e],n.done=!1,n;return n.value=void 0,n.done=!0,n};return r.next=r}}return{next:I}}function I(){return{value:void 0,done:!0}}return p.prototype=h,l(v,"constructor",h),l(h,"constructor",p),p.displayName=l(h,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var n="function"==typeof t&&t.constructor;return!!n&&(n===p||"GeneratorFunction"===(n.displayName||n.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,l(t,a,"GeneratorFunction")),t.prototype=Object.create(v),t},t.awrap=function(t){return{__await:t}},m(b.prototype),l(b.prototype,c,(function(){return this})),t.AsyncIterator=b,t.async=function(n,e,o,r,i){void 0===i&&(i=Promise);var c=new b(s(n,e,o,r),i);return t.isGeneratorFunction(e)?c:c.next().then((function(t){return t.done?t.value:c.next()}))},m(v),l(v,a,"Generator"),l(v,i,(function(){return this})),l(v,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var n=[];for(var e in t)n.push(e);return n.reverse(),function e(){for(;n.length;){var o=n.pop();if(o in t)return e.value=o,e.done=!1,e}return e.done=!0,e}},t.values=B,_.prototype={constructor:_,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(S),!t)for(var n in this)"t"===n.charAt(0)&&o.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function e(e,o){return c.type="throw",c.arg=t,n.next=e,o&&(n.method="next",n.arg=void 0),!!o}for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r],c=i.completion;if("root"===i.tryLoc)return e("end");if(i.tryLoc<=this.prev){var a=o.call(i,"catchLoc"),l=o.call(i,"finallyLoc");if(a&&l){if(this.prev<i.catchLoc)return e(i.catchLoc,!0);if(this.prev<i.finallyLoc)return e(i.finallyLoc)}else if(a){if(this.prev<i.catchLoc)return e(i.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return e(i.finallyLoc)}}}},abrupt:function(t,n){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc<=this.prev&&o.call(r,"finallyLoc")&&this.prev<r.finallyLoc){var i=r;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=n&&n<=i.finallyLoc&&(i=null);var c=i?i.completion:{};return c.type=t,c.arg=n,i?(this.method="next",this.next=i.finallyLoc,d):this.complete(c)},complete:function(t,n){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&n&&(this.next=n),d},finish:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),S(e),d}},catch:function(t){for(var n=this.tryEntries.length-1;n>=0;--n){var e=this.tryEntries[n];if(e.tryLoc===t){var o=e.completion;if("throw"===o.type){var r=o.arg;S(e)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,e){return this.delegate={iterator:B(t),resultName:n,nextLoc:e},"next"===this.method&&(this.arg=void 0),d}},t}function e(t,n,e,o,r,i,c){try{var a=t[i](c),l=a.value}catch(t){return void e(t)}a.done?n(l):Promise.resolve(l).then(o,r)}function o(t){return function(){var n=this,o=arguments;return new Promise((function(r,i){var c=t.apply(n,o);function a(t){e(c,r,i,a,l,"next",t)}function l(t){e(c,r,i,a,l,"throw",t)}a(void 0)}))}}function r(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==e)return;var o,r,i=[],c=!0,a=!1;try{for(e=e.call(t);!(c=(o=e.next()).done)&&(i.push(o.value),!n||i.length!==n);c=!0);}catch(t){a=!0,r=t}finally{try{c||null==e.return||e.return()}finally{if(a)throw r}}return i}(t,n)||function(t,n){if(!t)return;if("string"==typeof t)return i(t,n);var e=Object.prototype.toString.call(t).slice(8,-1);"Object"===e&&t.constructor&&(e=t.constructor.name);if("Map"===e||"Set"===e)return Array.from(t);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return i(t,n)}(t,n)||function(){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 i(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,o=new Array(n);e<n;e++)o[e]=t[e];return o}var c=void 0,a=t.defineComponent({name:"Vue3IntroStep",props:{show:{type:Boolean,required:!0},config:{type:Object,required:!0}},emits:["update:show"],data:function(){return{originalBox:{left:250,top:250,width:200,height:100},tipBoxPosition:"bottom",currentIndex:0}},watch:{config:{deep:!0,handler:function(){this.currentIndex=0},immediate:!0},show:function(t){t?this.setBoxInfo():document.body.style.overflow="auto"}},computed:{tipBoxStyle:function(){return"right"===this.tipBoxPosition?{left:"".concat(this.originalBox.left+this.originalBox.width,"px"),top:"".concat(this.originalBox.top,"px")}:"left"===this.tipBoxPosition?{right:"".concat(window.innerWidth-this.originalBox.left,"px"),top:"".concat(this.originalBox.top,"px")}:"top"===this.tipBoxPosition?{left:"".concat(this.originalBox.left,"px"),bottom:"".concat(window.innerHeight-this.originalBox.top,"px")}:"bottom"===this.tipBoxPosition?{left:"".concat(this.originalBox.left>window.innerWidth-300?window.innerWidth-300:this.originalBox.left,"px"),top:"".concat(this.originalBox.top+this.originalBox.height,"px")}:void 0}},created:function(){this.init()},mounted:function(){var t,n,e,o,r=this;window.onresize=(t=function(){r.show&&r.setBoxInfo()},n=100,e=null,o=!0,function(){if(o){o=!1;for(var r=arguments.length,i=new Array(r),a=0;a<r;a++)i[a]=arguments[a];var l=i;e&&clearTimeout(e),e=setTimeout((function(){o=!0,t.apply(c,l)}),n||1e3)}})},beforeUnmount:function(){window.onresize=null},methods:{prev:function(){var t=this;return o(n().mark((function e(){var o;return n().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(o=!0,!t.config.tips[t.currentIndex]||!t.config.tips[t.currentIndex].onPrev){n.next=5;break}return n.next=4,t.config.tips[t.currentIndex].onPrev();case 4:o=n.sent;case 5:if(o){n.next=7;break}throw new Error("onPrev 需要 Promise.resolve(true) 才可以继续往下走");case 7:t.setBoxInfo(t.currentIndex-1);case 8:case"end":return n.stop()}}),e)})))()},next:function(){var t=this;return o(n().mark((function e(){var o;return n().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(o=!0,!t.config.tips[t.currentIndex]||!t.config.tips[t.currentIndex].onNext){n.next=5;break}return n.next=4,t.config.tips[t.currentIndex].onNext();case 4:o=n.sent;case 5:if(o){n.next=7;break}throw new Error("onNext 需要 Promise.resolve(true) 才可以继续往下走");case 7:t.setBoxInfo(t.currentIndex+1);case 8:case"end":return n.stop()}}),e)})))()},done:function(){this.$emit("update:show",!1)},setBoxInfo:function(t){var e=this;return o(n().mark((function o(){var r,i,c;return n().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(n.prev=0,void 0===t&&(t=e.currentIndex),e.show&&(document.body.style.overflow="hidden"),r=e.config.tips[t].el,i=document.querySelector(r)){n.next=7;break}throw new Error("没有找到相应的元素");case 7:c=i.getBoundingClientRect(),e.originalBox={left:c.left,top:c.top,width:c.width,height:c.height},e.tipBoxPosition=e.config.tips[t].tipPosition,e.currentIndex=t,n.next=16;break;case 13:throw n.prev=13,n.t0=n.catch(0),new Error(n.t0.message);case 16:case"end":return n.stop()}}),o,null,[[0,13]])})))()},init:function(){var t=this,n=this.config.tips,e=null;if(!n||!Array.isArray(n))throw new Error("config中的tips不存在或者不是数组");if(!(n.length>0))throw new Error("tips数组不能为空");this.currentIndex=0;try{document.querySelector(n[0].el);e=setInterval((function(){document.querySelector(n[0].el)&&(t.setBoxInfo(0),clearInterval(e))}),0)}catch(t){throw new Error(t.message)}}}}),l={key:0,id:"intro_box"},s=[function(n){return t.pushScopeId("data-v-5d3b253c"),n=n(),t.popScopeId(),n}((function(){return t.createElementVNode("div",{class:"round round-flicker"},null,-1)}))],u={class:"tip-content"},d={class:"action",style:{justifyContent:"center"}};!function(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===e&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}("\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"),a.render=function(n,e,o,r,i,c){return t.openBlock(),t.createBlock(t.Transition,{name:"custom-classes-transition","enter-active-class":"animate__animated animate__fadeIn animate__faster","leave-active-class":"animate__animated animate__fadeOut animate__faster"},{default:t.withCtx((function(){return[n.show?(t.openBlock(),t.createElementBlock("div",l,[t.createElementVNode("div",{class:"top",style:t.normalizeStyle({height:"".concat(n.originalBox.top,"px"),backgroundColor:"rgba(0, 0, 0, ".concat(n.config.backgroundOpacity?n.config.backgroundOpacity:.9,")")})},null,4),t.createElementVNode("div",{class:"content",style:t.normalizeStyle({height:"".concat(n.originalBox.height,"px")})},[t.createElementVNode("div",{class:"left",style:t.normalizeStyle({top:"".concat(n.originalBox.top,"px"),width:"".concat(n.originalBox.left,"px"),height:"".concat(n.originalBox.height,"px"),backgroundColor:"rgba(0, 0, 0, ".concat(n.config.backgroundOpacity?n.config.backgroundOpacity:.9,")")})},null,4),t.createElementVNode("div",{class:"original-box",style:t.normalizeStyle({top:"".concat(n.originalBox.top,"px"),left:"".concat(n.originalBox.left,"px"),width:"".concat(n.originalBox.width,"px"),height:"".concat(n.originalBox.height,"px")})},s,4),t.createElementVNode("div",{class:"tip-box",style:t.normalizeStyle(n.tipBoxStyle)},[t.createElementVNode("div",u,[n.config.tips[n.currentIndex].title?(t.openBlock(),t.createElementBlock("div",{key:0,class:"title",style:t.normalizeStyle({textAlign:n.config.titleStyle&&n.config.titleStyle.textAlign?n.config.titleStyle.textAlign:"center",fontSize:n.config.titleStyle&&n.config.titleStyle.fontSize?n.config.titleStyle.fontSize:"19px"})},t.toDisplayString(n.config.tips[n.currentIndex].title),5)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"content",style:t.normalizeStyle({textAlign:n.config.contentStyle&&n.config.contentStyle.textAlign?n.config.contentStyle.textAlign:"center",fontSize:n.config.contentStyle&&n.config.contentStyle.fontSize?n.config.contentStyle.fontSize:"15px"})},t.toDisplayString(n.config.tips[n.currentIndex].content),5),t.createElementVNode("div",d,[0!==n.currentIndex?t.renderSlot(n.$slots,"prev",{key:0,index:n.currentIndex,tipItem:n.config.tips[n.currentIndex]},(function(){return[t.createElementVNode("div",{class:"item prev",onClick:e[0]||(e[0]=function(){return n.prev&&n.prev.apply(n,arguments)})},"上一步")]})):t.createCommentVNode("",!0),n.currentIndex!==n.config.tips.length-1?t.renderSlot(n.$slots,"next",{key:1,index:n.currentIndex,tipItem:n.config.tips[n.currentIndex]},(function(){return[t.createElementVNode("div",{class:"item next",onClick:e[1]||(e[1]=function(){return n.next&&n.next.apply(n,arguments)})},"下一步")]})):t.createCommentVNode("",!0),n.currentIndex===n.config.tips.length-1?t.renderSlot(n.$slots,"done",{key:2,index:n.currentIndex,tipItem:n.config.tips[n.currentIndex]},(function(){return[t.createElementVNode("div",{class:"item done",onClick:e[2]||(e[2]=function(){return n.done&&n.done.apply(n,arguments)})},"完成")]})):t.renderSlot(n.$slots,"skip",{key:3,index:n.currentIndex,tipItem:n.config.tips[n.currentIndex]},(function(){return[t.createElementVNode("div",{class:"item skip",onClick:e[3]||(e[3]=function(){return n.done&&n.done.apply(n,arguments)})},"跳过")]}))])])],4),t.createElementVNode("div",{class:"right",style:t.normalizeStyle({top:"".concat(n.originalBox.top,"px"),left:"".concat(n.originalBox.left+n.originalBox.width,"px"),width:"calc(100% - ".concat(n.originalBox.left+n.originalBox.width,"px)"),height:"".concat(n.originalBox.height,"px"),backgroundColor:"rgba(0, 0, 0, ".concat(n.config.backgroundOpacity?n.config.backgroundOpacity:.9,")")}),ref:"tip_box"},null,4)],4),t.createElementVNode("div",{class:"bottom",style:t.normalizeStyle({height:"calc(100% - ".concat(n.originalBox.top,"px - ").concat(n.originalBox.height,"px)"),backgroundColor:"rgba(0, 0, 0, ".concat(n.config.backgroundOpacity?n.config.backgroundOpacity:.9,")")})},null,4)])):t.createCommentVNode("",!0)]})),_:3})},a.__scopeId="data-v-5d3b253c";var f=function(){var t=a;return t.install=function(n){n.component("Vue3IntroStep",t)},t}(),p=Object.freeze({__proto__:null,default:f});return Object.entries(p).forEach((function(t){var n=r(t,2),e=n[0],o=n[1];"default"!==e&&(f[e]=o)})),f}(Vue);