├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── docs ├── build.js ├── build.js.map └── index.html ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── common │ └── directives │ │ └── show-menu-scroll-up.js ├── components │ └── Header.vue └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue scrollup menu 2 | 3 | > Directive using vue js to show the menu when the user scrolls up and hide when scrolling down using pure javascript 4 | 5 | ## Example 6 | 7 | ![ezgif com-crop](https://user-images.githubusercontent.com/23389358/51559769-f6a63d80-1e69-11e9-8769-c2960bfc9f2b.gif) 8 | 9 | ### Online demo 10 | 11 | https://wemboava.github.io/vue-scrollup-menu 12 | 13 | ## Getting Started 14 | 15 | ### install 16 | ``` npm i vue-scrollup-menu ``` 17 | 18 | ### Use 19 | 20 | ```vue 21 | 24 | ``` 25 | 26 | ### Import directive 27 | 28 | ```vue 29 | 40 | ``` 41 | 42 | ##### Or use directive globally 43 | 44 | ```javascript 45 | import Vue from 'vue' 46 | import vueScrollupMenu from 'vue-scrollup-menu' 47 | 48 | Vue.directive('vue-scrollup-menu', vueScrollupMenu) 49 | ``` 50 | 51 | -------------------------------------------------------------------------------- /docs/build.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=6)}([function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){function n(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var o=r(i);return[n].concat(i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"})).concat([o]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},i=0;in.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],i=0;i=0&&Math.floor(t)===t&&isFinite(e)}function p(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function d(e){var t=parseFloat(e);return isNaN(t)?e:t}function v(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}function m(e,t){return lo.call(e,t)}function g(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}function y(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function _(e,t){return e.bind(t)}function b(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function $(e,t){for(var n in t)e[n]=t[n];return e}function w(e){for(var t={},n=0;n-1)if(o&&!m(i,"default"))a=!1;else if(""===a||a===mo(e)){var c=ne(String,i.type);(c<0||s0&&(a=_e(a,(t||"")+"_"+n),ye(a[0])&&ye(u)&&(l[c]=N(u.text+a[0].text),a.shift()),l.push.apply(l,a)):s(a)?ye(u)?l[c]=N(u.text+a):""!==a&&l.push(N(a)):ye(a)&&ye(u)?l[c]=N(u.text+a.text):(o(e._isVList)&&i(a.tag)&&r(a.key)&&i(t)&&(a.key="__vlist"+t+"_"+n+"__"),l.push(a)));return l}function be(e,t){return(e.__esModule||Uo&&"Module"===e[Symbol.toStringTag])&&(e=e.default),c(e)?t.extend(e):e}function $e(e,t,n,r,i){var o=Wo();return o.asyncFactory=e,o.asyncMeta={data:t,context:n,children:r,tag:i},o}function we(e,t,n){if(o(e.error)&&i(e.errorComp))return e.errorComp;if(i(e.resolved))return e.resolved;if(o(e.loading)&&i(e.loadingComp))return e.loadingComp;if(!i(e.contexts)){var a=e.contexts=[n],s=!0,u=function(){for(var e=0,t=a.length;e_a&&va[n].id>e.id;)n--;va.splice(n+1,0,e)}else va.push(e);ga||(ga=!0,ce(He))}}function Ke(e,t,n){wa.get=function(){return this[t][n]},wa.set=function(e){this[t][n]=e},Object.defineProperty(e,n,wa)}function Je(e){e._watchers=[];var t=e.$options;t.props&&qe(e,t.props),t.methods&&Qe(e,t.methods),t.data?We(e):R(e._data={},!0),t.computed&&Xe(e,t.computed),t.watch&&t.watch!==Lo&&et(e,t.watch)}function qe(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[];!e.$parent||M(!1);for(var o in t)!function(o){i.push(o);var a=Y(o,t,n,e);F(r,o,a),o in e||Ke(e,"_props",o)}(o);M(!0)}function We(e){var t=e.$options.data;t=e._data="function"==typeof t?Ge(t,e):t||{},u(t)||(t={});for(var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);i--;){var o=n[i];r&&m(r,o)||O(o)||Ke(e,"_data",o)}R(t,!0)}function Ge(e,t){j();try{return e.call(t,t)}catch(e){return re(e,t,"data()"),{}}finally{I()}}function Xe(e,t){var n=e._computedWatchers=Object.create(null),r=Fo();for(var i in t){var o=t[i],a="function"==typeof o?o:o.get;r||(n[i]=new $a(e,a||x,x,xa)),i in e||Ze(e,i,o)}}function Ze(e,t,n){var r=!Fo();"function"==typeof n?(wa.get=r?Ye(t):n,wa.set=x):(wa.get=n.get?r&&!1!==n.cache?Ye(t):n.get:x,wa.set=n.set?n.set:x),Object.defineProperty(e,t,wa)}function Ye(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),Vo.target&&t.depend(),t.value}}function Qe(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?x:go(t[n],e)}function et(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i=0||n.indexOf(e[i])<0)&&r.push(e[i]);return r}return e}function Lt(e){this._init(e)}function Mt(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=b(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}function Pt(e){e.mixin=function(e){return this.options=X(this.options,e),this}}function Dt(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var o=e.name||n.options.name,a=function(e){this._init(e)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=t++,a.options=X(n.options,e),a.super=n,a.options.props&&Rt(a),a.options.computed&&Ft(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,$o.forEach(function(e){a[e]=n[e]}),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=$({},a.options),i[r]=a,a}}function Rt(e){var t=e.options.props;for(var n in t)Ke(e.prototype,"_props",n)}function Ft(e){var t=e.options.computed;for(var n in t)Ze(e.prototype,n,t[n])}function Ht(e){$o.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&u(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}function Ut(e){return e&&(e.Ctor.options.name||e.tag)}function Bt(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!l(e)&&e.test(t)}function zt(e,t){var n=e.cache,r=e.keys,i=e._vnode;for(var o in n){var a=n[o];if(a){var s=Ut(a.componentOptions);s&&!t(s)&&Vt(n,o,r,i)}}}function Vt(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,h(n,t)}function Kt(e){for(var t=e.data,n=e,r=e;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=Jt(r.data,t));for(;i(n=n.parent);)n&&n.data&&(t=Jt(t,n.data));return qt(t.staticClass,t.class)}function Jt(e,t){return{staticClass:Wt(e.staticClass,t.staticClass),class:i(e.class)?[e.class,t.class]:t.class}}function qt(e,t){return i(e)||i(t)?Wt(e,Gt(t)):""}function Wt(e,t){return e?t?e+" "+t:e:t||""}function Gt(e){return Array.isArray(e)?Xt(e):c(e)?Zt(e):"string"==typeof e?e:""}function Xt(e){for(var t,n="",r=0,o=e.length;r-1?ts[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:ts[e]=/HTMLUnknownElement/.test(t.toString())}function en(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}function tn(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function nn(e,t){return document.createElementNS(Xa[e],t)}function rn(e){return document.createTextNode(e)}function on(e){return document.createComment(e)}function an(e,t,n){e.insertBefore(t,n)}function sn(e,t){e.removeChild(t)}function cn(e,t){e.appendChild(t)}function un(e){return e.parentNode}function ln(e){return e.nextSibling}function fn(e){return e.tagName}function pn(e,t){e.textContent=t}function dn(e,t){e.setAttribute(t,"")}function vn(e,t){var n=e.data.ref;if(i(n)){var r=e.context,o=e.componentInstance||e.elm,a=r.$refs;t?Array.isArray(a[n])?h(a[n],o):a[n]===o&&(a[n]=void 0):e.data.refInFor?Array.isArray(a[n])?a[n].indexOf(o)<0&&a[n].push(o):a[n]=[o]:a[n]=o}}function hn(e,t){return e.key===t.key&&(e.tag===t.tag&&e.isComment===t.isComment&&i(e.data)===i(t.data)&&mn(e,t)||o(e.isAsyncPlaceholder)&&e.asyncFactory===t.asyncFactory&&r(t.asyncFactory.error))}function mn(e,t){if("input"!==e.tag)return!0;var n,r=i(n=e.data)&&i(n=n.attrs)&&n.type,o=i(n=t.data)&&i(n=n.attrs)&&n.type;return r===o||ns(r)&&ns(o)}function gn(e,t,n){var r,o,a={};for(r=t;r<=n;++r)o=e[r].key,i(o)&&(a[o]=r);return a}function yn(e,t){(e.data.directives||t.data.directives)&&_n(e,t)}function _n(e,t){var n,r,i,o=e===os,a=t===os,s=bn(e.data.directives,e.context),c=bn(t.data.directives,t.context),u=[],l=[];for(n in c)r=s[n],i=c[n],r?(i.oldValue=r.value,wn(i,"update",t,e),i.def&&i.def.componentUpdated&&l.push(i)):(wn(i,"bind",t,e),i.def&&i.def.inserted&&u.push(i));if(u.length){var f=function(){for(var n=0;n-1?kn(e,t,n):Ka(t)?Ga(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):Va(t)?e.setAttribute(t,Ga(n)||"false"===n?"false":"true"):qa(t)?Ga(n)?e.removeAttributeNS(Ja,Wa(t)):e.setAttributeNS(Ja,t,n):kn(e,t,n)}function kn(e,t,n){if(Ga(n))e.removeAttribute(t);else{if(Eo&&!jo&&"TEXTAREA"===e.tagName&&"placeholder"===t&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}function An(e,t){var n=t.elm,o=t.data,a=e.data;if(!(r(o.staticClass)&&r(o.class)&&(r(a)||r(a.staticClass)&&r(a.class)))){var s=Kt(t),c=n._transitionClasses;i(c)&&(s=Wt(s,Gt(c))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}function On(e){function t(){(a||(a=[])).push(e.slice(v,i).trim()),v=i+1}var n,r,i,o,a,s=!1,c=!1,u=!1,l=!1,f=0,p=0,d=0,v=0;for(i=0;i=0&&" "===(m=e.charAt(h));h--);m&&ps.test(m)||(l=!0)}}else void 0===o?(v=i+1,o=e.slice(0,i).trim()):t();if(void 0===o?o=e.slice(0,i).trim():0!==v&&t(),a)for(i=0;i-1?{exp:e.slice(0,Ma),key:'"'+e.slice(Ma+1)+'"'}:{exp:e,key:null};for(Na=e,Ma=Pa=Da=0;!Bn();)La=Un(),zn(La)?Kn(La):91===La&&Vn(La);return{exp:e.slice(0,Pa),key:e.slice(Pa+1,Da)}}function Un(){return Na.charCodeAt(++Ma)}function Bn(){return Ma>=Ia}function zn(e){return 34===e||39===e}function Vn(e){var t=1;for(Pa=Ma;!Bn();)if(e=Un(),zn(e))Kn(e);else if(91===e&&t++,93===e&&t--,0===t){Da=Ma;break}}function Kn(e){for(var t=e;!Bn()&&(e=Un())!==t;);}function Jn(e,t,n){Ra=n;var r=t.value,i=t.modifiers,o=e.tag,a=e.attrsMap.type;if(e.component)return Rn(e,r,i),!1;if("select"===o)Gn(e,r,i);else if("input"===o&&"checkbox"===a)qn(e,r,i);else if("input"===o&&"radio"===a)Wn(e,r,i);else if("input"===o||"textarea"===o)Xn(e,r,i);else if(!xo.isReservedTag(o))return Rn(e,r,i),!1;return!0}function qn(e,t,n){var r=n&&n.number,i=Pn(e,"value")||"null",o=Pn(e,"true-value")||"true",a=Pn(e,"false-value")||"false";jn(e,"checked","Array.isArray("+t+")?_i("+t+","+i+")>-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),Mn(e,"change","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Fn(t,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Fn(t,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Fn(t,"$$c")+"}",null,!0)}function Wn(e,t,n){var r=n&&n.number,i=Pn(e,"value")||"null";i=r?"_n("+i+")":i,jn(e,"checked","_q("+t+","+i+")"),Mn(e,"change",Fn(t,i),null,!0)}function Gn(e,t,n){var r=n&&n.number,i='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})",o="var $$selectedVal = "+i+";";o=o+" "+Fn(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),Mn(e,"change",o,null,!0)}function Xn(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?ds:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Fn(t,l);c&&(f="if($event.target.composing)return;"+f),jn(e,"value","("+t+")"),Mn(e,u,f,null,!0),(s||a)&&Mn(e,"blur","$forceUpdate()")}function Zn(e){if(i(e[ds])){var t=Eo?"change":"input";e[t]=[].concat(e[ds],e[t]||[]),delete e[ds]}i(e[vs])&&(e.change=[].concat(e[vs],e.change||[]),delete e[vs])}function Yn(e,t,n){var r=Fa;return function i(){null!==e.apply(null,arguments)&&er(t,i,n,r)}}function Qn(e,t,n,r,i){t=se(t),n&&(t=Yn(t,e,r)),Fa.addEventListener(e,t,Mo?{capture:r,passive:i}:r)}function er(e,t,n,r){(r||Fa).removeEventListener(e,t._withTask||t,n)}function tr(e,t){if(!r(e.data.on)||!r(t.data.on)){var n=t.data.on||{},i=e.data.on||{};Fa=t.elm,Zn(n),pe(n,i,Qn,er,t.context),Fa=void 0}}function nr(e,t){if(!r(e.data.domProps)||!r(t.data.domProps)){var n,o,a=t.elm,s=e.data.domProps||{},c=t.data.domProps||{};i(c.__ob__)&&(c=t.data.domProps=$({},c));for(n in s)r(c[n])&&(a[n]="");for(n in c){if(o=c[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),o===s[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===n){a._value=o;var u=r(o)?"":String(o);rr(a,u)&&(a.value=u)}else a[n]=o}}}function rr(e,t){return!e.composing&&("OPTION"===e.tagName||ir(e,t)||or(e,t))}function ir(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}function or(e,t){var n=e.value,r=e._vModifiers;if(i(r)){if(r.lazy)return!1;if(r.number)return d(n)!==d(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}function ar(e){var t=sr(e.style);return e.staticStyle?$(e.staticStyle,t):t}function sr(e){return Array.isArray(e)?w(e):"string"==typeof e?gs(e):e}function cr(e,t){var n,r={};if(t)for(var i=e;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=ar(i.data))&&$(r,n);(n=ar(e.data))&&$(r,n);for(var o=e;o=o.parent;)o.data&&(n=ar(o.data))&&$(r,n);return r}function ur(e,t){var n=t.data,o=e.data;if(!(r(n.staticStyle)&&r(n.style)&&r(o.staticStyle)&&r(o.style))){var a,s,c=t.elm,u=o.staticStyle,l=o.normalizedStyle||o.style||{},f=u||l,p=sr(t.data.style)||{};t.data.normalizedStyle=i(p.__ob__)?$({},p):p;var d=cr(t,!0);for(s in f)r(d[s])&&bs(c,s,"");for(s in d)(a=d[s])!==f[s]&&bs(c,s,null==a?"":a)}}function lr(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function fr(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");n=n.trim(),n?e.setAttribute("class",n):e.removeAttribute("class")}}function pr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&$(t,Cs(e.name||"v")),$(t,e),t}return"string"==typeof e?Cs(e):void 0}}function dr(e){Is(function(){Is(e)})}function vr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),lr(e,t))}function hr(e,t){e._transitionClasses&&h(e._transitionClasses,t),fr(e,t)}function mr(e,t,n){var r=gr(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===As?Ss:js,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=As,l=a,f=o.length):t===Os?u>0&&(n=Os,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?As:Os:null,f=n?n===As?o.length:c.length:0),{type:n,timeout:l,propCount:f,hasTransform:n===As&&Ns.test(r[Ts+"Property"])}}function yr(e,t){for(;e.length1}function Cr(e,t){!0!==t.data.show&&br(t)}function kr(e,t,n){Ar(e,t,n),(Eo||Io)&&setTimeout(function(){Ar(e,t,n)},0)}function Ar(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=e.options.length;s-1,a.selected!==o&&(a.selected=o);else if(C(Tr(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function Or(e,t){return t.every(function(t){return!C(t,e)})}function Tr(e){return"_value"in e?e._value:e.value}function Sr(e){e.target.composing=!0}function Er(e){e.target.composing&&(e.target.composing=!1,jr(e.target,"input"))}function jr(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function Ir(e){return!e.componentInstance||e.data&&e.data.transition?e:Ir(e.componentInstance._vnode)}function Nr(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?Nr(Ce(t.children)):e}function Lr(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var o in i)t[po(o)]=i[o];return t}function Mr(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}function Pr(e){for(;e=e.parent;)if(e.data.transition)return!0}function Dr(e,t){return t.key===e.key&&t.tag===e.tag}function Rr(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Fr(e){e.data.newPos=e.elm.getBoundingClientRect()}function Hr(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var o=e.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}function Ur(e,t){var n=t?Gs(t):qs;if(n.test(e)){for(var r,i,o,a=[],s=[],c=n.lastIndex=0;r=n.exec(e);){i=r.index,i>c&&(s.push(o=e.slice(c,i)),a.push(JSON.stringify(o)));var u=On(r[1].trim());a.push("_s("+u+")"),s.push({"@binding":u}),c=i+r[0].length}return c=0&&a[i].lowerCasedTag!==s;i--);else i=0;if(i>=0){for(var c=a.length-1;c>=i;c--)t.end&&t.end(a[c].tag,n,r);a.length=i,o=i&&a[i-1].tag}else"br"===s?t.start&&t.start(e,[],!0,n,r):"p"===s&&(t.start&&t.start(e,[],!1,n,r),t.end&&t.end(e,n,r))}for(var i,o,a=[],s=t.expectHTML,c=t.isUnaryTag||yo,u=t.canBeLeftOpenTag||yo,l=0;e;){if(i=e,o&&xc(o)){var f=0,p=o.toLowerCase(),d=Cc[p]||(Cc[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),v=e.replace(d,function(e,n,r){return f=r.length,xc(p)||"noscript"===p||(n=n.replace(//g,"$1").replace(//g,"$1")),Sc(p,n)&&(n=n.slice(1)),t.chars&&t.chars(n),""});l+=e.length-v.length,e=v,r(p,l-f,l)}else{var h=e.indexOf("<");if(0===h){if(uc.test(e)){var m=e.indexOf("--\x3e");if(m>=0){t.shouldKeepComment&&t.comment(e.substring(4,m)),n(m+3);continue}}if(lc.test(e)){var g=e.indexOf("]>");if(g>=0){n(g+2);continue}}var y=e.match(cc);if(y){n(y[0].length);continue}var _=e.match(sc);if(_){var b=l;n(_[0].length),r(_[1],b,l);continue}var $=function(){var t=e.match(oc);if(t){var r={tagName:t[1],attrs:[],start:l};n(t[0].length);for(var i,o;!(i=e.match(ac))&&(o=e.match(nc));)n(o[0].length),r.attrs.push(o);if(i)return r.unarySlash=i[1],n(i[0].length),r.end=l,r}}();if($){!function(e){var n=e.tagName,i=e.unarySlash;s&&("p"===o&&tc(n)&&r(o),u(n)&&o===n&&r(n));for(var l=c(n)||!!i,f=e.attrs.length,p=new Array(f),d=0;d=0){for(x=e.slice(h);!(sc.test(x)||oc.test(x)||uc.test(x)||lc.test(x)||(C=x.indexOf("<",1))<0);)h+=C,x=e.slice(h);w=e.substring(0,h),n(h)}h<0&&(w=e,e=""),t.chars&&w&&t.chars(w)}if(e===i){t.chars&&t.chars(e);break}}r()}function Wr(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:di(t),parent:n,children:[]}}function Gr(e,t){function n(e){e.pre&&(s=!1),gc(e.tag)&&(c=!1);for(var n=0;n':'
',wc.innerHTML.indexOf(" ")>0}function oo(e){if(e.outerHTML)return e.outerHTML;var t=document.createElement("div");return t.appendChild(e.cloneNode(!0)),t.innerHTML}/*! 2 | * Vue.js v2.5.17 3 | * (c) 2014-2018 Evan You 4 | * Released under the MIT License. 5 | */ 6 | var ao=Object.freeze({}),so=Object.prototype.toString,co=v("slot,component",!0),uo=v("key,ref,slot,slot-scope,is"),lo=Object.prototype.hasOwnProperty,fo=/-(\w)/g,po=g(function(e){return e.replace(fo,function(e,t){return t?t.toUpperCase():""})}),vo=g(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),ho=/\B([A-Z])/g,mo=g(function(e){return e.replace(ho,"-$1").toLowerCase()}),go=Function.prototype.bind?_:y,yo=function(e,t,n){return!1},_o=function(e){return e},bo="data-server-rendered",$o=["component","directive","filter"],wo=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured"],xo={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:yo,isReservedAttr:yo,isUnknownElement:yo,getTagNamespace:x,parsePlatformTagName:_o,mustUseProp:yo,_lifecycleHooks:wo},Co=/[^\w.$]/,ko="__proto__"in{},Ao="undefined"!=typeof window,Oo="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,To=Oo&&WXEnvironment.platform.toLowerCase(),So=Ao&&window.navigator.userAgent.toLowerCase(),Eo=So&&/msie|trident/.test(So),jo=So&&So.indexOf("msie 9.0")>0,Io=So&&So.indexOf("edge/")>0,No=(So&&So.indexOf("android"),So&&/iphone|ipad|ipod|ios/.test(So)||"ios"===To),Lo=(So&&/chrome\/\d+/.test(So),{}.watch),Mo=!1;if(Ao)try{var Po={};Object.defineProperty(Po,"passive",{get:function(){Mo=!0}}),window.addEventListener("test-passive",null,Po)}catch(e){}var Do,Ro,Fo=function(){return void 0===Do&&(Do=!Ao&&!Oo&&void 0!==e&&"server"===e.process.env.VUE_ENV),Do},Ho=Ao&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,Uo="undefined"!=typeof Symbol&&E(Symbol)&&"undefined"!=typeof Reflect&&E(Reflect.ownKeys);Ro="undefined"!=typeof Set&&E(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var Bo=x,zo=0,Vo=function(){this.id=zo++,this.subs=[]};Vo.prototype.addSub=function(e){this.subs.push(e)},Vo.prototype.removeSub=function(e){h(this.subs,e)},Vo.prototype.depend=function(){Vo.target&&Vo.target.addDep(this)},Vo.prototype.notify=function(){for(var e=this.subs.slice(),t=0,n=e.length;t1?b(n):n;for(var r=b(arguments,1),i=0,o=n.length;iparseInt(this.max)&&Vt(c,u[0],u,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}},ja={KeepAlive:Ea};!function(e){var t={};t.get=function(){return xo},Object.defineProperty(e,"config",t),e.util={warn:Bo,extend:$,mergeOptions:X,defineReactive:F},e.set=H,e.delete=U,e.nextTick=ce,e.options=Object.create(null),$o.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,$(e.options.components,ja),Mt(e),Pt(e),Dt(e),Ht(e)}(Lt),Object.defineProperty(Lt.prototype,"$isServer",{get:Fo}),Object.defineProperty(Lt.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Lt,"FunctionalRenderContext",{value:gt}),Lt.version="2.5.17";var Ia,Na,La,Ma,Pa,Da,Ra,Fa,Ha,Ua=v("style,class"),Ba=v("input,textarea,option,select,progress"),za=function(e,t,n){return"value"===n&&Ba(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Va=v("contenteditable,draggable,spellcheck"),Ka=v("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Ja="http://www.w3.org/1999/xlink",qa=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},Wa=function(e){return qa(e)?e.slice(6,e.length):""},Ga=function(e){return null==e||!1===e},Xa={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},Za=v("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),Ya=v("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),Qa=function(e){return"pre"===e},es=function(e){return Za(e)||Ya(e)},ts=Object.create(null),ns=v("text,number,password,search,email,tel,url"),rs=Object.freeze({createElement:tn,createElementNS:nn,createTextNode:rn,createComment:on,insertBefore:an,removeChild:sn,appendChild:cn,parentNode:un,nextSibling:ln,tagName:fn,setTextContent:pn,setStyleScope:dn}),is={create:function(e,t){vn(t)},update:function(e,t){e.data.ref!==t.data.ref&&(vn(e,!0),vn(t))},destroy:function(e){vn(e,!0)}},os=new Jo("",{},[]),as=["create","activate","update","remove","destroy"],ss={create:yn,update:yn,destroy:function(e){yn(e,os)}},cs=Object.create(null),us=[is,ss],ls={create:xn,update:xn},fs={create:An,update:An},ps=/[\w).+\-_$\]]/,ds="__r",vs="__c",hs={create:tr,update:tr},ms={create:nr,update:nr},gs=g(function(e){var t={},n=/;(?![^(]*\))/g,r=/:(.+)/;return e.split(n).forEach(function(e){if(e){var n=e.split(r);n.length>1&&(t[n[0].trim()]=n[1].trim())}}),t}),ys=/^--/,_s=/\s*!important$/,bs=function(e,t,n){if(ys.test(t))e.style.setProperty(t,n);else if(_s.test(n))e.style.setProperty(t,n.replace(_s,""),"important");else{var r=ws(t);if(Array.isArray(n))for(var i=0,o=n.length;iv?(f=r(n[g+1])?null:n[g+1].elm,y(e,f,n,d,g,o)):d>g&&b(e,t,p,v)}function x(e,t,n,r){for(var o=n;o\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,rc="[a-zA-Z_][\\w\\-\\.]*",ic="((?:"+rc+"\\:)?"+rc+")",oc=new RegExp("^<"+ic),ac=/^\s*(\/?)>/,sc=new RegExp("^<\\/"+ic+"[^>]*>"),cc=/^]+>/i,uc=/^",""":'"',"&":"&"," ":"\n"," ":"\t"},Ac=/&(?:lt|gt|quot|amp);/g,Oc=/&(?:lt|gt|quot|amp|#10|#9);/g,Tc=v("pre,textarea",!0),Sc=function(e,t){return e&&Tc(e)&&"\n"===t[0]},Ec=/^@|^v-on:/,jc=/^v-|^@|^:/,Ic=/([^]*?)\s+(?:in|of)\s+([^]*)/,Nc=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Lc=/^\(|\)$/g,Mc=/:(.*)$/,Pc=/^:|^v-bind:/,Dc=/\.[^.]+/g,Rc=g(Ys.decode),Fc=/^xmlns:NS\d+/,Hc=/^NS\d+:/,Uc={preTransformNode:gi},Bc=[Xs,Zs,Uc],zc={model:Jn,text:_i,html:bi},Vc={expectHTML:!0,modules:Bc,directives:zc,isPreTag:Qa,isUnaryTag:Qs,mustUseProp:za,canBeLeftOpenTag:ec,isReservedTag:es,getTagNamespace:Yt,staticKeys:function(e){return e.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(",")}(Bc)},Kc=g(wi),Jc=/^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/,qc=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,Wc={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},Gc={esc:"Escape",tab:"Tab",enter:"Enter",space:" ",up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete"]},Xc=function(e){return"if("+e+")return null;"},Zc={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:Xc("$event.target !== $event.currentTarget"),ctrl:Xc("!$event.ctrlKey"),shift:Xc("!$event.shiftKey"),alt:Xc("!$event.altKey"),meta:Xc("!$event.metaKey"),left:Xc("'button' in $event && $event.button !== 0"),middle:Xc("'button' in $event && $event.button !== 1"),right:Xc("'button' in $event && $event.button !== 2")},Yc={on:ji,bind:Ii,cloak:x},Qc=function(e){this.options=e,this.warn=e.warn||Sn,this.transforms=En(e.modules,"transformCode"),this.dataGenFns=En(e.modules,"genData"),this.directives=$($({},Yc),e.directives);var t=e.isReservedTag||yo;this.maybeComponent=function(e){return!t(e.tag)},this.onceId=0,this.staticRenderFns=[]},eu=(new RegExp("\\b"+"do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,super,throw,while,yield,delete,export,import,return,switch,default,extends,finally,continue,debugger,function,arguments".split(",").join("\\b|\\b")+"\\b"),new RegExp("\\b"+"delete,typeof,void".split(",").join("\\s*\\([^\\)]*\\)|\\b")+"\\s*\\([^\\)]*\\)"),function(e){return function(t){function n(n,r){var i=Object.create(t),o=[],a=[];if(i.warn=function(e,t){(t?a:o).push(e)},r){r.modules&&(i.modules=(t.modules||[]).concat(r.modules)),r.directives&&(i.directives=$(Object.create(t.directives||null),r.directives));for(var s in r)"modules"!==s&&"directives"!==s&&(i[s]=r[s])}var c=e(n,i);return c.errors=o,c.tips=a,c}return{compile:n,compileToFunctions:ro(n)}}}(function(e,t){var n=Gr(e.trim(),t);!1!==t.optimize&&$i(n,t);var r=Ni(n,t);return{ast:n,render:r.render,staticRenderFns:r.staticRenderFns}})),tu=eu(Vc),nu=tu.compileToFunctions,ru=!!Ao&&io(!1),iu=!!Ao&&io(!0),ou=g(function(e){var t=en(e);return t&&t.innerHTML}),au=Lt.prototype.$mount;Lt.prototype.$mount=function(e,t){if((e=e&&en(e))===document.body||e===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=ou(r));else{if(!r.nodeType)return this;r=r.innerHTML}else e&&(r=oo(e));if(r){var i=nu(r,{shouldDecodeNewlines:ru,shouldDecodeNewlinesForHref:iu,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return au.call(this,e,t)},Lt.compile=nu,t.a=Lt}).call(t,n(0),n(8).setImmediate)},function(e,t,n){(function(e){function r(e,t){this._id=e,this._clearFn=t}var i=void 0!==e&&e||"undefined"!=typeof self&&self||window,o=Function.prototype.apply;t.setTimeout=function(){return new r(o.call(setTimeout,i,arguments),clearTimeout)},t.setInterval=function(){return new r(o.call(setInterval,i,arguments),clearInterval)},t.clearTimeout=t.clearInterval=function(e){e&&e.close()},r.prototype.unref=r.prototype.ref=function(){},r.prototype.close=function(){this._clearFn.call(i,this._id)},t.enroll=function(e,t){clearTimeout(e._idleTimeoutId),e._idleTimeout=t},t.unenroll=function(e){clearTimeout(e._idleTimeoutId),e._idleTimeout=-1},t._unrefActive=t.active=function(e){clearTimeout(e._idleTimeoutId);var t=e._idleTimeout;t>=0&&(e._idleTimeoutId=setTimeout(function(){e._onTimeout&&e._onTimeout()},t))},n(9),t.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==e&&e.setImmediate||this&&this.setImmediate,t.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==e&&e.clearImmediate||this&&this.clearImmediate}).call(t,n(0))},function(e,t,n){(function(e,t){!function(e,n){"use strict";function r(e){"function"!=typeof e&&(e=new Function(""+e));for(var t=new Array(arguments.length-1),n=0;n1)for(var n=1;nr&&t>e.offsetHeight?e.style.top=-1*e.offsetHeight+"px":e.style.top="0px",r=t)};t.a={bind:function(e){var t=!0;document.addEventListener("scroll",function(){t=!0}),setInterval(function(){!0===t&&(i(e),t=!1)},250)}}},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{directives:[{name:"reveal-on-scroll-up",rawName:"v-reveal-on-scroll-up"}],staticClass:"header"})},i=[],o={render:r,staticRenderFns:i};t.a=o},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("Header"),e._v(" "),e._m(0),e._v(" "),e._m(1)],1)},i=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"container"},[n("a",{staticClass:"container__btn",attrs:{href:"https://github.com/wemboava/show-menu-when-scrolling-up"}},[e._v("★ GitHub")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("footer",{staticClass:"footer"},[e._v("Made by "),n("a",{staticClass:"footer__link",attrs:{href:"https://github.com/wemboava/"}},[e._v("Willian Emboava")])])}],o={render:r,staticRenderFns:i};t.a=o}]); 7 | //# sourceMappingURL=build.js.map -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | show menu when scrolling up 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | show menu when scrolling up 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "show-menu-when-scrolling-up", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "willian emboava", 6 | "wst": "/dist/", 7 | "homepage": "https://github.com/wemboava/show-menu-when-scrolling-up", 8 | "license": "MIT", 9 | "private": true, 10 | "scripts": { 11 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 12 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", 13 | "deploy": "node ./node_modules/vue-gh-pages/index.js" 14 | }, 15 | "dependencies": { 16 | "vue": "^2.5.11", 17 | "vue-scrollup-menu": "^1.0.0" 18 | }, 19 | "browserslist": [ 20 | "> 1%", 21 | "last 2 versions", 22 | "not ie <= 8" 23 | ], 24 | "devDependencies": { 25 | "babel-core": "^6.26.0", 26 | "babel-loader": "^7.1.2", 27 | "babel-preset-env": "^1.6.0", 28 | "babel-preset-stage-3": "^6.24.1", 29 | "cross-env": "^5.0.5", 30 | "css-loader": "^0.28.7", 31 | "file-loader": "^1.1.4", 32 | "node-sass": "^4.5.3", 33 | "sass-loader": "^6.0.6", 34 | "vue-gh-pages": "^1.18.2", 35 | "vue-loader": "^13.0.5", 36 | "vue-template-compiler": "^2.4.4", 37 | "webpack": "^3.6.0", 38 | "webpack-dev-server": "^2.9.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | 22 | 73 | -------------------------------------------------------------------------------- /src/common/directives/show-menu-scroll-up.js: -------------------------------------------------------------------------------- 1 | // Hide Header on scroll down 2 | let lastScrollTop = 0 3 | 4 | const delta = 5 5 | 6 | const hasScrolled = element => { 7 | const top = document.body.scrollTop === 0 8 | ? document.documentElement.scrollTop 9 | : document.body.scrollTop 10 | 11 | // Make sure they scroll more than delta 12 | if (Math.abs(lastScrollTop - top) <= delta) { 13 | return 14 | } 15 | 16 | if (top > lastScrollTop && top > element.offsetHeight) { 17 | element.style.top = `${element.offsetHeight * -1}px` 18 | } else { 19 | element.style.top = '0px' 20 | } 21 | lastScrollTop = top 22 | } 23 | 24 | export default { 25 | // When the linked element is inserted into the DOM 26 | 27 | bind(el) { 28 | let didScroll = true 29 | 30 | document.addEventListener('scroll', () => { 31 | didScroll = true 32 | }) 33 | 34 | setInterval(() => { 35 | if (didScroll === true) { 36 | 37 | hasScrolled(el) 38 | didScroll = false 39 | } 40 | }, 250) 41 | } 42 | } -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 29 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | // directive globally 5 | 6 | // import vueScrollupMenu from 'vue-scrollup-menu' 7 | 8 | // Vue.directive('vue-scrollup-menu', vueScrollupMenu) 9 | 10 | new Vue({ 11 | el: '#app', 12 | render: h => h(App) 13 | }) 14 | 15 | 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, 20 | { 21 | test: /\.scss$/, 22 | use: [ 23 | 'vue-style-loader', 24 | 'css-loader', 25 | 'sass-loader' 26 | ], 27 | }, 28 | { 29 | test: /\.sass$/, 30 | use: [ 31 | 'vue-style-loader', 32 | 'css-loader', 33 | 'sass-loader?indentedSyntax' 34 | ], 35 | }, 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader', 39 | options: { 40 | loaders: { 41 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 42 | // the "scss" and "sass" values for the lang attribute to the right configs here. 43 | // other preprocessors should work out of the box, no loader config like this necessary. 44 | 'scss': [ 45 | 'vue-style-loader', 46 | 'css-loader', 47 | 'sass-loader' 48 | ], 49 | 'sass': [ 50 | 'vue-style-loader', 51 | 'css-loader', 52 | 'sass-loader?indentedSyntax' 53 | ] 54 | } 55 | // other vue-loader options go here 56 | } 57 | }, 58 | { 59 | test: /\.js$/, 60 | loader: 'babel-loader', 61 | exclude: /node_modules/ 62 | }, 63 | { 64 | test: /\.(png|jpg|gif|svg)$/, 65 | loader: 'file-loader', 66 | options: { 67 | name: '[name].[ext]?[hash]' 68 | } 69 | } 70 | ] 71 | }, 72 | resolve: { 73 | alias: { 74 | 'vue$': 'vue/dist/vue.esm.js' 75 | }, 76 | extensions: ['*', '.js', '.vue', '.json'] 77 | }, 78 | devServer: { 79 | historyApiFallback: true, 80 | noInfo: true, 81 | overlay: true 82 | }, 83 | performance: { 84 | hints: false 85 | }, 86 | devtool: '#eval-source-map' 87 | } 88 | 89 | if (process.env.NODE_ENV === 'production') { 90 | module.exports.devtool = '#source-map' 91 | // http://vue-loader.vuejs.org/en/workflow/production.html 92 | module.exports.plugins = (module.exports.plugins || []).concat([ 93 | new webpack.DefinePlugin({ 94 | 'process.env': { 95 | NODE_ENV: '"production"' 96 | } 97 | }), 98 | new webpack.optimize.UglifyJsPlugin({ 99 | sourceMap: true, 100 | compress: { 101 | warnings: false 102 | } 103 | }), 104 | new webpack.LoaderOptionsPlugin({ 105 | minimize: true 106 | }) 107 | ]) 108 | } 109 | --------------------------------------------------------------------------------