使用场景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);