elementui折叠面板使用其他组件触发展开BUG（已解决）

 

问题描述

最近在开发的时候遇到一个问题，需要在elementui中折叠面板的组件上使用input输入框，但在输入空格和回车键的时候会触发折叠面板的展开事件，导致用户输入时频繁展开关闭

如下图

注意点

1.首先在el-input组件外加一个div并在标签上写@click.stop只能阻止点击输入框时展开折叠面板的冒泡，无法阻止输入的冒泡4

2.在输入@input事件中阻止空格和回车的事件触发，也是无效的

解决方法

首先为折叠面板注册一个ref

<el-collapse
            v-model="process.active"
            ref="coll"
            accordion
          >

然后在折叠面板标题的el-input组件增加两个方法

@focus="titleFocus"
@blur="titleBlur"

titleFocus() {
    this.collClick = this.$refs.coll.setActiveNames
    this.$refs.coll.setActiveNames = () => {}
        },
titleBlur() {
      this.$refs.coll.setActiveNames = this.collClick
    }

这样就实现了在输入框输入时，折叠面板不会触发展开折叠事件

实现的原理是在输入框输入时，将折叠面板的折叠方法设置为空，在输入框失焦时，将折叠面板的方法恢复