扩展el-collapse-item组件 缩小点击范围

使用场景vue:

<el-collapse
  v-model="apiFlowPane"
  class="wrap_collapse"
>
  <el-collapse-item-extend name="baseInfo">
      <template slot="title">
        <div class="title sub-title pop-title">
          <label>基础信息</label>
        </div>
      </template>
  </el-collapse-item-extend>
</el-collapse>

扩展组件vue：

<script>
import { CollapseItem } from "element-ui";
export default {
  components: { CollapseItem },
  extends: CollapseItem, // 重点
  name: 'ElCollapseItemExtend',
  methods: {
    handleHeaderClick(e) {
      if (this.disabled) return;
      // 如果是标题块，则return不执行；标题块以下的slot title 才执行
      if (e.target.className.indexOf('el-collapse-item__header') !== -1) return;
      this.dispatch('ElCollapse', 'item-click', this);
      this.focusing = false;
      this.isClick = true;
    },
    handleEnterClick(e) {
      if (e.target.className.indexOf('el-collapse-item__header') !== -1) return;
      this.dispatch('ElCollapse', 'item-click', this);
    }
  }
};
</script>
<style>
.el-collapse-item__header .title,
.el-collapse-item__header .el-collapse-item__arrow,
.el-collapse-item__header .title * {
  cursor: pointer;
}
.el-collapse-item .el-collapse-item__header {
  cursor: default;
}
</style>

main.js：

import ElCollapseItemExtend from '@/components/customCompt/ElCollapseItemExtend.vue';

Vue.component('ElCollapseItemExtend', ElCollapseItemExtend);