一、使用场景

          用到 element ui 插件的Collapse 折叠面板，平常用也很方便，但是今天老大要求 只能点icon才能进行展开和折叠操作，插件是点击标题行就可以展开，今天就找到折叠面板的源码，希望可以帮助到遇到同问题的码兄
 

二、实现原理

          找到<el-collapse-item></el-collapse-item> 点它进入它的源码文件 名字叫 collapse-item.vue 的文件

// 源码
<div
   class="el-collapse-item__header"
   @click="handleHeaderClick"
   role="button"
   :id="`el-collapse-head-${id}`"
   :tabindex="disabled ? undefined : 0"
   @keyup.space.enter.stop="handleEnterClick"
   :class="{
     'focusing': focusing,
     'is-active': isActive
   }"
   @focus="handleFocus"
   @blur="focusing = false"
 >
   <slot name="title">{{title}}</slot>
   <i
     class="el-collapse-item__arrow el-icon-arrow-right"
     :class="{'is-active': isActive}">
   </i>
</div>

        找到 handleEnterClick 这个方法，给这个方法注释掉，因为它是按enter 或者空格 都会触发它，使用的时候很不爽
        找到@click事件里面的方法，把这个@clcik方法移动到  i  标签上面
        实现后会发现，i 标签可点范围太小，这个是时候更改一下 i 标签的大小继续OK了
        因为它是 flex 布局，所以改了大小后， 标题的比例就会缩小，我想到的方法是，使用两个 i 标签，小的（原来的）在下面占位，大的（我们自己更改后的）则定位在上面
       下面是我的代码

// html 部分
<div
        :id="`el-collapse-head-${id}`"
        class="el-collapse-item__header"
        role="button"
        :tabindex="disabled ? undefined : 0"
        :class="{
          'focusing': focusing,
          'is-active': isActive
        }"
        @keyup.space.enter.stop="handleEnterClick"
        @focus="handleFocus"
        @blur="focusing = false"
      >
        <slot name="title">{{ title }}</slot>
        <i
          class="el-collapse-item__arrow el-icon-arrow-right positionAbsolute"
          :class="{'is-active': isActive}"
          @click="handleHeaderClick"
        />
        <i
          class="el-collapse-item__arrow el-icon-arrow-right visibilityHidden"
          :class="{'is-active': isActive}"
          @click="handleHeaderClick"
        />
      </div>

// CSS部分
.positionAbsolute {
  position: absolute;
  right: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.visibilityHidden{
  visibility: hidden;
}