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 插槽简介及使用示例
Nov 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python实现PS图像调整黑白效果示例
2018/01/25 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
企划专员岗位职责
2013/12/09 职场文书
小学数学教研活动总结
2014/07/01 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
恰同学少年观后感
2015/06/08 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS