ant-design-vue 修改a-button disabled默认样式

最新推荐文章于 2024-05-09 10:29:14 发布

温柔雨哥a

最新推荐文章于 2024-05-09 10:29:14 发布

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/CSDN_bare/article/details/126179676

版权

默认是灰色但我想要白色
一般这种需求比较少纯记录

/*覆盖ant-design-vue 样式**/
.ant-btn-primary[disabled],.ant-btn-primary[disabled]:hover {
  color: #ffffff !important;
}

优惠劵

温柔雨哥a

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ant-design-vue 修改a-button disabled默认样式

修改disabled默认样式
复制链接

扫一扫

ant-design-vue-pro：像Pro一样使用Ant Design Vue！

02-05

English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。基于预览：：主页：：文档： : 变更日志： : 常见问题解答：：总览环境和依赖节点纱网络包埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。但您也可以使用npm 项目设置克隆回购 git clone https://github.com/vueComponent/ant-

用于设置ant-design-vue中table组件的列宽可拖拽

08-05

vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽

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

vue3 组件篇 Button

秋来九月八

10-04

4571

Button组件是前端开发中最常见的组件之一，无论是c端还是b端，使用频率都是极高。那么封装一个button组件需要做些什么？ 1. 点击事件 2. 按钮的文案自定义 3. 按钮的disabled状态 4. 按钮的大小可选择，以期能够适应更多的场景 5. 按钮的背景颜色可选可自定义 6. 按钮的形状一般分为三种，椭圆，矩形，圆形 7. button的类型也可以多提供几种，如边框是虚线的，背景色透明的，等等

Vuex从入门到实战（十三）——【实践篇】按钮样式切换

芳草萋萋鹦鹉洲哦

05-26

603

Todos 10 这节实现三个按钮样式切换，使用三目运算即可实现。 <a-button type="primary / default"> 需要注意的是 type 要进行属性绑定（不要跟我一样败在一个冒号上） 1、store/index.js——增加 changeViewkey() 修改视图的关键字，增加公共数据 viewKey 存储当前选中按钮。 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axi.

ant-design-vue 修改ant-input disabled样式（原先样式他们觉得太深了，把字体原色改明显了，背景色改浅了）

今日最可爱YeahT

05-08

8751

在src目录下新建一个common.less文件，在main.js里面引入这个文件 common.less覆盖原先的样式 /*覆盖ant-design-vue 样式**/ .ant-input[disabled] { color: rgba(0, 0, 0, 0.6); background-color: #f9f9f9; } .ant-select-disabled...

【Ant Design Vue】button组件用法大全

Hit the keyboard hard

12-03

1万+

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

花椒和蕊的博客

10-11

4286

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

2021-01-28

weixin_45677987的博客

01-28

1554

antDesign of Vue: 组件库使用： 1： a-button: 按钮组：按钮样式：按钮有五种样式：主按钮样式： type="primary" 次按钮样式： type="default" 虚线按钮： type="dash" 警告按钮： type= "danger" 连接按钮： type="link"; <a-button type="primary"> Primary </a-button...

Ant Design vue 组件 button自定义

夜空孤狼啸的博客

01-16

2566

Ant Design vue 组件 button自定义

antd-vue（1.7.8版本）常见组件的样式修改

Litt_White的博客

08-01

1251

antd-vue（1.7.8版本）常见组件的样式修改

vue_ant-design-vue菜单递归

12-28

后台返回菜单无限层级展示

nuxt-ant-design-vue

05-08

@ nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用...

ant-design-vue-pro-master.zip

08-20

ant-design-vue-pro-master之前版本的源码，该版本支持多页签，实现页面页签显示，返回不刷新。新版本代码改动较大，此版本慎用，可参考多页签的实现方式；

Vue.js 动态绑定CSS样式

最新发布

qq_60839348的博客

05-09

749

vue数据大屏并发请求

ant-design-vue如何封装

05-09

Ant Design Vue 是一个优秀的 Vue 组件库，如果你想要封装一个组件，可以按照以下步骤进行： 1. 创建一个 Vue 组件，可以使用 `Vue.extend` 或 `Vue.component` 方法，例如： ```vue <template> <div> <input v-model="inputValue" /> <button @click="handleClick">Click me</button> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleClick() { this.$emit('click', this.inputValue); }, }, }; </script> ``` 2. 根据 Ant Design Vue 的设计规范，对组件进行样式设计和布局，可以参考官方文档中的设计原则和样式规范。 3. 添加组件的 props，使得组件可以接受外部传递的参数，例如： ```vue <script> export default { props: { label: String, disabled: Boolean, }, data() { return { inputValue: '', }; }, methods: { handleClick() { this.$emit('click', this.inputValue); }, }, }; </script> ``` 4. 对组件进行功能拓展，例如添加验证逻辑、支持多语言等。 5. 如果需要，可以使用 `Vue.use` 方法将组件注册为插件，例如： ```js import MyComponent from './MyComponent.vue'; const MyPlugin = { install(Vue) { Vue.component(MyComponent.name, MyComponent); }, }; export default MyPlugin; ``` 在使用时，可以通过 `Vue.use(MyPlugin)` 来注册组件。 6. 最后，可以将组件发布到 npm 上，方便其他人使用。以上就是封装 Ant Design Vue 组件的基本步骤，不同的组件可能还需要针对具体的需求进行额外的处理。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交