增加隐藏显示

scripts/mdToVue.js

@@ -36,12 +36,12 @@ rendererMd.code = function (code, infostring, escaped) {
         code = code.replace(/@latest/g, '@' + version)
     }
 
-    return '<pre class="prettyprint"><span class="lang">' + lang + '</span><div class="code-wrapper"><code class="'
+    return '<hide><pre class="prettyprint"><span class="lang">' + lang + '</span><div class="code-wrapper"><code class="'
         + this.options.langPrefix
         + escape(lang, true)
         + '">'
         + (escaped ? code : escape(code, true))
-        + '</code></div><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre>\n';
+        + '</code></div><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre></hide>\n';
 };
 marked.setOptions({
     renderer: rendererMd,

sites/doc/compents/hidden/hidden.vue

+<template>
+
+    <div 
+        class="eidt-box"
+        :class="{
+            show:isShow,
+            hide:isHide
+        }" 
+        :style="siteHeight" 
+        style="transition: all .2s;">
+        <slot></slot>
+        <div v-if="heightSlot>300" class="bar" @click="showall">
+            <svg  width="20" viewBox="0,0 20,10">
+                <path v-if="isShow" d="M 0,5 
+                            L10,10 
+                            L 20,5" fill="#fff" stroke="#999">                    
+                </path>
+                <path v-if="!isShow" d="M 0,5 
+                            L10,0 
+                            L 20,5" fill="#fff" stroke="#999">                    
+                </path>
+            </svg>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            siteHeight:{
+                height:''
+            },
+            isShow:true,
+            isHide:false,
+            //  盒子高度
+            heightSlot:0
+        }
+    },
+    methods:{
+        showall(){
+            this.isShow = !this.isShow;
+            this.isHide = !this.isHide;
+            if(this.isHide){
+                this.siteHeight = {height:this.heightSlot +30+ 'px'};
+            }else{
+                this.siteHeight = {
+                height:'300px'
+            }
+            }
+            
+        }
+    },
+    mounted(){     
+        this.heightSlot = this.$slots.default[0].elm.offsetHeight;
+        if(this.heightSlot<300){
+            this.siteHeight = {height:this.heightSlot + 'px'};
+        }else{
+            this.siteHeight = {height:'300px'};
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.show{   
+    overflow:hidden;
+    position: relative;
+}
+.hide{    
+    position: relative;
+}
+.bar{
+    height: 30px;
+    width: 100%;
+    bottom: 0;
+    background: linear-gradient(#fff,rgba(255, 255, 255, 0));
+    position: absolute;
+    z-index: 999 ;
+    text-align: center;
+    svg{
+        vertical-align: bottom;
+    }
+}
+</style>
+

sites/doc/info.vue

@@ -52,6 +52,7 @@
 </template>
 <script>
 import { sorts, packages } from "../../src/config.json";
+
 export default {
   name: "index",
   data() {
@@ -63,6 +64,7 @@ export default {
       curName: ""
     };
   },
+ 
   watch: {
     packages() {
       // const compare = (obj1, obj2) => {

sites/doc/root.js

-
+import hide from './compents/hidden/hidden.vue';
 
 var myMixin ={
     data(){
@@ -8,6 +8,9 @@ var myMixin ={
           demourl:''
         }
       },
+    components:{
+        hide
+    },
     methods:{
         closelayer(){
           this.content = '';