|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="search-form-collapse" :class="{'collapse__hidden': !showMore}"> | 
|---|
|  |  |  | <slot></slot> | 
|---|
|  |  |  | <el-button  v-if="needMore && !showMore" class="collapse__switch" @click="showMore = true">更多查询...</el-button> | 
|---|
|  |  |  | <el-button v-else-if="needMore && showMore" class="collapse__switch" @click="showMore = false">收起</el-button> | 
|---|
|  |  |  | <el-button v-if="!showMore" class="collapse__switch" @click="showMore = true">更多查询...</el-button> | 
|---|
|  |  |  | <el-button v-else class="collapse__switch" @click="showMore = false">收起</el-button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'SearchFormCollapse', | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | needMore: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | required: false, | 
|---|
|  |  |  | default: () => true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | showMore: false | 
|---|
|  |  |  | 
|---|
|  |  |  | height: 50px; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | padding-right: 250px; | 
|---|
|  |  |  | ::v-deep section { | 
|---|
|  |  |  | /deep/ section { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 0; | 
|---|
|  |  |  | right: 100px; | 
|---|