Skip to content

Commit fdeb55a

Browse files
coderjamcoderjam
committed
button组件完善，加level、disabled、loading
1 parent 8da9000 commit fdeb55a

File tree

2 files changed

+171
-47
lines changed

2 files changed

+171
-47
lines changed

‎src/components/ButtonDemo.vue

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,69 @@
11
<template>
2+
<div>Button 示例</div>
3+
<h1>示例1</h1>
24
<div>
3-
<h1>Button 示例 1</h1>
5+
<Button @click="onClick">你好</Button>
6+
<Button theme="button">你好</Button>
7+
<Button theme="link">你好</Button>
8+
<Button theme="text">你好</Button>
9+
</div>
10+
<h1>示例2</h1>
11+
<div>
12+
<div>
13+
<Button size="big">大大大</Button>
14+
<Button>普普通</Button>
15+
<Button size="small">小小小</Button>
16+
</div>
17+
<div>
18+
<Button theme="link" size="big">大大大</Button>
19+
<Button theme="link">普普通</Button>
20+
<Button size="small" theme="link">小小小</Button>
21+
</div>
22+
<div>
23+
<Button size="big" theme="text">大大大</Button>
24+
<Button theme="text">普普通</Button>
25+
<Button size="small" theme="text">小小小</Button>
26+
</div>
27+
</div>
28+
<h1>示例3</h1>
29+
<div>
30+
<div>
31+
<Button level="main">主要按钮</Button>
32+
<Button>普通按钮</Button>
33+
<Button level="danger">危险按钮</Button>
34+
</div>
435
<div>
5-
<Button @click="onClick">你好</Button>
6-
<Button @click="onClick" theme="button">你好</Button>
7-
<Button @click="onClick" theme="text">你好</Button>
8-
<Button @click="onClick" theme="link">你好</Button>
36+
<Button theme="link" level="main">主要链接按钮</Button>
37+
<Button theme="link">普通链接按钮</Button>
38+
<Button theme="link" level="danger">危险链接按钮</Button>
939
</div>
10-
<h1>Button 示例 2</h1>
1140
<div>
12-
<Button>你好</Button>
13-
<Button size="big">你好</Button>
14-
<Button size="small">你好</Button>
15-
<Button size="mini">你好</Button>
41+
<Button theme="text" level="main">主要文字按钮</Button>
42+
<Button theme="text">普通文字按钮</Button>
43+
<Button theme="text" level="danger">危险文字按钮</Button>
1644
</div>
1745
</div>
46+
<h1>示例4</h1>
47+
<div>
48+
<Button disabled>禁用按钮</Button>
49+
<Button theme="link" disabled>禁用链接按钮</Button>
50+
<Button theme="text" disabled>禁用按钮</Button>
51+
</div>
52+
<h1>示例5</h1>
53+
<div>
54+
<Button loading>加载中</Button>
55+
<Button>加载完毕</Button>
56+
</div>
1857
</template>
1958
<script lang="ts">
20-
import Button from '../lib/Button.vue'
59+
import Button from "../lib/Button.vue";
2160
export default {
22-
components:{ Button },
23-
setup(){
24-
const onClick = ()=>{
25-
console.log('hi');
26-
}
27-
28-
return { onClick }
29-
}
30-
}
61+
components: { Button },
62+
setup() {
63+
const onClick = () => {
64+
console.log("hi");
65+
};
66+
return { onClick };
67+
},
68+
};
3169
</script>

‎src/lib/Button.vue

Lines changed: 113 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,55 @@
11
<template>
2-
<button class="zhiwei-button" :class="classes">
3-
<slot></slot>
4-
</button>
2+
<button class="zhiwei-button" :class="classes">
3+
<span v-if="loading" class="zhiwei-loadingIndicator"></span>
4+
<slot />
5+
</button>
56
</template>
6-
77
<script lang="ts">
8-
import { computed } from 'vue'
8+
import { computed } from "vue";
99
export default {
10-
props:{
11-
theme:{
12-
type:String,
13-
default: 'button'
10+
props: {
11+
theme: {
12+
type: String,
13+
default: "button",
14+
},
15+
size: {
16+
type: String,
17+
default: "normal",
1418
},
15-
size:{
19+
level: {
1620
type: String,
17-
default: 'normal'
21+
default: "normal",
22+
},
23+
disabled: {
24+
type: Boolean,
25+
default: false,
26+
},
27+
loading: {
28+
type: Boolean,
29+
default: false
1830
}
1931
},
20-
setup(props){
21-
const { theme,size } = props
22-
const classes = computed(()=>{
32+
setup(props) {
33+
const { theme, size, level } = props;
34+
const classes = computed(() => {
2335
return {
24-
[`zhiwei-theme-${theme}`]:theme,
25-
[`zhiwei-size-${size}`]:size
26-
}
27-
})
28-
return {
29-
classes
30-
}
31-
}
36+
[`zhiwei-theme-${theme}`]: theme,
37+
[`zhiwei-size-${size}`]: size,
38+
[`zhiwei-level-${level}`]: level
39+
};
40+
});
41+
return { classes };
42+
},
3243
};
3344
</script>
34-
3545
<style lang="scss">
3646
$h: 32px;
3747
$border-color: #d9d9d9;
3848
$color: #333;
3949
$blue: #40a9ff;
4050
$radius: 4px;
51+
$red: red;
52+
$grey: grey;
4153
.zhiwei-button {
4254
box-sizing: border-box;
4355
height: $h;
@@ -52,6 +64,7 @@ $radius: 4px;
5264
border: 1px solid $border-color;
5365
border-radius: $radius;
5466
box-shadow: 0 1px 0 fade-out(black, 0.95);
67+
transition: background 250ms;
5568
& + & {
5669
margin-left: 8px;
5770
}
@@ -79,6 +92,7 @@ $radius: 4px;
7992
border-color: transparent;
8093
box-shadow: none;
8194
color: inherit;
95+
background-color: transparent;
8296
&:hover,
8397
&:focus {
8498
background: darken(white, 5%);
@@ -94,10 +108,82 @@ $radius: 4px;
94108
height: 20px;
95109
padding: 0 4px;
96110
}
97-
&.zhiwei-size-mini {
98-
font-size: 10px;
99-
height: 16px;
100-
padding: 0 2px;
111+
&.zhiwei-theme-button {
112+
&.zhiwei-level-main {
113+
background: $blue;
114+
color: white;
115+
border-color: $blue;
116+
&:hover,
117+
&:focus {
118+
background: darken($blue, 10%);
119+
border-color: darken($blue, 10%);
120+
}
121+
}
122+
&.zhiwei-level-danger {
123+
background: $red;
124+
border-color: $red;
125+
color: white;
126+
&:hover,
127+
&:focus {
128+
background: darken($red, 10%);
129+
border-color: darken($red, 10%);
130+
}
131+
}
132+
}
133+
&.zhiwei-theme-link {
134+
&.zhiwei-level-danger {
135+
color: $red;
136+
&:hover,
137+
&:focus {
138+
color: darken($red, 10%);
139+
}
140+
}
141+
}
142+
&.zhiwei-theme-text {
143+
&.zhiwei-level-main {
144+
color: $blue;
145+
&:hover,
146+
&:focus {
147+
color: darken($blue, 10%);
148+
}
149+
}
150+
&.zhiwei-level-danger {
151+
color: $red;
152+
&:hover,
153+
&:focus {
154+
color: darken($red, 10%);
155+
}
156+
}
101157
}
158+
&.zhiwei-theme-button {
159+
&[disabled] {
160+
cursor: not-allowed;
161+
color: $grey;
162+
&:hover {
163+
border-color: $grey;
164+
}
165+
}
166+
}
167+
&.zhiwei-theme-link, &.zhiwei-theme-text {
168+
&[disabled] {
169+
cursor: not-allowed;
170+
color: $grey;
171+
}
172+
}
173+
> .zhiwei-loadingIndicator{
174+
width: 14px;
175+
height: 14px;
176+
display: inline-block;
177+
margin-right: 4px;
178+
border-radius: 8px;
179+
border-color: $blue $blue $blue transparent;
180+
border-style: solid;
181+
border-width: 2px;
182+
animation: zhiwei-spin 1s infinite linear;
183+
}
184+
}
185+
@keyframes zhiwei-spin {
186+
0%{transform: rotate(0deg)}
187+
100%{transform: rotate(360deg)}
102188
}
103189
</style>

0 commit comments

Comments
 (0)