Vue，去除v-on：click自动添加的点击灰色效果

最新推荐文章于 2024-08-16 07:34:20 发布

sunnycsx

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量544

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/huaqishen123/article/details/109207129

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在对应的ele中添加如下css样式（只在移动端才会出现的问题）

-webkit-tap-highlight-color: transparent;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunnycsx

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3.0项目---蜘蛛电影（解析）

weixin_43842821的博客

04-09

839

项目简介蜘蛛电影主要是仿猫...

vue-cms（1）

from_shanghai的博客

07-24

792

2019.7.7——7.24 01 和 02没有关系 01的图片资源自己有要cnpm i，安装node_modules,然后npm run dev （接口要改 http://www.liulongbin.top:3000） day7\02.vms npm run dev:EADDRINUSE 3000端口被占用把新闻资讯改成路由创建newsl...

参与评论您还未登录，请先登录后发表或查看评论

vue3 + el-button 点击后颜色不恢复

wdm891026的博客

10-11

1479

vue3 + el-button 点击后颜色不恢复

【antd-design-vue】a-button 点击按钮置灰10秒后恢复

花椒和蕊的博客

10-11

4614

需求：点击按钮，按钮变成灰色，同时出现倒计时10秒，10秒后变回原来的按钮首先给按钮添加disabled属性，当绑的值为true的时候禁用再定义一个时间值 <a-button type="primary" @click="reportBtn()" class="updateBtn" :disabled="updateDisableFlag"> <span v-if="updateDisableFlag">上报({{settimer}}")</span&gt.

Vue.js 中的 @click 事件详解

最新发布

weixin_63490470的博客

08-16

1498

除了使用@click指令监听原生 DOM 事件，Vue.js 还允许我们自定义事件，并在组件之间进行通信。-- 父组件 --> < template > < div > < ChildComponent @custom-event = " handleCustomEvent " /> < script > import ChildComponent from './ChildComponent.vue';

点击按钮背景变灰色，松开恢复原来色

卓越无关环境，保持空杯心态——靡不有初，鲜克有终

06-09

3185

点赞再看，养成好习惯～～～～ demo有的页面有100多个列表项，需要点击列表项的时候背景变灰色，松开后背景恢复原来色，这个样式加上才让人更清楚地看到是点击的哪一个按钮，视觉友好。最初的时候我是想用js逻辑去修改样式，如果点击了，那么就改为灰色，松开后，再改为白色。结果demo有100多个列表项，我也不可能加上100多个监听，我突然想起以前学的事件代理，然后就实践了一把。出现了如下代码 <script> ..... let ul = document.getElem.

微信小程序 navigator与button 去除点击时的灰色背景

小码的博客

12-04

3928

<navigator hover-class="none"></navigator>// hover-class="none"添加此属性即可去除点击时背景色 <button hover-class="btn-hover" class='card-btn-subitem card-btn-subitem-sty'> //hover-class="btn-ho...

vue单选按钮，重复点击可取消选中

tt1234561009的博客

05-10

2965

项目开发中常用的单选组件例如el-radio、u-radio 组件自身是不支持取消选中，一旦选择了就只能切换选项不能取消选中。而实际开发中有些需求是希望单选按钮不但能够切换同时还允许取消选择。

前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

Only-CYY的博客

07-05

3837

【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）

vue - 使用vue实现自定义多选与单选的答题功能

weixin_33759269的博客

07-04

3611

4月底立得flag，五月底插上小旗，结果拖到六月底七月初才来执行。说什么工作忙都是借口，就是睡的比猪早，起的比猪晚。本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意，能把我们的多选单选功能很完美且很强大得双向绑定起来，实现多选、单选、任意选...根本不在话下。但是，凡事都有一个但是！但是奈何这个项目...

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新

热门推荐

MingL520的博客

07-17

8万+

文档描述本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码并基于前端进阶和面试的需求总结了常用插件和js算法以及html/css和js热点面试题因为csdn不可以有外链所以答案链接在评论区！！！ Vue面试题生命周期函数面试题 1.什么是...

vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

10-16

今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

VUE 中点击按钮后根据对某状态的判断将它置灰

m0_59761769的博客

07-22

6649

VUE 中点击按钮后根据对某状态的判断将它置灰

在组件里面绑定事件 vue去除双击选中效果

Guanerye0314的博客

02-19

246

*webkit浏览器*/-khtml-user-select: none;// 去除双击选中效果。

移动端网站或APP点击后出现闪动或灰色背景

weixin_30279315的博客

08-14

366

隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时，会出现的灰块 html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 　移动端网站或APP点击后出现闪动或灰色背景只需对...

vue 验证码界面点击后标灰并设置div按钮不可点击状态

haeasringnar的博客

12-13

1万+

1、先看看效果图未点击获取验证码的按钮状态点击后的不可点击状态 2、代码实现 <template> <div class="my-code"> <input class="my-code-input" type="text" v-model="login_form.captcha" placeholder="Your Captch

点击遮罩层的背景关闭遮罩层

geek555的博客

03-07

1592

转载：https://blog.csdn.net/weixin_44542088/article/details/86513659 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1） ...

vue+element-ui中button点击后不恢复原样

ocean_stars的博客

06-22

4786

在做项目时碰到点击element的button后不恢复原样 before: after: button的颜色并没有恢复,强逼症解决办法 <div> <el-button type="primary" icon="el-icon-download" size="mini" @click="handleClick"> 月度报表导出 </el-button> </div> handleClick(event) { // 点

Vue按钮置灰

qq_45041558的博客

11-05

3481

table表格条件判断, 选中按钮置灰。

vue v-on:click 动态参数传递

05-01

v-on:click 动态参数传递是指可以根据组件的具体需求，在触发 click 事件时传递不同的参数。这样可以增强组件的灵活性和复用性。在 Vue 中，我们可以通过以下方式来实现 v-on:click 动态参数传递： 1. 使用方法调用通过调用方法来传递参数是最常用的方式。我们可以在方法中定义需要传递的参数，然后在模板中调用方法并传递参数。例如： ```html <template> <button @click="handleClick('hello')">点击我</button> </template> <script> export default { methods: { handleClick(text) { console.log(text) } } } </script> ``` 2. 使用 $event 对象 $event 是 Vue 在事件触发时自动传递的一个参数，它可以获取到当前事件的信息，比如鼠标的位置等。在传递动态参数时，我们可以通过 $event 对象来传递额外的参数。例如： ```html <template> <button @click="handleClick('hello', $event)">点击我</button> </template> <script> export default { methods: { handleClick(text, event) { console.log(text, event) } } } </script> ``` 3. 使用 bind 方法通过 bind 方法可以将参数绑定到特定的函数中。例如： ```html <template> <button @click="handleClick.bind(this, 'hello')">点击我</button> </template> <script> export default { methods: { handleClick(text) { console.log(text) } } } </script> ``` 总之，通过 v-on:click 动态参数传递，我们可以更加灵活地对组件进行设置，既可以传递静态参数，也可以通过方法调用、$event 对象、bind 方法等方式传递动态参数。