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的Message和MessageBox的示例
Nov 20 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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新手用的Insert和Update语句构造类
2012/03/31 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python爬虫中多线程的使用详解
2019/09/23 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
师范毕业生自我鉴定
2014/01/15 职场文书
廉洁自律承诺书
2014/03/27 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
还款承诺书范文
2014/05/20 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
八年级历史教学反思
2016/02/19 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python