需求背景
使用collapse折叠面板, 折叠面板的title使用的自定义内容, 里面包含一个按钮
遇到问题
点击按钮, 按钮事件生效, 但同时, 折叠面板的title点击事件也生效(即, 面板折叠或者展开了)
期望效果
点击按钮, 折叠面板的title点击事件不生效
实现
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item name="1">
<template slot="title">
自定义title
<div @click="stopProp">
<el-button size="mini" type="primary">我是按钮</el-button>
</div>
</template>
<div>这里是展开内容</div>
</el-collapse-item>
<el-collapse-item title="非自定义title" name="2">
<div>vue+elementUI中Collapse的title自定义如何阻止冒泡事件</div>
</el-collapse-item>
</el-collapse>
<script>
export default {
data() {
return {
activeNames: ['1']
};
},
methods: {
handleChange(val) {
console.log(val);
},
//阻止冒泡事件
stopProp(e) {
e.stopPropagation()
}
}
}
</script>
附上效果图: