Skip to content

Commit 7a3fd88

Browse files
bin-Kbin-K
committed
feat(button): 补充button icon 图标配置(changelog-needed)
affects: @ued-plus/components ISSUES CLOSED: none
1 parent 9ece088 commit 7a3fd88

File tree

9 files changed

+150
-5
lines changed

9 files changed

+150
-5
lines changed

‎packages/components/src/button/button.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@
66
:disabled="disabled"
77
class="ued-button"
88
>
9+
<ued-icon v-if="icon">
10+
<component :is="icon" />
11+
</ued-icon>
912
<slot />
1013
</component>
1114
</template>
1215

1316
<script lang="ts" setup>
14-
import { computed } from 'vue'
17+
import { UedIcon } from '../icon'
18+
import { computed, ComponentCustomProps } from 'vue'
1519
import './styles/index.scss'
1620
1721
defineOptions({ name: 'UedButton' })
@@ -27,6 +31,7 @@ type ButtonProps = {
2731
bg?: boolean
2832
size?: string
2933
tag?: string
34+
icon?: ComponentCustomProps
3035
}
3136
3237
const buttonProps = defineProps<ButtonProps>()

‎packages/components/src/button/styles/index.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
.ued-button {
44
box-sizing: border-box;
5-
display: inline-block;
5+
display: inline-flex;
6+
height: 32px;
67
padding: 8px 15px;
78
margin: 0 0 0 12px;
89
font-size: var(--ued-font-size-base);
@@ -26,7 +27,10 @@
2627
&:hover {
2728
color: var(--ued-button-hover-text-color);
2829
background-color: var(--ued-button-hover-bg-color);
29-
border-color: var(--ued-button-hover-border-color, var(--ued-button-hover-bg-color));
30+
border-color: var(
31+
--ued-button-hover-border-color,
32+
var(--ued-button-hover-bg-color)
33+
);
3034
}
3135

3236
&:active {
@@ -156,6 +160,7 @@
156160

157161
// 圆形按钮
158162
&.is-circle {
163+
width: 32px;
159164
padding: 8px;
160165
border-radius: 50%;
161166
}
@@ -329,11 +334,17 @@
329334

330335
// 按钮大小
331336
&--large {
337+
--ued-button-size: 40px;
338+
339+
height: var(--ued-button-size);
332340
padding: 12px 19px;
333341
font-size: var(--ued-font-size-base);
334342
}
335343

336344
&--small {
345+
--ued-button-size: 24px;
346+
347+
height: var(--ued-button-size);
337348
padding: 5px 11px;
338349
font-size: var(--ued-font-size-extra-small);
339350
}

‎packages/components/src/icon/styles/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.ued-icon {
2-
--color: var(--ued-text-color-primary);
2+
--color: inherit;
33
--ued-dot-color: var(--ued-color-white);
44
--ued-dot-font-size: var(--ued-font-size-extra-small);
55
--ued-dot-font-weight: var(--ued-font-weight-primary);

‎play/components/button/basic/index.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,25 @@
3232
:key="item.type"
3333
:type="item.type"
3434
circle
35+
>
36+
<ued-icon>
37+
<Plus />
38+
</ued-icon>
39+
</ued-button>
40+
</div>
41+
<div class="button-basic-circle">
42+
<ued-button
43+
v-for="item in buttonType"
44+
:key="item.type"
45+
:type="item.type"
46+
:icon="Plus"
47+
circle
3548
/>
3649
</div>
3750
</div>
3851
</template>
3952
<script lang="ts" setup>
53+
import { Plus } from '@ued-plus/components'
4054
import { PropType } from 'vue'
4155
defineProps({
4256
buttonType: {

‎play/components/button/button-icon/index.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<h2>Icon用法</h2>
3+
<div class="button-content button-icon">
4+
<div class="button-icon-defalut">
5+
<ued-button
6+
v-for="item in buttonType"
7+
:key="item.type"
8+
:type="item.type"
9+
:icon="Plus"
10+
>
11+
{{ item.text }}
12+
</ued-button>
13+
</div>
14+
<div class="button-icon-defalut">
15+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type">
16+
<ued-icon>
17+
<Plus />
18+
</ued-icon>
19+
{{ item.text }}
20+
</ued-button>
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script lang="ts" setup>
26+
import { Plus } from '@ued-plus/components'
27+
import { PropType } from 'vue'
28+
defineProps({
29+
buttonType: {
30+
type: Array as PropType<any>,
31+
default: () => [],
32+
},
33+
})
34+
</script>

‎play/components/button/index.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<button-text :button-type="buttonType" />
77
<button-size :button-type="buttonType" />
88
<button-tag :button-type="buttonType" />
9+
<button-icon :button-type="buttonType" />
910
</div>
1011
</template>
1112

@@ -20,6 +21,7 @@ const ButtonLink = defineAsyncComponent(() => import('./link/index.vue'))
2021
const ButtonText = defineAsyncComponent(() => import('./text/index.vue'))
2122
const ButtonSize = defineAsyncComponent(() => import('./size/index.vue'))
2223
const ButtonTag = defineAsyncComponent(() => import('./tag/index.vue'))
24+
const ButtonIcon = defineAsyncComponent(() => import('./button-icon/index.vue'))
2325
2426
const buttonType = ref([
2527
{ type: '', text: '默认按钮' },
@@ -35,7 +37,7 @@ const buttonType = ref([
3537
&-content {
3638
display: flex;
3739
flex-direction: column;
38-
width: 700px;
40+
width: 750px;
3941
border: 1px solid #e4e7ed;
4042
padding: 30px;
4143
border-radius: 5px;

‎site/docs/components/button/basic/index.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,22 @@
3737
v-for="item in buttonType"
3838
:key="item.type"
3939
:type="item.type"
40+
:icon="Plus"
4041
circle
4142
/>
4243
</div>
44+
<div class="button-basic-circle">
45+
<ued-button
46+
v-for="item in buttonType"
47+
:key="item.type"
48+
:type="item.type"
49+
circle
50+
>
51+
<ued-icon>
52+
<Plus />
53+
</ued-icon>
54+
</ued-button>
55+
</div>
4356
</div>
4457

4558
::: details 显示代码

‎site/docs/components/button/button-icon/index.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
## Icon用法
2+
3+
使用 icon 可以配置按钮icon。
4+
可以包裹 `ued-icon` 组件配置按钮icon
5+
6+
> [!TIP]
7+
> 不建议直接使用svg组件,这需要自己设置相关属性
8+
9+
<div class="button-content button-icon">
10+
<div class="button-icon-defalut">
11+
<ued-button type="primary" :icon="Plus">
12+
主要按钮
13+
</ued-button>
14+
</div>
15+
<div class="button-icon-defalut">
16+
<ued-button type="primary">
17+
<ued-icon>
18+
<Plus />
19+
</ued-icon>
20+
主要按钮
21+
</ued-button>
22+
</div>
23+
</div>
24+
25+
::: details 显示代码
26+
27+
```vue
28+
<template>
29+
<div>
30+
<ued-button
31+
v-for="item in buttonType"
32+
:key="item.type"
33+
:type="item.type"
34+
:icon="Plus"
35+
>
36+
{{ item.text }}
37+
</ued-button>
38+
</div>
39+
<div>
40+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type">
41+
<ued-icon>
42+
<Plus />
43+
</ued-icon>
44+
{{ item.text }}
45+
</ued-button>
46+
</div>
47+
</template>
48+
49+
<script lang="ts" setup>
50+
import { Plus } from '@ued-plus/components'
51+
import { ref } from 'vue'
52+
const buttonType = ref([
53+
{ type: '', text: '默认按钮' },
54+
{ type: 'primary', text: '主要按钮' },
55+
{ type: 'success', text: '成功按钮' },
56+
{ type: 'warning', text: '警告按钮' },
57+
{ type: 'danger', text: '危险按钮' },
58+
{ type: 'info', text: '信息按钮' },
59+
])
60+
</script>
61+
```
62+
63+
:::

‎site/docs/components/button/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
常用的操作按钮
44

55
<script setup>
6+
import { Plus } from "@ued-plus/components"
67
import { ref } from 'vue'
78
const buttonType = ref([
89
{ type: '', text: '默认按钮' },
@@ -24,6 +25,8 @@ const buttonType = ref([
2425

2526
<!--@include: ./tag/index.md-->
2627

28+
<!--@include: ./button-icon/index.md-->
29+
2730
<style>
2831
.button-content {
2932
display: flex;

0 commit comments

Comments
 (0)