vue-breadcrumb
Version:
Breadcrumbs for Vue JS. It uses routes as the main source of the breadcrumb
1 lines • 4.37 kB
JavaScript
var VueBreadcrumb=function(e){"use strict";var t={name:"VueBreadcrumb",props:{disableDelimiter:{type:Boolean,default:!1},delimiterClass:{type:String,default:null},delimiterStyle:{type:String,default:null},crumbClass:{type:String,default:null},crumbStyle:{type:String,default:null},activeCrumbClass:{type:String,default:null},activeCrumbStyle:{type:String,default:null},liStyle:{type:String,default:null},liClass:{type:String,default:null},ulStyle:{type:String,default:null},ulClass:{type:String,default:null}},data:function(){return{breadcrumbs:[],activePage:""}},watch:{$route:function(){this.breadcrumbs=[],this.initBreadcrumb()}},mounted:function(){this.initBreadcrumb()},methods:{initBreadcrumb:function(){var e=this.$route.meta.breadcrumb;e&&(this.breadcrumbs.push({name:e.name,to:null}),e.parent&&this.selectParent(e.parent,this.$router.options.routes),this.breadcrumbs.reverse())},selectParent:function(e,t){for(var n=0;n<t.length;n+=1){var r=t[n];if(r.name===e){var a={};a.name=r.meta.breadcrumb.name;var i=this.identifyParameterKey(r.path);if(a.to=i?{name:r.name,params:{paramKey:this.$route.params[i]}}:{name:r.name},this.breadcrumbs.push(a),r.meta.breadcrumb.parent)return this.selectParent(r.meta.breadcrumb.parent,this.$router.options.routes)}else if(r.children)return this.selectParent(e,r.children)}return null},identifyParameterKey:function(e){var t=e.indexOf("/:");if(-1!==t)return!1;var n=e.indexOf("/",t+1);return e.slice(t+2,n)}}};var n=function(e,t,n,r,a,i,l,s,u,d){"boolean"!=typeof l&&(u=s,s=l,l=!1);var o,c="function"==typeof n?n.options:n;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,a&&(c.functional=!0)),r&&(c._scopeId=r),i?(o=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=o):t&&(o=l?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),o)if(c.functional){var m=c.render;c.render=function(e,t){return o.call(t),m(e,t)}}else{var b=c.beforeCreate;c.beforeCreate=b?[].concat(b,o):[o]}return n},r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var a=document.head||document.getElementsByTagName("head")[0],i={};var l=n({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("nav",[n("ul",{class:e.ulClass,style:e.ulStyle},[e._l(e.breadcrumbs,function(t,r){return[n("li",{key:r,class:r!==e.breadcrumbs.length-1?e.crumbClass:e.activeCrumbClass,style:r!==e.breadcrumbs.length-1?e.crumbStyle:e.activeCrumbStyle},[t.to?n("router-link",{attrs:{to:t.to}},[e._t("crumb",[e._v("\n "+e._s(t.name)+"\n ")],{crumb:t})],2):[e._t("active-crumb",[e._v("\n "+e._s(t.name)+"\n ")],{crumb:t})]],2),e._v(" "),r===e.breadcrumbs.length-1||e.disableDelimiter?e._e():n("li",{key:r+"delimiter",class:e.delimiterClass,style:e.delimiterClass},[e._t("delimiter",[e._v("\n /\n ")])],2)]})],2)])},staticRenderFns:[]},function(e){e&&e("data-v-ab1017be_0",{source:"ul[data-v-ab1017be]{list-style:none;padding-top:20px}ul li[data-v-ab1017be]{display:inline}",map:void 0,media:void 0})},t,"data-v-ab1017be",!1,void 0,function(e){return function(e,t){return function(e,t){var n=r?t.media||"default":e,l=i[n]||(i[n]={ids:new Set,styles:[]});if(!l.ids.has(e)){l.ids.add(e);var s=t.source;if(t.map&&(s+="\n/*# sourceURL="+t.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),l.element||(l.element=document.createElement("style"),l.element.type="text/css",t.media&&l.element.setAttribute("media",t.media),a.appendChild(l.element)),"styleSheet"in l.element)l.styles.push(s),l.element.styleSheet.cssText=l.styles.filter(Boolean).join("\n");else{var u=l.ids.size-1,d=document.createTextNode(s),o=l.element.childNodes;o[u]&&l.element.removeChild(o[u]),o.length?l.element.insertBefore(d,o[u]):l.element.appendChild(d)}}}(e,t)}},void 0);function s(e){s.installed||(s.installed=!0,e.component("vue-breadcrumb",l))}var u={install:s},d=null;return"undefined"!=typeof window?d=window.Vue:"undefined"!=typeof global&&(d=global.Vue),d&&d.use(u),e.default=l,e.install=s,e}({});