Collapse add simple prop

This commit is contained in:
梁灏 2018-06-21 19:14:09 +08:00
parent 0c9f8fabb3
commit 3f611f57ed
4 changed files with 25 additions and 4 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Collapse accordion v-model="value3"> <Collapse accordion v-model="value3" simple>
<Panel name="1" hide-arrow> <Panel name="1" hide-arrow>
史蒂夫·乔布斯 史蒂夫·乔布斯
<div slot="content"> <div slot="content">
@ -29,7 +29,7 @@
<br/> <br/>
<br/> <br/>
<Collapse v-model="value5"> <Collapse v-model="value5" simple>
<Panel name="21"> <Panel name="21">
斯蒂夫·盖瑞·沃兹尼亚克 斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克Stephen Gary Wozniak美国电脑工程师曾与史蒂夫·乔布斯合伙创立苹果电脑今之苹果公司斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学后转学入美国著名高等学府加州大学伯克利分校UC Berkeley并获得电机工程及计算机EECS本科学位1987</p> <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克Stephen Gary Wozniak美国电脑工程师曾与史蒂夫·乔布斯合伙创立苹果电脑今之苹果公司斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学后转学入美国著名高等学府加州大学伯克利分校UC Berkeley并获得电机工程及计算机EECS本科学位1987</p>

View file

@ -15,6 +15,10 @@
}, },
value: { value: {
type: [Array, String] type: [Array, String]
},
simple: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -24,7 +28,12 @@
}, },
computed: { computed: {
classes () { classes () {
return `${prefixCls}`; return [
`${prefixCls}`,
{
[`${prefixCls}-simple`]: this.simple
}
];
} }
}, },
mounted () { mounted () {

View file

@ -99,7 +99,7 @@
}, },
iconClasses () { iconClasses () {
return [ return [
`ivu-icon`, 'ivu-icon',
{ {
[`ivu-icon-${this.icon}`]: this.icon !== '', [`ivu-icon-${this.icon}`]: this.icon !== '',
[`${this.customIcon}`]: this.customIcon !== '', [`${this.customIcon}`]: this.customIcon !== '',

View file

@ -5,6 +5,12 @@
border-radius: 3px; border-radius: 3px;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
&-simple{
border-left: none;
border-right: none;
background-color: #fff;
}
& > &-item{ & > &-item{
border-top: 1px solid @border-color-base; border-top: 1px solid @border-color-base;
&:first-child { &:first-child {
@ -30,6 +36,9 @@
& > &-item&-item-active > &-header{ & > &-item&-item-active > &-header{
border-bottom: 1px solid @border-color-base; border-bottom: 1px solid @border-color-base;
} }
&-simple > &-item&-item-active > &-header{
border-bottom: 1px solid transparent;
}
& > &-item&-item-active > &-header > i{ & > &-item&-item-active > &-header > i{
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -46,6 +55,9 @@
padding-bottom: 16px; padding-bottom: 16px;
} }
} }
&-simple > &-item > &-content > &-content-box{
padding-top: 0;
}
&-item-active > &-content{ &-item-active > &-content{
//display: block; //display: block;
} }