Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
c420174c
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c420174c
编写于
8月 16, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
style: fix `basicButton` style
上级
b7487675
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
152 addition
and
127 deletion
+152
-127
build/vite/plugin/theme.ts
build/vite/plugin/theme.ts
+5
-4
src/design/ant/btn.less
src/design/ant/btn.less
+55
-47
src/views/demo/comp/button/index.vue
src/views/demo/comp/button/index.vue
+92
-76
未找到文件。
build/vite/plugin/theme.ts
浏览文件 @
c420174c
...
...
@@ -35,11 +35,12 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
return
s
;
case
'
.ant-select-item-option-selected:not(.ant-select-item-option-disabled)
'
:
return
s
;
case
'
.ant-btn-primary
'
:
case
'
.ant-btn:hover
'
:
case
'
.ant-btn-primary:hover
'
:
default
:
if
(
s
.
indexOf
(
'
.ant-btn
'
)
>=
-
1
)
{
// 按钮被重新定制过,需要过滤掉class防止覆盖
return
s
;
}
}
return
s
.
startsWith
(
'
[data-theme
'
)
?
s
:
`[data-theme]
${
s
}
`
;
},
colorVariables
:
[...
getThemeColors
(),
...
colors
],
...
...
src/design/ant/btn.less
浏览文件 @
c420174c
...
...
@@ -29,18 +29,23 @@
color: @white;
background-color: @button-primary-hover-color;
}
&[disabled],
&[disabled]:hover {
color: fade(@button-cancel-color, 40%);
background-color: fade(@button-cancel-bg-color, 40%);
}
//
//&[disabled],
//&[disabled]:hover {
// color: fade(@button-cancel-color, 40%) !important;
// background-color: fade(@button-cancel-bg-color, 40%) !important;
// border-color: fade(@button-cancel-border-color, 40%) !important;
//}
}
&-primary:not(&-background-ghost) {
border-width: 0
;
&-primary:not(&-background-ghost)
:not([disabled])
{
color: @white
;
}
//&-primary:not(&-background-ghost) {
// border-width: 0;
//}
&-default {
color: @button-cancel-color;
background-color: @button-cancel-bg-color;
...
...
@@ -52,13 +57,13 @@
background-color: @button-cancel-hover-bg-color;
border-color: @button-cancel-hover-border-color;
}
&[disabled],
&[disabled]:hover {
color: fade(@button-cancel-color, 40%)
;
background: fade(@button-cancel-bg-color, 40%)
;
border-color: fade(@button-cancel-border-color, 40%)
;
}
//
//
&[disabled],
//
&[disabled]:hover {
// color: fade(@button-cancel-color, 40%) !important
;
// background: fade(@button-cancel-bg-color, 40%) !important
;
// border-color: fade(@button-cancel-border-color, 40%) !important
;
//
}
}
[data-theme='light'] &.ant-btn-link.is-disabled {
...
...
@@ -105,11 +110,11 @@
}
}
&-success:not(.ant-btn-link) {
&-success:not(.ant-btn-link
, .is-disabled
) {
color: @white;
background-color: @button-success-color;
border-color: @button-success-color;
border-width: 0;
//
border-width: 0;
&:hover,
&:focus {
...
...
@@ -123,13 +128,12 @@
border-color: @button-success-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-color: fade(@button-success-color, 40%);
// background-color: @button-success-disabled-color;
border-color: fade(@button-success-color, 40%);
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-success-color, 40%);
// border-color: fade(@button-success-color, 40%);
//}
}
&-warning.ant-btn-link:not([disabled='disabled']) {
...
...
@@ -146,11 +150,11 @@
}
}
&-warning:not(.ant-btn-link) {
&-warning:not(.ant-btn-link
, .is-disabled
) {
color: @white;
background-color: @button-warn-color;
border-color: @button-warn-color;
border-width: 0;
//
border-width: 0;
&:hover,
&:focus {
...
...
@@ -164,15 +168,12 @@
border-color: @button-warn-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-color: fade(@button-warn-color, 40%);
border-color: fade(@button-warn-color, 40%);
// background-color: @button-warn-disabled-color;
// border-color: @button-warn-disabled-color ;
}
//&[disabled],
//&[disabled]:hover {
// color: @white;
// background-color: fade(@button-warn-color, 40%);
// border-color: fade(@button-warn-color, 40%);
//}
}
&-error.ant-btn-link:not([disabled='disabled']) {
...
...
@@ -189,11 +190,11 @@
}
}
&-error:not(.ant-btn-link) {
&-error:not(.ant-btn-link
, .is-disabled
) {
color: @white;
background-color: @button-error-color;
border-color: @button-error-color;
border-width: 0;
//
border-width: 0;
&:hover,
&:focus {
...
...
@@ -207,22 +208,29 @@
border-color: @button-error-active-color;
}
&[disabled],
&[disabled]:hover {
color: @white;
background-color: fade(@button-error-color, 40%);
border-color: fade(@button-error-color, 40%);
}
//
&[disabled],
//
&[disabled]:hover {
//
color: @white;
//
background-color: fade(@button-error-color, 40%);
//
border-color: fade(@button-error-color, 40%);
//
}
}
&-background-ghost {
border-width: 1px;
background-color: transparent !important;
&[disabled],
&[disabled]:hover {
color: fade(@white, 40%) !important;
background-color: transparent !important;
border-color: fade(@white, 40%) !important;
}
}
&-dashed&-background-ghost,
&-default&-background-ghost {
color: @button-ghost-color;
background-color: transparent;
border-color: @button-ghost-color;
&:hover,
...
...
@@ -238,8 +246,8 @@
&[disabled],
&[disabled]:hover {
color: fade(@white, 40%);
border-color: fade(@white, 40%);
color: fade(@white, 40%)
!important
;
border-color: fade(@white, 40%)
!important
;
}
}
...
...
@@ -261,7 +269,7 @@
}
}
&-background-ghost&-warn:not(.ant-btn-link) {
&-background-ghost&-warn
ing
:not(.ant-btn-link) {
color: @button-warn-color;
background-color: transparent;
border-color: @button-warn-color;
...
...
src/views/demo/comp/button/index.vue
浏览文件 @
c420174c
...
...
@@ -4,12 +4,12 @@
title=
"基础组件"
content=
" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示(二次封装组件除外)"
>
<template
#rightFooter
>
<a-button
type=
"primary"
>
确认
</a-button>
</
template
>
<a-row
:gutter=
"[20, 20]"
>
<a-col
:xl=
"10"
:lg=
"24"
>
<a-card
title=
"BasicButton Color"
>
<div
class=
"my-2"
>
<h3>
success
</h3>
<div
class=
"py-2"
>
<a-button
color=
"success"
>
成功
</a-button>
<a-button
color=
"success"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
color=
"success"
class=
"ml-2"
loading
>
loading
</a-button>
...
...
@@ -17,6 +17,7 @@
<a-button
color=
"success"
type=
"link"
class=
"ml-2"
loading
>
loading link
</a-button>
<a-button
color=
"success"
type=
"link"
class=
"ml-2"
disabled
>
disabled link
</a-button>
</div>
</div>
<div
class=
"my-2"
>
<h3>
warning
</h3>
...
...
@@ -41,28 +42,22 @@
<div
class=
"my-2"
>
<h3>
ghost
</h3>
<a-button
ghost
color=
"success"
class=
"ml-2"
>
幽灵成功
</a-button>
<a-button
ghost
color=
"warn
"
class=
"ml-2"
>
幽灵警告
</a-button>
<a-button
ghost
color=
"warning
"
class=
"ml-2"
>
幽灵警告
</a-button>
<a-button
ghost
color=
"error"
class=
"ml-2"
>
幽灵错误
</a-button>
<a-button
ghost
type=
"dashed"
color=
"warn"
class=
"ml-2"
>
幽灵警告dashed
</a-button>
<a-button
ghost
type=
"danger"
class=
"ml-2"
>
幽灵危险
</a-button>
<div
class=
"bg-gray-400 p-2 m-2"
>
<h3
class=
"text-white"
>
常规幽灵按钮通常用于有色背景下
</h3>
<a-button
ghost
type=
"primary"
class=
"ml-2"
>
幽灵主要
</a-button>
<a-button
ghost
type=
"dashed"
class=
"ml-2"
>
幽灵dashed
</a-button>
<a-button
ghost
type=
"primary"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
ghost
type=
"primary"
class=
"ml-2"
loading
>
loading
</a-button>
<a-button
ghost
type=
"default"
class=
"ml-2"
>
幽灵默认
</a-button>
<a-button
ghost
type=
"dashed"
color=
"warning"
class=
"ml-2"
>
幽灵警告dashed
</a-button>
<a-button
ghost
danger
class=
"ml-2"
>
幽灵危险
</a-button>
</div>
<!-- antd 按钮不能同时使用ghost和link -->
<!-- <a-button ghost type="link" class="ml-2"> link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" loading> loading link </a-button>-->
<!-- <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>-->
</div>
</a-card>
</a-col>
<a-col
:xl=
"14"
:lg=
"24"
>
<a-card
title=
"BasicButton Types"
>
<div
class=
"my-2"
>
<h3>
primary
</h3>
<a-button
type=
"primary"
preIcon=
"mdi:page-next-outline"
>
主按钮
</a-button>
<a-button
type=
"primary"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
type=
"primary"
class=
"ml-2"
danger
preIcon=
"mdi:page-next-outline"
>
危险
</a-button>
<a-button
type=
"primary"
class=
"ml-2"
loading
>
loading
</a-button>
<a-button
type=
"link"
class=
"ml-2"
>
link
</a-button>
<a-button
type=
"link"
class=
"ml-2"
loading
>
loading link
</a-button>
...
...
@@ -73,6 +68,7 @@
<h3>
default
</h3>
<a-button
type=
"default"
>
默认
</a-button>
<a-button
type=
"default"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
type=
"default"
class=
"ml-2"
danger
>
危险
</a-button>
<a-button
type=
"default"
class=
"ml-2"
loading
>
loading
</a-button>
<a-button
type=
"link"
class=
"ml-2"
>
link
</a-button>
<a-button
type=
"link"
class=
"ml-2"
loading
>
loading link
</a-button>
...
...
@@ -83,14 +79,34 @@
<h3>
dashed
</h3>
<a-button
type=
"dashed"
>
dashed
</a-button>
<a-button
type=
"dashed"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
type=
"dashed"
class=
"ml-2"
danger
>
危险
</a-button>
<a-button
type=
"dashed"
class=
"ml-2"
loading
>
loading
</a-button>
</div>
<div
class=
"my-2"
>
<h3>
ghost 常规幽灵按钮通常用于有色背景下
</h3>
<div
class=
"bg-gray-400 py-2"
>
<a-button
ghost
type=
"primary"
class=
"ml-2"
>
幽灵主要
</a-button>
<a-button
ghost
type=
"default"
class=
"ml-2"
>
幽灵默认
</a-button>
<a-button
ghost
type=
"dashed"
class=
"ml-2"
>
幽灵dashed
</a-button>
<a-button
ghost
type=
"primary"
class=
"ml-2"
disabled
>
禁用
</a-button>
<a-button
ghost
type=
"primary"
class=
"ml-2"
loading
>
loading
</a-button>
</div>
<!-- antd 按钮不能同时使用ghost和link -->
<!--
<a-button
ghost
type=
"link"
class=
"ml-2"
>
link
</a-button>
-->
<!--
<a-button
ghost
type=
"link"
class=
"ml-2"
loading
>
loading link
</a-button>
-->
<!--
<a-button
ghost
type=
"link"
class=
"ml-2"
disabled
>
disabled link
</a-button>
-->
</div>
</a-card>
</a-col>
</a-row>
</PageWrapper>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
import
{
Card
,
Row
,
Col
}
from
'
ant-design-vue
'
;
export
default
defineComponent
({
components
:
{
PageWrapper
},
components
:
{
PageWrapper
,
ACard
:
Card
,
ARow
:
Row
,
ACol
:
Col
},
});
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录