Collapse add simple prop

梁灏
1 parent 0c9f8fab
Showing 4 changed files with 25 additions and 4 deletions Show diff stats
examples/routers/collapse.vue
src/components/collapse/collapse.vue
src/components/rate/rate.vue
src/styles/components/collapse.less
 <template>
     <div>
-        <Collapse accordion v-model="value3">
+        <Collapse accordion v-model="value3" simple>
             <Panel name="1" hide-arrow>
                 史蒂夫·乔布斯
                 <div slot="content">
@@ -29,7 +29,7 @@
  
         <br/>
         <br/>
-        <Collapse v-model="value5">
+        <Collapse v-model="value5" simple>
             <Panel name="21">
                 斯蒂夫·盖瑞·沃兹尼亚克
                 <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
@@ -15,6 +15,10 @@
             },
             value: {
                 type: [Array, String]
+            },
+            simple: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -24,7 +28,12 @@
         },
         computed: {
             classes () {
-                return `${prefixCls}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-simple`]: this.simple
+                    }
+                ];
             }
         },
         mounted () {
@@ -99,7 +99,7 @@
             },
             iconClasses () {
                 return [
-                    `ivu-icon`,
+                    'ivu-icon',
                     {
                         [`ivu-icon-${this.icon}`]: this.icon !== '',
                         [`${this.customIcon}`]: this.customIcon !== '',
@@ -5,6 +5,12 @@
     border-radius: 3px;
     border: 1px solid @border-color-base;
  
+    &-simple{
+        border-left: none;
+        border-right: none;
+        background-color: #fff;
+    }
+
     & > &-item{
         border-top: 1px solid @border-color-base;
         &:first-child {
@@ -30,6 +36,9 @@
     &  > &-item&-item-active > &-header{
         border-bottom: 1px solid @border-color-base;
     }
+    &-simple > &-item&-item-active > &-header{
+        border-bottom: 1px solid transparent;
+    }
     &  > &-item&-item-active > &-header > i{
         transform: rotate(90deg);
     }
@@ -46,6 +55,9 @@
             padding-bottom: 16px;
         }
     }
+    &-simple > &-item > &-content > &-content-box{
+        padding-top: 0;
+    }
     &-item-active > &-content{
         //display: block;
     }