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 22 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Django 大文件下载实现过程解析
2019/08/01 Python
解决Python使用列表副本的问题
2019/12/19 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Django如何使用redis作为缓存
2020/05/21 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
材料化学专业求职信
2014/07/15 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
如何用PHP实现多线程编程
2021/05/26 PHP
压缩Redis里的字符串大对象操作
2021/06/23 Redis
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server