Merge branch 'Toc'

web_src/src/components/common/Toc.vue

@@ -0,0 +1,175 @@
+
+<template>
+  <div> 
+
+  </div>
+</template>
+<script>
+export default {
+
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    var that = this ; 
+    //循环检测jq有没有加载成功
+    var check_jQuery_is_load = setInterval(function() {
+        try{
+            if ($ != undefined) {
+                clearInterval(check_jQuery_is_load);
+                that.toc_main_script();
+            }
+        } catch(e) {}
+    },200);
+
+  },
+  methods: {
+  toc_main_script() {
+
+        //监听点击事件并滑动到相应位置
+        $(document).on('click', '.markdown-toc-list a[href]', function(event) {
+            event.preventDefault();
+            var name = $(this).attr('href').substring(1);
+            var top_at_window = $('[name="'+name+'"]').offset().top;
+            $("html, body").animate({scrollTop: top_at_window}, 300)
+        });
+        //监听展开事件
+        $(document).on('click', '.markdown-toc', function(event) {
+            if (!$(event.target).is("a")) {
+                $('.markdown-toc').toggleClass('open-list');
+            }
+        });
+        //监听鼠标滚动事件给与颜色加亮
+        $(window).scroll(function(event) {
+            var activeName = "";
+            $('.markdown-toc-list a[href]').each(function(index, el) {
+                var name = $(el).attr('href').substring(1);
+                if ($('[name="'+name+'"]').offset().top - $(window).scrollTop() < 1) {
+                    activeName = name;
+                } else {
+                    return false;
+                }
+            });
+            $('.markdown-toc-list a').removeClass('current');
+            $('.markdown-toc-list a[href="#'+activeName+'"]').addClass('current');
+        });
+
+        //不是移动设备并且不是其他小屏设备，则自动展开目录
+        if( !this.isMobile() &&  window.screen.width > 1000){
+            this.$nextTick(() => {
+                setTimeout(function(){
+                    $(".markdown-toc").click();
+                },500);
+            });
+        }
+
+
+
+    },
+  },
+  destroyed () {
+    //把那些监听了的事件去掉
+    $(document).off('click', '.markdown-toc-list a[href]');
+    $(document).off('click', '.markdown-toc');
+    $(".markdown-toc").remove();
+
+  }
+}
+</script>
+<!-- 注意，这里是全局css -->
+<style >
+.page_content_main .markdown-toc {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    min-width: 32px;
+    min-height: 32px;
+    cursor: pointer;
+    z-index: 1;
+}
+.page_content_main .markdown-toc:before {
+    content:"\e63f";
+    font-family: element-icons !important;
+    color: #909399;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #DCDFE6;
+    border-radius: 5px;
+    cursor: pointer;
+    box-shadow: 0 5px 5px #F2F6FC;
+    transition: .25s;
+}
+.page_content_main .markdown-toc.open-list:before {
+    border: 1px solid #40a9ff;
+    color: #40a9ff;
+    border-radius: 50%;
+}
+.page_content_main .markdown-toc > .markdown-toc-list {
+    position: relative;
+    z-index: 999;
+    margin: 0;
+    list-style: none;
+    min-width: 150px;
+    max-width: 230px;
+    padding: 5px 0;
+    background: #fff;
+    border: 1px solid #DCDFE6;
+    border-radius: 5px;
+    box-shadow: 0 5px 5px #F2F6FC;
+    max-height: 400px;
+    overflow-y: auto;
+    transform: scale(0);
+    margin-right: -230px;
+    margin-bottom: -270px;
+    opacity: 0;
+    visibility: hidden;
+    transform-origin: bottom right;
+    transition: .25s ease 0s, margin-right 0s ease .25s, margin-bottom 0s ease .25s;
+}
+.page_content_main .markdown-toc.open-list .markdown-toc-list {
+    margin-right: 0px;
+    margin-bottom: 0px;
+    transform: scale(1) translateY(-44px);
+    opacity: 1;
+    visibility: visible;
+    transition: .5s cubic-bezier(0.4,1.7,0.6,1), margin-right 0s, margin-bottom 0s;
+}
+.page_content_main .markdown-toc li {
+    list-style: none !important;
+}
+.page_content_main .markdown-toc li a {
+    display: block;
+    padding: 3px 15px;
+    font-size: 14px;
+    color: #606266;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow:hidden;
+    transition: .15s;
+}
+.page_content_main .markdown-toc li a.current {
+    background: #ecf5ff;
+    color: #40a9ff;
+    box-shadow: 2px 0px #40a9ff inset;
+}
+.page_content_main .markdown-toc li a:hover {
+    background: #d9ecff;
+    text-decoration: none;
+    color: #40a9ff;
+    transition: 0s;
+}
+.page_content_main .markdown-toc li ul {
+    padding: 0;
+}
+.page_content_main .markdown-toc li li a {
+    padding-left: 30px;
+}
+</style>

web_src/src/components/item/show/show_regular_item/Index.vue

@@ -65,6 +65,7 @@
       </el-container>
 
       <BackToTop  > </BackToTop>
+      <Toc  v-if="page_id" > </Toc>
 
   <el-dialog
     title="分享项目"
@@ -97,6 +98,7 @@
 <script>
   import Editormd from '@/components/common/Editormd'
   import BackToTop from '@/components/common/BackToTop'
+  import Toc from '@/components/common/Toc'
   import LeftMenu from '@/components/item/show/show_regular_item/LeftMenu'
   import PageBar from '@/components/item/show/show_regular_item/PageBar'
   import AttachmentList from '@/components/page/edit/AttachmentList'
@@ -126,6 +128,7 @@
     LeftMenu,
     PageBar,
     BackToTop,
+    Toc,
     AttachmentList
   },
   methods:{

web_src/src/components/item/show/show_single_page_item/Index.vue

@@ -29,7 +29,7 @@
         </div>
         <div id="doc-body" >
 
-        <div id="page_md_content" ><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
+        <div id="page_md_content"  class="page_content_main"><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
         </div>
 
       </div>
@@ -131,6 +131,7 @@
 <script>
 import Editormd from '@/components/common/Editormd'
 import BackToTop from '@/components/common/BackToTop'
+import Toc from '@/components/common/Toc'
 
 export default {
   props:{
@@ -150,7 +151,8 @@ export default {
   },
   components:{
     Editormd,
-    BackToTop
+    BackToTop,
+    Toc
   },
   methods:{
 

web_src/src/components/page/Index.vue

@@ -10,11 +10,12 @@
         </div>
         <div id="doc-body" >
 
-        <div id="page_md_content" ><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
+        <div id="page_md_content"  class="page_content_main" ><Editormd v-bind:content="content" v-if="content" type="html"></Editormd></div>
         </div>
 
       </div>
       <BackToTop></BackToTop>
+      <Toc  v-if="page_id" > </Toc>
     <Footer> </Footer>
     <div class=""></div>
   </div>
@@ -97,6 +98,7 @@
 <script>
 import Editormd from '@/components/common/Editormd'
 import BackToTop from '@/components/common/BackToTop'
+import Toc from '@/components/common/Toc'
 
 export default {
   data () {
@@ -104,12 +106,14 @@ export default {
       currentDate: new Date(),
       itemList:{},
       content:"",
-      page_title:''
+      page_title:'',
+      page_id:0,
     };
   },
   components:{
     Editormd,
-    BackToTop
+    BackToTop,
+    Toc
   },
   methods:{
     get_page_content(){
@@ -125,7 +129,7 @@ export default {
               //that.$message.success("加载成功");
               that.content = response.data.data.page_content ;
               that.page_title = response.data.data.page_title ;
-
+              that.page_id = response.data.data.page_id ;
             }
             else if (response.data.error_code === 10307 || response.data.error_code === 10303 ) {
               //需要输入密码