vue判断按钮是否可以点击


Posted in Vue.js onApril 09, 2022

根据条件判断按钮是否可以点击

按钮当在特定环境下不可点击,需要根据判断来控制点击事件。

方法一:使用v-if 、v-else 来判断

<template>
    <div>
        <el-button v-if="!isDisabled"></el-button>
        <el-button v-else @click="getDetail()"></el-button>
    </div>
</template>

方法二:增加一个变量,判断

<template>
<el-button @click="!isDisabled && getDetail()"></el-button>
</template>
<script>
data(){
    return{
        isDisabled:true,  //为true时可以点击,false时不可点击
    }
}
</script>

两种方法都可以,但第二种相对来说编写的代码更少,具体怎么用看个人习惯。  

vue判断点击当前元素

点击按钮,出现弹窗;然后点击遮罩层,当前弹窗消失。

vue判断按钮是否可以点击

一开始都会在遮罩层上绑定点击事件,但是这样的话,点击了form表单,当前弹窗也会消失。

需要判断你是点击了遮罩层还是form表单

1.在遮罩层上绑定点击事件 @click=“showfun2($event)”

<div class="topfrom" v-show="msg" @click="showfun2($event)">
    <!--子组件-->
    <fromdemo btndata="点击咨询"></fromdemo>  
</div>

2.判断是否点击了当前元素 e.currentTarget === e.target

showfun2(e) {
    if (e.currentTarget === e.target) {
        this.msg = false
    }
},

以上就完成当前事件点击元素的判断。

接下来是分别对e.currentTarget、e.target打印

showfun2(e) {
    console.log(e.currentTarget)
    console.log(e.target)
},

第一次点击 遮罩层 

vue判断按钮是否可以点击

第二次点击 form表单

vue判断按钮是否可以点击

发现 e.currentTarget 打印的始终是,绑定点击事件的元素。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 #Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 #Vue.js
vue实现列表垂直无缝滚动
Apr 08 #Vue.js
vue3引入highlight.js进行代码高亮的方法实例
vue中的可拖拽宽度div的实现示例
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
You might like
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
迟到早退检讨书
2014/02/10 职场文书
高中语文课后反思
2014/04/27 职场文书
施工安全生产承诺书
2014/05/23 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
教师年度个人总结
2015/02/11 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
MySQL日期时间函数知识汇总
2022/03/17 MySQL
mysql sql常用语句大全
2022/06/21 MySQL