Skip to content

Commit e289dde

Browse files
committed
feat: scoped slot for link
1 parent edfa2c6 commit e289dde

File tree

2 files changed

+27
-2
lines changed

2 files changed

+27
-2
lines changed

examples/basic/app.js

+5
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ new Vue({
4343
<li><router-link to="/é">/é</router-link></li>
4444
<li><router-link to="/é?t=%25ñ">/é?t=%ñ</router-link></li>
4545
<li><router-link to="/é#%25ñ">/é#%25ñ</router-link></li>
46+
<router-link to="/foo" v-slot="props">
47+
<li :class="[props.isActive && 'active', props.isExactActive && 'exact-active']">
48+
<a :href="props.href" @click="props.navigate">{{ props.route.path }} (with v-slot).</a>
49+
</li>
50+
</router-link>
4651
</ul>
4752
<button id="navigate-btn" @click="navigateAndIncrement">On Success</button>
4853
<pre id="counter">{{ n }}</pre>

src/components/link.js

+22-2
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,28 @@ export default {
8383
on[this.event] = handler
8484
}
8585

86-
const data: any = {
87-
class: classes
86+
const data: any = { class: classes }
87+
88+
console.log({
89+
scoped: this.$scopedSlots,
90+
slots: this.$slots
91+
})
92+
const scopedSlot =
93+
!this.$scopedSlots.$hasNormal &&
94+
this.$scopedSlots.default &&
95+
this.$scopedSlots.default({
96+
href,
97+
route,
98+
navigate: handler,
99+
isActive: classes[activeClass],
100+
isExactActive: classes[exactActiveClass]
101+
})
102+
103+
console.log(scopedSlot)
104+
105+
if (scopedSlot) {
106+
if (scopedSlot.length > 1 || !scopedSlot.length) throw new Error('no')
107+
return scopedSlot[0]
88108
}
89109

90110
if (this.tag === 'a') {

0 commit comments

Comments
 (0)