VUE小技巧收纳

一、问题现象

示例：折叠屏标题中添加了按钮，点击按钮会触发折叠效果；但是我们希望的是点击按钮只触发按钮事件；

二、问题解决

1.在按钮的外层套嵌一层DIV

代码如下（示例）：

<el-collapse-item  name="1">
    <div slot="title" style="width: 100%">
      <div>
        <el-button>点击</el-button></div> </div>
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>

2.给div添加一个点击事件:

代码如下，方法名：stopCollapse：

 <el-collapse-item  name="1">
    <div slot="title" style="width: 100%">
      <div @click='stopCollapse'>
        <el-button>点击</el-button></div>
                                         </div>
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
//js方法：
  stopCollapse(e){
        return e.stopPropagation()
      }

到这就可以实现点击头部按钮不触发折叠效果，但是建议给div设置宽度，或者使用 给按钮添加宽度限制，不然就会导致这一行空白地方点击都不会对折叠产生效果；

总结

每天成长一点点啦～