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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
Vue 打包后相对路径的引用问题
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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP输出日历表代码实例
2015/03/27 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jQuery参数列表集合
2011/04/06 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
浅谈MySQL中的触发器
2015/05/05 Python
基于Python log 的正确打开方式
2018/04/28 Python
基于python实现学生信息管理系统
2019/11/22 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
我未来的职业规划范文
2014/01/11 职场文书
学期自我评价
2014/01/27 职场文书
服装促销活动方案
2014/02/23 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript