Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
Y
yudao-admin-ui
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
licheng
yudao-admin-ui
Commits
5b7b326d
Commit
5b7b326d
authored
Sep 01, 2025
by
licheng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 新增图标按钮组件
parent
8db54c2d
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
57 additions
and
0 deletions
+57
-0
icon_btn.png
src/assets/imgs/button/icon_btn.png
+0
-0
IconButton.vue
src/components/A_NewComponents/Button/IconButton.vue
+57
-0
No files found.
src/assets/imgs/button/icon_btn.png
0 → 100644
View file @
5b7b326d
5.64 KB
src/components/A_NewComponents/Button/IconButton.vue
0 → 100644
View file @
5b7b326d
<
template
>
<div
class=
"icon-btn"
:class=
"
{ disabled: disabled }"
:style="{ width: size + 'px', height: size + 'px' }"
>
<Icon
class=
"icon"
:icon=
"icon"
:size=
"size * 0.5"
/>
</div>
</
template
>
<
script
setup
lang=
"ts"
>
interface
IconButtonProps
{
size
?:
number
icon
:
string
disabled
?:
boolean
}
withDefaults
(
defineProps
<
IconButtonProps
>
(),
{
size
:
40
,
icon
:
''
,
disabled
:
false
})
</
script
>
<
style
lang=
"scss"
scoped
>
.icon-btn
{
background-image
:
url('@/assets/imgs/button/icon_btn.png')
;
background-size
:
100%
100%
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
cursor
:
pointer
;
transition
:
filter
0.2s
;
.icon
{
color
:
#ffffff
b5
;
}
/* hover 变亮 */
&
:hover
{
filter
:
brightness
(
1.2
);
background-color
:
transparent
;
}
/* 按下变暗 */
&
:active:not
(
.disabled
)
{
filter
:
brightness
(
0.95
);
background-color
:
transparent
;
}
/* 禁用状态 */
&
.disabled
{
filter
:
brightness
(
0.9
);
cursor
:
not-allowed
;
}
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment