UNPKG

vue-navigation-scroll-bar

Version:

A Vue.js project

2 lines 7.6 kB
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue-navigation-scroll-bar",[],e):"object"==typeof exports?exports["vue-navigation-scroll-bar"]=e():t["vue-navigation-scroll-bar"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=1)}([function(t,e,r){"use strict";e.a={name:"VueNavigationScrollBar",props:{navList:{type:Array,default:function(){return[]},require:!0},barColor:{type:String,default:""},barBgColor:{type:String,default:""}},data:function(){return{left:0,barWidth:0}},mounted:function(){this.init()},methods:{init:function(){this.$props.barColor&&(this.$refs.scrollBarWrap.style.backgroundColor=this.$props.barColor),this.$props.barBgColor&&(this.$refs.scrollBar.style.backgroundColor=this.$props.barBgColor),this.initBarWidth()},scollHandle:function(t){var e=t.target.scrollLeft/t.target.scrollWidth;this.left=this.$refs.scrollBarWrap.offsetWidth*e},initBarWidth:function(){var t=this.$refs.navWrap.offsetWidth/(10*this.$refs.navItem[0].offsetWidth);t=t>1?1:t,this.barWidth=this.$refs.scrollBarWrap.offsetWidth*t},clickHandle:function(t){this.$emit("navClick",t)}}}},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=r(2);n.a.install=function(t){t.component("VueNavigationScrollBar",n.a)},e.default={VueNavigationScrollBar:n.a}},function(t,e,r){"use strict";function n(t){r(3)}var o=r(0),a=r(9),i=r(8),s=n,l=i(o.a,a.a,!1,s,"data-v-283a2023",null);e.a=l.exports},function(t,e,r){var n=r(4);"string"==typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);r(6)("05273c87",n,!0,{})},function(t,e,r){e=t.exports=r(5)(!1),e.push([t.i,".outer[data-v-283a2023]{width:100%;position:relative;padding:10px 0 5px}.nav-wrap[data-v-283a2023]{overflow-x:auto;width:100%;display:flex;transition:left}.nav-item[data-v-283a2023]{width:20vw;flex:0 0 auto}.nav-item img[data-v-283a2023]{width:40px;height:40px;border-radius:50%}.scroll-bar-wrap[data-v-283a2023]{width:15vw;height:.6vh;border-radius:10px;overflow:hidden;margin:0 auto;background-color:#ddd;margin-top:5px;position:relative}.scroll-bar[data-v-283a2023]{display:inline-block;width:30px;height:100%;background-color:orange;position:absolute;left:0}",""])},function(t,e){function r(t,e){var r=t[1]||"",o=t[3];if(!o)return r;if(e&&"function"==typeof btoa){var a=n(o);return[r].concat(o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"})).concat([a]).join("\n")}return[r].join("\n")}function n(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=r(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(n[a]=!0)}for(o=0;o<t.length;o++){var i=t[o];"number"==typeof i[0]&&n[i[0]]||(r&&!i[2]?i[2]=r:r&&(i[2]="("+i[2]+") and ("+r+")"),e.push(i))}},e}},function(t,e,r){function n(t){for(var e=0;e<t.length;e++){var r=t[e],n=c[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(a(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{for(var i=[],o=0;o<r.parts.length;o++)i.push(a(r.parts[o]));c[r.id]={id:r.id,refs:1,parts:i}}}}function o(){var t=document.createElement("style");return t.type="text/css",f.appendChild(t),t}function a(t){var e,r,n=document.querySelector("style["+m+'~="'+t.id+'"]');if(n){if(v)return h;n.parentNode.removeChild(n)}if(b){var a=p++;n=d||(d=o()),e=i.bind(null,n,a,!1),r=i.bind(null,n,a,!0)}else n=o(),e=s.bind(null,n),r=function(){n.parentNode.removeChild(n)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else r()}}function i(t,e,r,n){var o=r?"":n.css;if(t.styleSheet)t.styleSheet.cssText=y(e,o);else{var a=document.createTextNode(o),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(a,i[e]):t.appendChild(a)}}function s(t,e){var r=e.css,n=e.media,o=e.sourceMap;if(n&&t.setAttribute("media",n),g.ssrId&&t.setAttribute(m,e.id),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=r;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=r(7),c={},f=l&&(document.head||document.getElementsByTagName("head")[0]),d=null,p=0,v=!1,h=function(){},g=null,m="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,r,o){v=r,g=o||{};var a=u(t,e);return n(a),function(e){for(var r=[],o=0;o<a.length;o++){var i=a[o],s=c[i.id];s.refs--,r.push(s)}e?(a=u(t,e),n(a)):a=[];for(var o=0;o<r.length;o++){var s=r[o];if(0===s.refs){for(var l=0;l<s.parts.length;l++)s.parts[l]();delete c[s.id]}}}};var y=function(){var t=[];return function(e,r){return t[e]=r,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var r=[],n={},o=0;o<e.length;o++){var a=e[o],i=a[0],s=a[1],l=a[2],u=a[3],c={id:t+":"+o,css:s,media:l,sourceMap:u};n[i]?n[i].parts.push(c):r.push(n[i]={id:i,parts:[c]})}return r}},function(t,e){t.exports=function(t,e,r,n,o,a){var i,s=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(i=t,s=t.default);var u="function"==typeof s?s.options:s;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),r&&(u.functional=!0),o&&(u._scopeId=o);var c;if(a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):n&&(c=n),c){var f=u.functional,d=f?u.render:u.beforeCreate;f?(u._injectStyles=c,u.render=function(t,e){return c.call(e),d(t,e)}):u.beforeCreate=d?[].concat(d,c):[c]}return{esModule:i,exports:s,options:u}}},function(t,e,r){"use strict";var n=function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"outer"},[r("div",{ref:"navWrap",staticClass:"nav-wrap",on:{scroll:t.scollHandle}},t._l(t.navList,function(e,n){return r("div",{key:n,ref:"navItem",refInFor:!0,staticClass:"nav-item",on:{click:function(r){return t.clickHandle(e)}}},[t._t("default",function(){return[r("img",{attrs:{src:e.iconUrl,alt:""}}),t._v(" "),r("p",[t._v(t._s(e.title))])]},{navData:e})],2)}),0),t._v(" "),r("div",{ref:"scrollBarWrap",staticClass:"scroll-bar-wrap"},[r("i",{ref:"scrollBar",staticClass:"scroll-bar",style:{left:t.left+"px",width:t.barWidth+"px"}})])])},o=[],a={render:n,staticRenderFns:o};e.a=a}]).default}); //# sourceMappingURL=build.js.map