热门标签
热门文章
- 1leetcode 1901. 找出顶峰元素 II_leetcode1901java
- 2产品思维训练 | 经典产品面试题_产品经理 思维逻辑题
- 3机器学习实战之路 —— 3 决策树与随机森林（二）_随机森林决策树数量的选择
- 4u cos 延时函数用法小节_uscos延时\
- 5高性能和多级高可用，云原生数据库 GaiaDB 架构设计解析
- 6yolov5 simplepose人体姿态
- 7全国计算机等级考试2021公共基础知识,2021年上半年全国计算机等级考试[MS Office高级应用+公共基础知识]精选模拟试题及答案解析...
- 8Java数据结构和算法 五种排序算法：选择排序、插入排序、冒泡排序、快速排序和归并排序的实现与性能分析_选择排序java数据结构与算法
- 9python打印随机验证码，包含大小写字母和随机数字_"import random as r yzm=\"\" ___for__ in _____ ran
- 10iOS 包含行间距计算富文本size
当前位置: article > 正文
vue+elementUI中Collapse的title自定义如何阻止冒泡事件_elementui collapse title自定义点击事件
作者：凡人多烦事01 | 2024-02-13 02:28:52
赞
踩
elementui collapse title自定义点击事件
需求背景
使用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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
附上效果图:
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/79424
推荐阅读
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
