|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="nut-sidenavbar">
|
|
<div class="nut-sidenavbar">
|
|
|
<div class="sidenavbar-content">
|
|
<div class="sidenavbar-content">
|
|
|
- <div class="sidenavbar-list">
|
|
|
|
|
|
|
+ <div class="sidenavbar-list" ref="list">
|
|
|
<slot></slot>
|
|
<slot></slot>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -17,21 +17,31 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- let slots = this.$slots.default;
|
|
|
|
|
- if(slots) {
|
|
|
|
|
- slots = slots.filter(item => item.elm.nodeType !== 3).map(item => {
|
|
|
|
|
- return item.elm
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- this.setPaddingLeft(slots)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.observer = new MutationObserver(function(mutations) {
|
|
|
|
|
+ this.handleSlots()
|
|
|
|
|
+ }.bind(this));
|
|
|
|
|
+
|
|
|
|
|
+ this.observer.observe(
|
|
|
|
|
+ this.$refs.list,
|
|
|
|
|
+ { attributes: true, childList: true, characterData: true, subtree: true }
|
|
|
|
|
+ );
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- count: 1
|
|
|
|
|
|
|
+ count: 1,
|
|
|
|
|
+ observer: null
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ handleSlots() {
|
|
|
|
|
+ let slots = this.$slots.default;
|
|
|
|
|
+ if(slots) {
|
|
|
|
|
+ slots = slots.filter(item => item.elm.nodeType !== 3).map(item => {
|
|
|
|
|
+ return item.elm
|
|
|
|
|
+ })
|
|
|
|
|
+ this.setPaddingLeft(slots)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
setPaddingLeft(nodeList, level = 1) {
|
|
setPaddingLeft(nodeList, level = 1) {
|
|
|
for(let i = 0; i < nodeList.length; i++) {
|
|
for(let i = 0; i < nodeList.length; i++) {
|
|
|
let item = nodeList[i];
|
|
let item = nodeList[i];
|