正常狀態(tài)下

點(diǎn)擊更多篩選之后

以下是HTML結(jié)構(gòu)

 <cw-collapse>
      <div slot="header">
        <el-form-item label="會(huì)員姓名：">
          <el-input v-model="form.name" placeholder="請(qǐng)輸入會(huì)員姓名"></el-input>
        </el-form-item>
        <el-form-item label="手機(jī)號(hào)：">
          <el-input v-model="form.mobile" placeholder="請(qǐng)輸入會(huì)員手機(jī)號(hào)"></el-input>
        </el-form-item>
        <el-form-item label="卡號(hào)：">
          <el-input v-model="form.cardNo" placeholder="請(qǐng)輸入會(huì)員卡號(hào)"></el-input>
        </el-form-item>
        <el-form-item label="禮品名稱：">
          <el-input v-model="form.gift" placeholder="請(qǐng)輸入禮品名稱"></el-input>
        </el-form-item>
        </div>
        <el-form-item label="會(huì)員等級(jí)：">
          <el-select v-model="form.grade">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="item in grades"
                       :key="item.code"
                       :label="item.name"
                       :value="item.code"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="兌換門店：" v-if="!$agency.isHotel">
          <agency-tree class="agency-tree"
                       ref="agencyTree"
                       @checkAgencyLeavesHotelId="handleCheckAgencyLeaves"></agency-tree>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            :picker-options="startPickerOptions"
            placeholder="選擇日期時(shí)間">
          </el-date-picker>
          <span class="padd8">至</span>
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            :picker-options="endPickerOptions"
            placeholder="選擇日期時(shí)間">
          </el-date-picker>
        </el-form-item>
    </cw-collapse>

<cw-collapse> 是封裝的展開(kāi)更多篩選的組件
渲染在HTML結(jié)構(gòu)當(dāng)中 這個(gè)按鈕是在 兩組篩選條件中間的

.show-more .arrow-text {
      position:absolute;
      top:70%;
      transform: translateY(60%);
      left:200px;
      z-index: 2;
      padding: 8px 30px;
      cursor: pointer;
      user-select: none;
      color: #016CDF;
    }
    
    .arrow-up:before {
      content: '';
      position: absolute;
      transform: rotate(-45deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
    .arrow-down:before {
      content: '';
      position: absolute;
      transform: translateY(-50%) rotate(135deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
  }
    

以上是樣式結(jié)構(gòu)

要想 這個(gè)按鈕點(diǎn)擊一直跟搜索 重置在一行上 要如何處理 昨天改了一下 還是無(wú)法搞定

組件代碼

<template>
  <div class="cw-collapse">
    <div class="header">
      <slot name="header">
        <div class="img-list"><img :src="listUrl" width="100%"/></div>
        {{title}}
      </slot>
      <div class="show-more" @click="showMore = !showMore">
        <div class="arrow-text">
          <span :class="showMore ? 'arrow-up' : 'arrow-down'"></span>
          <p>{{showMore ? collapseText[1] : collapseText[0]}}</p>
        </div>
      </div>
    </div>
    <div class="content" v-show="showMore">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import listUrl from '@assets/images/activity/list.png';

  export default {
    name: 'CwCollapse',

    componentName: 'CwCollapse',
  
    props: {
      text: {
        type: [String, Array],
        'default': function () {
          return ['更多篩選', '收起篩選'];
        }
      },
      'default-open': {
        type: Boolean,
        default: false
      },
      'slot-header': ''
    },
    computed: {
      collapseText () {
        if (typeof this.$props.text === 'string') {
          let matchArr = this.$props.text.match(/(.*)[,|，|、| ](.*)/);
          if (matchArr) {
            return [matchArr[1], matchArr[2]];
          } else {
            return [this.$props.text, this.$props.text];
          }
        } else {
          return this.$props.text;
        }
      },
    },
    data () {
      return {
        showMore: this.$props.defaultOpen || false,
        title: this.$props.slotHeader,
        listUrl
      };
    }
  };
</script>
<style lang="less">
  @normal-border: #d8d8d8;
  .cw-collapse {
    .header {
      position: relative;
      min-height: 36px;
    }
    .img-list {
      display: inline-block;
      width: 28px;
    }
    .show-more .arrow-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30px;
      z-index: 1;
      padding: 8px 30px;
      cursor: pointer;
      user-select: none;
      color: #016CDF;
    }
    
    .arrow-up:before {
      content: '';
      position: absolute;
      transform: rotate(-45deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
    .arrow-down:before {
      content: '';
      position: absolute;
      transform: translateY(-50%) rotate(135deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
  }
</style>