Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法
iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果。那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了。具体代码:
<!-- 折叠面板组件on-change事件即可获得当前展开面板的值,value即为默认面板的值,可绑定变量值,accordion选项即一次只能展开一个面板 -->
<Collapse @on-change="panelChange" :value="list[0].code" accordion>
<!-- 折叠面板组件需要给每个Panel一个特定的name值,防止展开收起时操作有误 -->
<Panel v-for="(item, index) in list" :key="item.code" :name="item.code">
{{ item.name }} <!-- 以下div的click事件即为阻止冒泡,div的内容即为在标题上添加的组件 -->
<div @click.stop.prevent="() => {}"> </div>
<div p="slot">
<!-- 面板内部内容 -->
</div>
</Panel>
</Collapse>
<script>
export default {
data() {
return {
list: [{
code: '1',
name: '折叠面板1'
}, {
code: '2',
name: '折叠面板2'
}, {
code: '3',
name: '折叠面板3'
}];
}
},
methods: {
panelChange(keyList) { //获取当前展开面板的值
console.log(keyList);
}
}
}
</script>
Vue 折叠面板Collapse在标题上添加组件后,阻止面板冒泡的用法的更多相关文章
- 【HarmonyOS】【Demo】【JAVA UI】 鸿蒙怎么在Webview上添加组件
在大家HarmonyOS开发中,Webview组件上添加组件可能是很常见的功能了,HarmonyOS的webview和Android的webwiew存在一点点区别,今天来实现这个功能 使用项目布局显示 ...
- 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- iOS实现类似QQ的好友列表,自由展开折叠(在原来TableView的基础上添加一个字典,一个Button)
//直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...
- Bootstrap 折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时, ...
- Bootstrap-Plugin:折叠(Collapse)插件
ylbtech-Bootstrap-Plugin:折叠(Collapse)插件 1.返回顶部 1. Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域 ...
- Skywalking-05:在Skywalking RocketBot上添加监控图表
在 Skywalking RocketBot 上添加监控图表 效果图 该图的一些配置信息如下: 标题为: JVM Thread State Count (Java Service) 指标为: read ...
- 将vue+nodejs项目部署到服务器上(完整版)
1.后端使用express生成器 1.1.后台node项目部署 在node项目里安装cors依赖(跨域)npm install cors --save,在app.js文件中使用var cors = r ...
随机推荐
- Python—内置函数
内置函数 内置函数补充 all: 所有iterable类型,包含的元素要全为真才返回真 >>> all([0,-1,5]) False >>> all([-1,5 ...
- nginx请求数据超长的问题解决
参考文章 https://www.cnblogs.com/onmyway20xx/p/4469202.html http://blog.51cto.com/iyull/2129220
- 史上最简单OpenGL+VS2017环境配置
这里采用 最简单的方法: (1)添加Nuget包管理器(方便我们为项目添加OpenGL的库) (2)新建一个项目 右键我们的项目名 ——> 管理NuGet程序包——>搜索nupengl,然 ...
- 一分钟学会ConstraintLayout(转载)
原文地址:https://www.v2ex.com/t/287863 最近更新了Android Studio,突然发现xml中的布局已经变成了ConstraintLayout,于是搜了一篇文章看一下 ...
- mysql8.0.13 的docker镜像安装
1.从docker中获取mysql8.0.13镜像 docker pull mysql:8.0.13通过 docker images 命令查看镜像是否获取到了 2.运行 mysql8.0.13 镜像 ...
- 解决android 9上无法使用http协议
用户反应本来好用的app,突然无法访问服务器,不能正常用了,拿到手机,从头检查权限,重新安装都不能解决,网络是正常的,怎么就不能访问网络了呢?所有想到的办法都用了而不能解决,最后想起看一下androi ...
- Linux系统-禁ping
1) Add the following line to your /etc/sysctl.conf net.ipv4.icmp_echo_ignore_all=1 Then : sysctl -p ...
- 由于找不到 opencv_world320.dll,无法继续执行代
首先找到自己软件安装(解压)的路径openCV (安装(解压)目录\opencv\build\x64\vc14\bin) 我的安装(解压)目录是:F:\OpenCV\Three320\opencv\b ...
- Gym101889B. Buggy ICPC(打表)
比赛链接:传送门 题目: Problem B – Buggy ICPC Author : Gabriel Poesia, Brasil Alan Curing is a famous sports p ...
- SQL 入门了解
SQL 随着应用程序的功能越来越复杂,数据量越来越大,如何管理这些数据就成了大问题: 读写文件并解析出数据需要大量重复代码: 从成千上万的数据中快速查询出指定数据需要复杂的逻辑. 如果每个应用程序都各 ...