vue-beginner-guide
Version:
A novice boot component based on vue
1 lines • 15.2 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var n in o)("object"==typeof exports?exports:t)[n]=o[n]}}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(n,i,function(e){return t[e]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="/dist/",o(o.s=6)}([function(t,e,o){var n=o(2);"string"==typeof n&&(n=[[t.i,n,""]]);var i={hmr:!0,transform:void 0,insertInto:void 0};o(4)(n,i);n.locals&&(t.exports=n.locals)},function(t,e,o){"use strict";o(0)},function(t,e,o){(t.exports=o(3)(!1)).push([t.i,".mark[data-v-447ace1a]{position:absolute;top:0;right:0;left:0;bottom:0;overflow:hidden;outline:0;-webkit-overflow-scrolling:touch;filter:alpha(opacity=60);z-index:999999}.content[data-v-447ace1a]{width:100%;height:100%;position:absolute}.content .mark-middle[data-v-447ace1a]{position:relative;white-space:nowrap}.content .mark-top[data-v-447ace1a]{width:100%}.content .mark-left[data-v-447ace1a]{display:inline-block;height:100%}.content .mark-center[data-v-447ace1a]{position:absolute;height:100%;top:0;border-radius:3px;box-shadow:0 0 2px 3px rgba(255,255,255,0);z-index:99999999}.content .mark-center .center-img[data-v-447ace1a]{width:100%;height:100%}.content .mark-right[data-v-447ace1a]{top:0;right:0;height:100%;position:absolute;z-index:-100}.content .mark-bottom[data-v-447ace1a]{width:100%;height:1000px}.content .piece[data-v-447ace1a]{background:rgba(0,0,0,0.6)}.tooltip-box[data-v-447ace1a]{position:relative}.tooltip-box .title[data-v-447ace1a]{font-size:16px;color:#fff;margin-bottom:5px;margin-top:0px;font-weight:bold}.tooltip-box .cont[data-v-447ace1a]{color:#ccc;font-size:14px;margin-bottom:20px}.tooltip-box .cont .nav[data-v-447ace1a]{margin:5px 0}.tooltip-box .box[data-v-447ace1a]{display:inline-block;vertical-align:top}.tooltip-box .box img[data-v-447ace1a]{width:70px}.tooltip-box .btn[data-v-447ace1a]{display:inline-block;line-height:32px;text-align:center;width:100px;height:32px;border:1px solid #fff;color:#fff;border-radius:4px;margin-right:10px;cursor:pointer}.tooltip-box .btn[data-v-447ace1a]:hover{background:rgba(255,255,255,0.1)}.tooltip-box .btn[data-v-447ace1a]:nth-of-type(3){margin-right:0}\n",""])},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o=function(t,e){var o=t[1]||"",n=t[3];if(!n)return o;if(e&&"function"==typeof btoa){var i=(s=n,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),r=n.sources.map((function(t){return"/*# sourceURL="+n.sourceRoot+t+" */"}));return[o].concat(r).concat([i]).join("\n")}var s;return[o].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+o+"}":o})).join("")},e.i=function(t,o){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(n[r]=!0)}for(i=0;i<t.length;i++){var s=t[i];"number"==typeof s[0]&&n[s[0]]||(o&&!s[2]?s[2]=o:o&&(s[2]="("+s[2]+") and ("+o+")"),e.push(s))}},e}},function(t,e,o){var n,i,r={},s=(n=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===i&&(i=n.apply(this,arguments)),i}),a=function(t,e){return e?e.querySelector(t):document.querySelector(t)},f=function(t){var e={};return function(t,o){if("function"==typeof t)return t();if(void 0===e[t]){var n=a.call(this,t,o);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),c=null,d=0,l=[],p=o(5);function u(t,e){for(var o=0;o<t.length;o++){var n=t[o],i=r[n.id];if(i){i.refs++;for(var s=0;s<i.parts.length;s++)i.parts[s](n.parts[s]);for(;s<n.parts.length;s++)i.parts.push(x(n.parts[s],e))}else{var a=[];for(s=0;s<n.parts.length;s++)a.push(x(n.parts[s],e));r[n.id]={id:n.id,refs:1,parts:a}}}}function h(t,e){for(var o=[],n={},i=0;i<t.length;i++){var r=t[i],s=e.base?r[0]+e.base:r[0],a={css:r[1],media:r[2],sourceMap:r[3]};n[s]?n[s].parts.push(a):o.push(n[s]={id:s,parts:[a]})}return o}function g(t,e){var o=f(t.insertInto);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var n=l[l.length-1];if("top"===t.insertAt)n?n.nextSibling?o.insertBefore(e,n.nextSibling):o.appendChild(e):o.insertBefore(e,o.firstChild),l.push(e);else if("bottom"===t.insertAt)o.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var i=f(t.insertAt.before,o);o.insertBefore(e,i)}}function m(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=l.indexOf(t);e>=0&&l.splice(e,1)}function v(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var n=function(){0;return o.nc}();n&&(t.attrs.nonce=n)}return b(e,t.attrs),g(t,e),e}function b(t,e){Object.keys(e).forEach((function(o){t.setAttribute(o,e[o])}))}function x(t,e){var o,n,i,r;if(e.transform&&t.css){if(!(r="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=r}if(e.singleton){var s=d++;o=c||(c=v(e)),n=w.bind(null,o,s,!1),i=w.bind(null,o,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(o=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",b(e,t.attrs),g(t,e),e}(e),n=T.bind(null,o,e),i=function(){m(o),o.href&&URL.revokeObjectURL(o.href)}):(o=v(e),n=_.bind(null,o),i=function(){m(o)});return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else i()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var o=h(t,e);return u(o,e),function(t){for(var n=[],i=0;i<o.length;i++){var s=o[i];(a=r[s.id]).refs--,n.push(a)}t&&u(h(t,e),e);for(i=0;i<n.length;i++){var a;if(0===(a=n[i]).refs){for(var f=0;f<a.parts.length;f++)a.parts[f]();delete r[a.id]}}}};var y,C=(y=[],function(t,e){return y[t]=e,y.filter(Boolean).join("\n")});function w(t,e,o,n){var i=o?"":n.css;if(t.styleSheet)t.styleSheet.cssText=C(e,i);else{var r=document.createTextNode(i),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function _(t,e){var o=e.css,n=e.media;if(n&&t.setAttribute("media",n),t.styleSheet)t.styleSheet.cssText=o;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(o))}}function T(t,e,o){var n=o.css,i=o.sourceMap,r=void 0===e.convertToAbsoluteUrls&&i;(e.convertToAbsoluteUrls||r)&&(n=p(n)),i&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");var s=new Blob([n],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var o=e.protocol+"//"+e.host,n=o+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(t,e){var i,r=e.trim().replace(/^"(.*)"$/,(function(t,e){return e})).replace(/^'(.*)'$/,(function(t,e){return e}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(r)?t:(i=0===r.indexOf("//")?r:0===r.indexOf("/")?o+r:n+r.replace(/^\.\//,""),"url("+JSON.stringify(i)+")")}))}},function(t,e,o){"use strict";o.r(e);var n=function(){var t=this,e=t.$createElement,o=t._self._c||e;return t.showFlag?o("div",{ref:"mark",staticClass:"mark",style:{height:t.bodyHeight+"px"}},[o("div",{ref:"markContent",staticClass:"content",attrs:{id:"js-mark-content-id"}},[o("div",{staticClass:"piece mark-top",style:{height:t.topPieceHeight+"px"}}),t._v(" "),o("div",{staticClass:"mark-middle",style:{height:t.middlePieceHeight+"px"}},[o("div",{staticClass:"piece mark-left",style:{width:t.leftPieceWidth+"px"}}),t._v(" "),o("div",{staticClass:"mark-center",style:{width:t.centerPieceWidth+"px",left:t.centerPieceLeft+"px"}},[t.fakeImgFile?o("img",{staticClass:"center-img",attrs:{src:t.fakeImgFile,alt:""}}):t._e()]),t._v(" "),o("div",{staticClass:"piece mark-right",style:{left:t.rightPieceLeft+"px"}})]),t._v(" "),o("div",{staticClass:"piece mark-bottom"})]),t._v(" "),o("div",{ref:"tooltipBox",staticClass:"tooltip-box",style:{top:t.tipContTop+"px",left:t.tipContLeft+"px"},attrs:{id:"js-tooltip-box-id"}},[o("div",{ref:"toolContBox",staticClass:"box"},[o("p",{staticClass:"title"},[t._v("\n "+t._s(t.config[t.guideIndex]&&t.config[t.guideIndex].title)+"\n ")]),t._v(" "),t.config[t.guideIndex]?o("div",{staticClass:"cont"},t._l(t.config[t.guideIndex].cont,(function(e,n){return o("p",{key:n,staticClass:"nav"},[t._v(t._s(e))])})),0):t._e(),t._v(" "),t.config[t.guideIndex]?o("div",{staticClass:"bottom-btn"},[t.config[t.guideIndex].btnText.pre?o("div",{staticClass:"btn",on:{click:function(e){return t.back(t.guideIndex)}}},[t._v(t._s(t.config[t.guideIndex].btnText.pre))]):t._e(),t._v(" "),t.config[t.guideIndex].btnText.next?o("div",{staticClass:"btn",on:{click:function(e){return t.next(t.guideIndex)}}},[t._v(t._s(t.config[t.guideIndex].btnText.next))]):t._e(),t._v(" "),t.config[t.guideIndex].btnText.close?o("div",{staticClass:"btn",on:{click:function(e){return t.closeGuide(t.guideIndex)}}},[t._v(t._s(t.config[t.guideIndex].btnText.close))]):t._e()]):t._e()])])]):t._e()};n._withStripped=!0;var i={name:"guide",props:{config:{type:Array,default:()=>[],require:!0},show:{type:Boolean,default:()=>!1,require:!0}},data:()=>({showFlag:!1,showElem:!1,guideIndex:0,bodyHeight:"",middlePieceHeight:"",topPieceHeight:"",leftPieceWidth:"",rightPieceLeft:"",centerPieceWidth:"",centerPieceLeft:"",tipContTop:"",tipContLeft:"",fakeImgFile:""}),watch:{show(t){if(t){this.showFlag=t,this.showElem=t;const e=document.getElementsByClassName("mark");if(e)for(let t=0;t<e.length;t++)"BODY"===e[t].parentNode.nodeName&&e[t].parentNode.removeChild(e[t]);t&&this.initGuideMark(this.guideIndex)}}},methods:{getOffsetByBody(t){const e=this.getDomToViewPosition(t),o=this.getScrollPosition();return{offsetLeft:o.x+e.domToViewLeft,offsetTop:o.y+e.domToViewTop}},getScrollPosition(){let t=0,e=0;return window.pageXOffset?(t=window.pageXOffset,e=window.pageYOffset):(t=(document.documentElement||document.body.parentNode||document.body).scrollLeft,e=(document.documentElement||document.body.parentNode||document.body).scrollTop),{x:t,y:e}},getDomToViewPosition(t){let e=t.getBoundingClientRect();return{domToViewLeft:e.left,domToViewTop:e.top}},dealFakeImg(t){this.config[t]&&this.config[t].fakeImg?this.fakeImgFile=this.config[t].fakeImg:this.fakeImgFile=""},initGuideMark(t){return new Promise((e,o)=>{try{setTimeout(()=>{this.dealFakeImg(t),this.bodyHeight=parseFloat(getComputedStyle(document.getElementsByTagName("body")[0]).height);const o=parseFloat(getComputedStyle(document.getElementsByTagName("body")[0]).width),n=this.$refs.toolContBox,i=parseFloat(getComputedStyle(n).width),r=parseFloat(getComputedStyle(n).height),s="string"==typeof this.config[t].dom?document.getElementById(this.config[t].dom):this.config[t].dom;if(document.getElementsByTagName("body")[0].appendChild(this.$refs.mark),s){const e=this.getOffsetByBody(s),n=this.config[t].width||parseFloat(getComputedStyle(s).width),a=this.config[t].height||parseFloat(getComputedStyle(s).height);this.middlePieceHeight=a+6,this.topPieceHeight=e.offsetTop-3,this.centerPieceWidth=n+6,this.leftPieceWidth=e.offsetLeft-3,this.rightPieceLeft=e.offsetLeft+3+n,this.centerPieceLeft=e.offsetLeft-3;const f=o-n-e.offsetLeft>i+50,c=e.offsetLeft>i+50,d=this.bodyHeight-e.offsetTop-a>r+50,l=e.offsetTop>r-30;f?this.bodyHeight-e.offsetTop>r+50?(this.tipContLeft=e.offsetLeft+n+50,this.tipContTop=e.offsetTop):(this.tipContTop=e.offsetTop-r+a,this.tipContLeft=e.offsetLeft+n+50):c?this.bodyHeight-e.offsetTop>r+50?(this.tipContLeft=e.offsetLeft-i-50,this.tipContTop=e.offsetTop):(this.tipContTop=e.offsetTop-r+30,this.tipContLeft=e.offsetLeft-i-50):d?(this.tipContTop=a+e.offsetTop+30,this.tipContLeft=n+e.offsetLeft-i):l&&(this.tipContTop=e.offsetTop-r-30,this.tipContLeft=n+e.offsetLeft-i)}this.showElem=!0,e()})}catch(t){o()}})},closeGuide(t){this.showFlag=!1,this.$emit("close",{index:t,curConfig:this.config[t]})},next(t){this.$emit("before-next",{preIndex:t,nextIndex:t+1,preConfig:this.config[t],nextConfig:this.config[t+1]}),this.showElem=!1,this.guideIndex++,this.initGuideMark(t+1).then(()=>{this.$emit("after-next",{preIndex:t,nextIndex:t+1,preConfig:this.config[t],nextConfig:this.config[t+1]})})},back(t){this.$emit("before-back",{preIndex:t,nextIndex:t-1,preConfig:this.config[t],nextConfig:this.config[t-1]}),this.showElem=!1,this.guideIndex--,this.initGuideMark(t-1).then(()=>{this.$emit("after-back",{preIndex:t,nextIndex:t-1,preConfig:this.config[t],nextConfig:this.config[t-1]})})}}};o(1);var r=function(t,e,o,n,i,r,s,a){var f,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=o,c._compiled=!0),n&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(f=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=f):i&&(f=a?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),f)if(c.functional){c._injectStyles=f;var d=c.render;c.render=function(t,e){return f.call(e),d(t,e)}}else{var l=c.beforeCreate;c.beforeCreate=l?[].concat(l,f):[f]}return{exports:t,options:c}}(i,n,[],!1,null,"447ace1a",null);r.options.__file="src/guide.vue";var s=r.exports;console.log(s,"guideguide");e.default=s}])}));