feat: scoped slot for link

vuejs · Jul 22, 2019 · e289dde · e289dde
1 parent edfa2c6
commit e289dde
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -43,6 +43,11 @@ new Vue({
         <li><router-link to="/é">/é</router-link></li>
         <li><router-link to="/é?t=%25ñ">/é?t=%ñ</router-link></li>
         <li><router-link to="/é#%25ñ">/é#%25ñ</router-link></li>
+        <router-link to="/foo" v-slot="props">
+          <li :class="[props.isActive && 'active', props.isExactActive && 'exact-active']">
+            <a :href="props.href" @click="props.navigate">{{ props.route.path }} (with v-slot).</a>
+          </li>
+        </router-link>
       </ul>
       <button id="navigate-btn" @click="navigateAndIncrement">On Success</button>
       <pre id="counter">{{ n }}</pre>

diff --git a/src/components/link.js b/src/components/link.js
@@ -83,8 +83,28 @@ export default {
       on[this.event] = handler
     }
 
-    const data: any = {
-      class: classes
+    const data: any = { class: classes }
+
+    console.log({
+      scoped: this.$scopedSlots,
+      slots: this.$slots
+    })
+    const scopedSlot =
+      !this.$scopedSlots.$hasNormal &&
+      this.$scopedSlots.default &&
+      this.$scopedSlots.default({
+        href,
+        route,
+        navigate: handler,
+        isActive: classes[activeClass],
+        isExactActive: classes[exactActiveClass]
+      })
+
+    console.log(scopedSlot)
+
+    if (scopedSlot) {
+      if (scopedSlot.length > 1 || !scopedSlot.length) throw new Error('no')
+      return scopedSlot[0]
     }
 
     if (this.tag === 'a') {