vue中div禁止点击事件的实现

 更新时间:2022年04月01日 17:21:31   作者:Sam young  
这篇文章主要介绍了vue中div禁止点击事件的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

div禁止点击事件

在这里插入图片描述

在props里面定义一个判断是不是只读的属性。

在这里插入图片描述

在最外面的div里面添加三元表达式

在这里插入图片描述

  • pointer-events: none;是禁止鼠标点击事件

div作为按钮不可点击问题的处理

vue中div作为按钮,使用:disabled="flag"(flag为布尔类型)控制按钮是否可点击,发现无论flag为true还是false,div按钮都可点击。

解决方法,将div换成button。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现打印指定组件内容的示例详解

    vue实现打印指定组件内容的示例详解

    这篇文章主要和大家分享一下vue中打印指定组件内容,多页打印自动适配纸张大小打印的方案,文中的示例代码讲解详细,需要的可以参考一下
    2024-03-03
  • vue3+ts 兄弟组件之间传值的实现

    vue3+ts 兄弟组件之间传值的实现

    Vue3是一款流行的前端框架,它支持多种传值方式,包括兄弟组件之间的传值,本文主要介绍了vue3+ts 兄弟组件之间传值的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • vue监听键盘事件的相关总结

    vue监听键盘事件的相关总结

    这篇文章主要介绍了vue监听键盘事件的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue3+Ant design 实现Select下拉框一键全选/清空功能

    Vue3+Ant design 实现Select下拉框一键全选/清空功能

    在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下
    2024-05-05
  • vue 通过下拉框组件学习vue中的父子通讯

    vue 通过下拉框组件学习vue中的父子通讯

    这篇文章主要介绍了vue 通过下拉框组件学习vue中的父子通讯的相关知识,文中涉及到了父组件,子组件的实现代码,需要的朋友可以参考下
    2017-12-12
  • vue实现二级导航栏效果

    vue实现二级导航栏效果

    这篇文章主要为大家详细介绍了vue实现二级导航栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 详解input组合事件如何监听输入中文

    详解input组合事件如何监听输入中文

    这篇文章主要为大家介绍了input组合事件如何监听输入中文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue项目配置跨域访问和代理proxy设置方式

    Vue项目配置跨域访问和代理proxy设置方式

    这篇文章主要介绍了Vue项目配置跨域访问和代理proxy设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在vant中使用时间选择器和popup弹出层的操作

    在vant中使用时间选择器和popup弹出层的操作

    这篇文章主要介绍了在vant中使用时间选择器和popup弹出层的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 在vue和element-ui的table中实现分页复选功能

    在vue和element-ui的table中实现分页复选功能

    这篇文章主要介绍了在vue和element-ui的table中实现分页复选功能,本文代码结合图文的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论