修改 Element UI 插件 Collapse 折叠面板，点击 icon 折叠展开，enter不能展开

一、使用场景

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

二、实现原理

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

// 源码
{{title}}

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

// html 部分
{{ title }}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！