Dev mipengine.org

sites/mipengine.org/components/mip-mipengine-sidenav/README.md

@@ -0,0 +1,13 @@
+# `mip-mipengine-sidenav`
+
+## 说明
+
+组件功能说明
+
+## 示例
+
+示例说明
+
+## 属性
+
+属性说明

sites/mipengine.org/components/mip-mipengine-sidenav/mip-mipengine-sidenav.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    ref="sidenavLeft"
+    class="sidenav-wrapper"
+    @click="click($event)"
+  >
+    <sidenav-menu
+      :menu="menu"
+      :url="url"
+      :level="level"
+      :activeindex="activeIndex">
+      <template slot-scope="slotProps">
+        <sidenav-chapter
+          :chapters="chapters"
+          :level="level"
+          :active="activeChapter"
+          @select="chapterSelected"/>
+      </template>
+    </sidenav-menu>
+  </div>
+</template>
+
+<style scoped lang="less">
+.sidenav-wrapper {
+}
+</style>
+
+<script>
+import SidenavChapter from './mip-sidenav-chapter'
+import SidenavMenu from './mip-sidenav-menu'
+
+export default {
+  name: 'MipSidenav',
+  components: {
+    SidenavChapter,
+    SidenavMenu
+  },
+  props: {
+    menu: {
+      type: Array,
+      default: null
+    },
+    chapters: {
+      type: Array,
+      default: null
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      activeChapter: decodeURIComponent(location.hash) || ''
+    }
+  },
+  computed: {
+    activeIndex: function () {
+      return this.menu.findIndex(m => {
+        return m.children && m.children.find(c => {
+          return c.url === this.url
+        })
+      })
+    }
+  },
+  mounted () {
+    let activeDom = this.$refs.sidenavLeft.querySelectorAll('.activemenu')[0]
+    let activeTop = activeDom ? activeDom.offsetTop : 0
+    let scrollDom = document.querySelectorAll('.layout-sidebar')[0]
+    if (scrollDom) {
+      scrollDom.scrollTop = activeTop
+    }
+  },
+  methods: {
+    chapterSelected (key) {
+      this.activeChapter = key
+    },
+    click (e) {
+      this.$nextTick(() => {
+        this.$emit('clicked', e)
+      })
+    }
+  }
+}
+</script>

sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-chapter.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="wd-infinity-chapters">
+    <template v-for="(item, index) in chapters">
+      <a
+        v-if="level !== 0"
+        :key="item.text"
+        :class="{selected: active ? active === item.hash : (index === 0 && level === 1)}"
+        :href="item.hash"
+        class="chapter-title"
+        @click="select(item.hash)"
+      >
+        <div v-html="item.text"/>
+      </a>
+      <div
+        v-if="item.children"
+        :class="'children-' + level"
+        :key="item.text">
+        <mip-sidenav-chapter
+          :chapters="item.children"
+          :level="level + 1"
+          :active="active"
+          @select="select"/>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wd-infinity-chapters {
+  position: relative;
+  div[class^="children-"] {
+    .chapter-title {
+      font-size: 14px;
+      line-height: 24px;
+      color: #555;
+      padding: 10px 10px 10px 0;
+      display: block;
+      cursor: pointer;
+      margin-left: 10px;
+      &:active {
+        background: #f5f5f5;
+      }
+      @media (min-width: 768px) {
+        &:hover {
+          background: #f5f5f5;
+        }
+      }
+      &.selected {
+        >div {
+          color: #000;
+          font-weight: bold;
+          border-left: 2px solid #000;
+          transition: border .2s linear;
+        }
+      }
+
+      >div {
+        border-left: 2px solid transparent;
+        padding-left: 30px;
+        margin-left: -12px;
+        position: relative;
+        &::before {
+          content: '·';
+          color: #000;
+          display: inline-block;
+          padding-right: 5px;
+          position: absolute;
+          left: 20px;
+        }
+      }
+    }
+  }
+  .children-0 {
+    margin-left: 10px;
+    border-left: 2px solid #f1f1f1;
+    &>.wd-infinity-chapters {
+      margin-bottom: 16px;
+      &>.chapter-title {
+        >div {
+          padding-left: 20px;
+          &::before {
+            display: none;
+          }
+        }
+      }
+      // 隐藏多余的 border
+      &>:first-child {
+        &:before {
+          content: '';
+          height: 12px;
+          border-left: 6px solid #fff;
+          position: absolute;
+          top: 0;
+          left: -4px;
+        }
+      }
+      &>:last-child {
+        &:after {
+          content: '';
+          height: 12px;
+          border-left: 6px solid #fff;
+          position: absolute;
+          bottom: 0;
+          left: -4px;
+        }
+      }
+    }
+  }
+
+  // 特殊第4、5层
+  .children-2 {
+    &>.wd-infinity-chapters {
+      padding-left: 10px;
+      &>.chapter-title {
+        >div {
+          padding-left: 40px;
+          margin-left: -22px;
+          &::before {
+            left: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .children-3 {
+    &>.wd-infinity-chapters {
+      padding-left: 10px;
+      &>.chapter-title {
+        >div {
+          padding-left: 50px;
+          margin-left: -32px;
+          &::before {
+            left: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'MipSidenavChapter',
+  props: {
+    chapters: {
+      type: Array,
+      default: null
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    active: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    select (key) {
+      this.$emit('select', key)
+    }
+  }
+}
+</script>