ソースを参照

Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

Frans 7 年 前
コミット
91b22acb04
1 ファイル変更22 行追加11 行削除
  1. 22 11
      sites/doc/compents/hidden/hidden.vue

+ 22 - 11
sites/doc/compents/hidden/hidden.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-
+<div class="swap">
     <div 
     <div 
         class="eidt-box"
         class="eidt-box"
         :class="{
         :class="{
@@ -8,8 +8,9 @@
         }" 
         }" 
         :style="siteHeight" 
         :style="siteHeight" 
         style="transition: all .2s;">
         style="transition: all .2s;">
-        <slot></slot>
-        <div v-if="heightSlot>300" class="bar" @click="showall">
+        <slot></slot>        
+    </div>
+    <div :title="titleMsg" v-if="heightSlot>400" class="bar" @click="showall">
             <svg  width="20" viewBox="0,0 20,10">
             <svg  width="20" viewBox="0,0 20,10">
                 <path v-if="isShow" d="M 0,5 
                 <path v-if="isShow" d="M 0,5 
                             L10,10 
                             L10,10 
@@ -21,7 +22,8 @@
                 </path>
                 </path>
             </svg>
             </svg>
         </div>
         </div>
-    </div>
+</div>
+    
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
@@ -33,7 +35,8 @@ export default {
             isShow:true,
             isShow:true,
             isHide:false,
             isHide:false,
             //  盒子高度
             //  盒子高度
-            heightSlot:0
+            heightSlot:0,
+            titleMsg:'点击展开'
         }
         }
     },
     },
     methods:{
     methods:{
@@ -42,25 +45,32 @@ export default {
             this.isHide = !this.isHide;
             this.isHide = !this.isHide;
             if(this.isHide){
             if(this.isHide){
                 this.siteHeight = {height:this.heightSlot+ 'px'};
                 this.siteHeight = {height:this.heightSlot+ 'px'};
+                this.titleMsg = '点击收起'
             }else{
             }else{
                 this.siteHeight = {
                 this.siteHeight = {
-                height:'300px'
-            }
+                    height:'400px'
+                }
+            this.titleMsg = '点击展开'
             }
             }
             
             
         }
         }
     },
     },
     mounted(){     
     mounted(){     
         this.heightSlot = this.$slots.default[0].elm.offsetHeight;
         this.heightSlot = this.$slots.default[0].elm.offsetHeight;
-        if(this.heightSlot<300){
-            this.siteHeight = {height:this.heightSlot + 'px'};
+        if(this.heightSlot<400){
+            this.siteHeight = {height:this.heightSlot + 'px'};           
         }else{
         }else{
-            this.siteHeight = {height:'300px'};
+            this.siteHeight = {height:'300px'};          
         }
         }
     }
     }
 }
 }
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.swap{
+    position: relative;
+    padding-bottom:30px;
+    background: #F2F4F5;
+}
 .show{   
 .show{   
     overflow:hidden;
     overflow:hidden;
     position: relative;
     position: relative;
@@ -72,10 +82,11 @@ export default {
     height: 30px;
     height: 30px;
     width: 100%;
     width: 100%;
     bottom: 0;
     bottom: 0;
-    background: linear-gradient(rgba(255, 255, 255, 0.5),#fff);
+    background: linear-gradient(rgba(255, 255, 255, 0.2),#fafafa);
     position: absolute;
     position: absolute;
     z-index: 999 ;
     z-index: 999 ;
     text-align: center;
     text-align: center;
+    cursor: pointer;
     svg{
     svg{
         vertical-align: bottom;
         vertical-align: bottom;
     }
     }