Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Commit 3668145

Browse files
committed
feat(fab): Use MutationObserver for reactive slot updates (#92)
1 parent a4946c3 commit 3668145

File tree

1 file changed

+17
-6
lines changed

1 file changed

+17
-6
lines changed

components/fab/Fab.vue

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ export default {
3434
},
3535
data () {
3636
return {
37-
mdcRipple: null
37+
mdcRipple: null,
38+
slotOberserver: null
3839
}
3940
},
4041
computed: {
@@ -47,16 +48,26 @@ export default {
4748
}
4849
},
4950
mounted () {
50-
if (this.$slots.default) {
51-
this.$slots.default.map(n => {
52-
n.elm.classList.add('mdc-fab__icon')
53-
})
54-
}
51+
this.updateSlot()
52+
this.slotOberserver = new MutationObserver( () => this.updateSlot())
53+
this.slotOberserver.observe(this.$el, {
54+
childList: true,
55+
subtree: true
56+
})
5557
5658
if (this.interactive) { this.mdcRipple = MDCRipple.attachTo(this.$el) }
5759
},
5860
beforeDestroy () {
5961
if (this.interactive) { this.mdcRipple.destroy() }
62+
},
63+
methods: {
64+
updateSlot () {
65+
if (this.$slots.default) {
66+
this.$slots.default.map(n => {
67+
n.elm.classList.add('mdc-fab__icon')
68+
})
69+
}
70+
}
6071
}
6172
}
6273
</script>

0 commit comments

Comments
 (0)