perf: rewrite to declarative, close #64

Scrum · May 18, 2020 · 6f8a4ff · 6f8a4ff
1 parent 19ac9f0
commit 6f8a4ff
Showing 1 changed file with 47 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,4 @@
-import {ComponentOptions, PluginObject, VueConstructor} from 'vue'
+import {ComponentOptions, PluginObject, VueConstructor, VNode} from 'vue'
 import { Route } from 'vue-router';
 
 type CallbackFunction = (params: any) => string;
@@ -32,6 +32,52 @@ class VueBreadcrumbs implements PluginObject<ComponentOptions<Vue>> {
           return path;
         }
       },
+      render(createElement): VNode {
+        if (this.$breadcrumbs.length) {
+          return createElement(
+            'ol',
+            {
+              class: {
+                'breadcrumb': true
+              }
+            },
+            this.$breadcrumbs.map((crumb: Route, index: number) => {
+              if (crumb && crumb.meta && crumb.meta.breadcrumb) {
+                return createElement(
+                  'li',
+                  {
+                    class: {
+                      'breadcrumb-item': true
+                    },
+                    props: {
+                      key: index
+                    }
+                  },
+                  [
+                    createElement(
+                      'router-link',
+                      {
+                        attrs: {
+                          'active-class': 'active'
+                        },
+                        props: {
+                          to: { path: this.getPath(crumb) },
+                          tag: index !== this.$breadcrumbs.length - 1 ? 'a' : 'span'
+                        }
+                      },
+                      ` ${this.getBreadcrumb(crumb.meta.breadcrumb)}`
+                    )
+                  ]
+                )
+              }
+
+              return createElement();
+            })
+          )
+        }
+
+        return createElement();
+      },
       template: `
       <ol
           class="breadcrumb"