vue中button标签样式和功能禁用的写法

Vue3中禁用按钮：总分超100不可点击实践

最新推荐文章于 2023-12-15 14:45:00 发布

原创最新推荐文章于 2023-12-15 14:45:00 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

工作中的问题同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

element Plus

5 篇文章

订阅专栏

在Vue3项目中，使用Element-Plus组件库时，遇到一个问题：当试卷总分超过100分时，需要禁用‘试题生成’按钮。解决方案是在HTML代码中通过添加`:disabled`属性，结合三目运算符动态控制按钮的禁用状态。这样，当总分超过100，按钮将变为灰色并不可点击。

记录工作中遇到的问题：

需求：出试卷时，如果总分超过100则不允许按钮可点击

所用技术栈：Vue3 element-Plus

HTML代码：

<el-button type="primary" @click="onSubmitExam" >试题生成</el-button>

按钮是这样的：

现在添加disabled属性，总计分数超过100就让它变灰，禁用

<el-button type="primary" @click="onSubmitExam" :disabled="showScore > 100 ? true : false">试题生成</el-button>

在这里，我判断的是总分，使用三目运算来控制按钮的属性

本文引用了别人的文章vue中button标签样式和功能禁用的写法_vue.js_脚本之家 (jb51.net)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Daisy_ls

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

el-tooltip配合el-button禁用时显示提示

FellAsleep的博客

10-12

4683

比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也被el-button的禁用，无法打开了。解决方案就是在el-button的外层，再加上一个div包裹起来，这样的话，类名el-tooltip就会加到div身上，就不会受到按钮禁用的影响了。

【按钮防抖】el-button和普通按钮防抖，点击一次禁用一秒再恢复

seeeeeeeeeee的博客

01-13

539

右边普通按钮通过自定义指令控制，这里自定义指令写法是html版本的。左边是组件按钮，通过disabled控制。点击后的效果，一秒后会恢复可点击。

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

vue中button标签样式和功能禁用写法

热门推荐

cuishao

07-26

1万+

需求：常用的表格编辑功能，都是只有选中某行数据才能显示样式编辑和内容编辑，不选中为灰度且不能编辑（次编辑一般为弹框修改内容） 1.不选中情况下： 2.选中情况下： 3.代码：样式禁用：:class="{disable: selections.length == 0}" 功能禁用：:disabled="selections.length == 0" “selections.length == ...

前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏，利用v-if和v-else

m0_49714202的博客

09-12

894

前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏，利用v-if和v-else

vue el-button样式说明

pengrui18的专栏

03-22

405

链接：https://cloud.tencent.com/developer/section/1489868。

vue中怎么控制页面标签是否禁用

someTuzkis的博客

07-06

1056

前端是VUE+饿了么ui 我想要动态的控制文本框的禁用 :disabled 属性，此时该标签的disabled已经被vue的变量托管，就可以动态控制了

vue自定义button样式

03-27

以下是如何在Vue中实现自定义按钮样式的详细实现方案，包含组合式API和选项式API两种写法： ### 一、基础样式定制方案 #### 1. 组合式API实现 ```vue <button :class="['custom-btn', sizeClass, { 'disabled':...

vue组件中点击按钮后修改输入框的状态实例代码

08-30

本例中，我们探讨的是如何在Vue组件中通过点击按钮改变输入框（`<el-input>`）的状态，使其从禁用（disabled）变为可用。我们将分析问题的解决过程，并深入讲解Vue中的相关知识点。首先，Vue.js提供了双向数据绑定...

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

花椒和蕊的博客

10-11

5070

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

uniapp小程序端，vue框架，button组件怎么根据tjzt这个的值启用或禁用，disabled

最新发布

04-16

- 在Vue 3的setup中如何访问页面参数，可能需要结合Options API和Composition API，如引用[^2]中的方法。最后，需要验证代码示例的正确性，确保动态绑定和条件判断有效，并且在不同情况下按钮状态正确切换。在...

Vue3中动态绑定:disabled element-plus使用方法

xiaoming4965的博客

04-04

4454

Vue3中动态绑定:disabled element-plus使用方法

修改elementui（饿了么）button（按钮）is-disabled的样式影响其他例如输入框disabled的样式

weixin_54495706的博客

01-10

3461

/ 比如输入框加一个:disabled='true'，那输入框的背景色就会变成粉色，必须添加作用域才可以，比如外面嵌套一个带类名的div。// 同理其他按钮类型可以写 .el-button--danger.is-disabled{ ...样式 }// 主要是这里注意.el-button--primary和.is-disabled之间没有空格。// 如果直接写一个全局样式的话，直接写成如下,所有组件的禁用样式都会受影响力。// ⚠️⚠️⚠️⚠️⚠️⚠️可以这么写更改el-button的样式。

Vue-button设置

m0_51989086的博客

12-15

1487

通过type属性指定 primary ,success,info ,waring,danger,text 其中的值设置按钮样式，其中若是设置值为 text，则为文字按钮，没有边框和背景颜色。按钮分类：默认按钮，朴素按钮(plain) ，圆角按钮(round)，圆形按钮(circle)

操作DOM节点修改Vue element el-button的disabled属性

快乐肥宅的学习室

02-09

5212

操作DOM节点修改Vue element el-button的disabled属性目录操作DOM节点修改Vue element el-button的disabled属性1. 使用el.disabled = true;或者el.setAttribute('disabled', '')【无效】2. 使用el.classList.add('is-disabled')【有效】 1. 使用el.disabled = true;或者el.setAttribute(‘disabled’, ‘’)【无效】使用后审查元素

vue3 element-plus 根据表格多选状态禁用按钮

m0_50841860的博客

09-24

1943

vue3 element-plus 根据表格多选状态禁用按钮

按钮的“禁用”样式

wangbin的博客

05-21

4698

按钮的“禁用”样式

el-button切换按钮样式改变，并且第一个按钮默认显示样式

请叫我欧皇！的博客

09-22

1812

el-button切换按钮样式改变，并且第一个按钮默认显示样式

vue3+elementUI实现列表内没有选中项，按钮禁止点击，存在选中项，按钮可点击

weixin_68557949的博客

03-23

1030

vue3+elementUI实现列表内没有选中项，按钮禁止点击，存在选中项，按钮可点击

Vue3按钮（Button）

Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者

03-10

8963

丰富又好看的各种按钮，用于开始一个即时操作，支持：7 种类型；3 种形状；自定义按钮图标；三种尺寸；ghost 样式；自定义样式；设置链接跳转；禁用；加载中；自定义加载指示符；设置为 block 按钮等等，总之，功能丰富，简单易用😁😁