Skip to content

Commit 6b2c49e

Browse files
xxxsfxxxsf
committed
feat: 重构tabbar组件
1 parent 783a11e commit 6b2c49e

File tree

10 files changed

+295
-682
lines changed

10 files changed

+295
-682
lines changed

‎packages/quarkd/src/button/doc.zh-CN.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,18 @@ import "quarkd/lib/button";
7272
```html
7373
<quark-button loading type="danger" loadtype="circular">加载中...</quark-button>
7474
<quark-button loading type="warning">加载中...</quark-button>
75-
<quark-button @click="changeLoading" :loading="isLoading" type="success"
76-
>Click me!</quark-button
77-
>
75+
<!-- @click="changeLoading" -->
76+
<quark-button type="success" onclick="changeLoading()">Click me!</quark-button>
7877
```
7978

8079
```js
80+
function changeLoading() {
81+
btn.loading = true;
82+
setTimeout(() => {
83+
btn.loadng = false;
84+
}, 2000); // 点击2s后loading消失
85+
}
86+
8187
export default {
8288
setup() {
8389
const isLoading = ref(false);
@@ -103,12 +109,7 @@ export default {
103109
通过 `icon` 属性设置图标。
104110

105111
```html
106-
<quark-button
107-
type="primary"
108-
icon="https://m.hellobike.com/resource/helloyun/16682/Agnve_tel%20(1).png"
109-
>
110-
喜欢
111-
</quark-button>
112+
<quark-button type="primary" icon="https://xx.png"> 喜欢 </quark-button>
112113
```
113114

114115
## API

‎packages/quarkd/src/tabbar/demo.vue

Lines changed: 48 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,57 @@
11
<template>
22
<div class="demo no-padding">
33
<h2>{{ translate("title.basic") }}</h2>
4-
<quark-tabbar fixed="false">
5-
<quark-tabbar-item :label="translate('tabbar.home')">
6-
<quark-icon-home slot="icon" size="20" />
4+
<quark-tabbar @change="onChange">
5+
<quark-tabbar-item>
6+
<quark-icon-home size="20" />
7+
<div>{{ translate("tabbar.home") }}</div>
78
</quark-tabbar-item>
8-
<quark-tabbar-item :label="translate('tabbar.user')">
9-
<quark-icon-user slot="icon" size="20" />
9+
<quark-tabbar-item>
10+
<quark-icon-user size="20" />
11+
<div>{{ translate("tabbar.user") }}</div>
1012
</quark-tabbar-item>
11-
<quark-tabbar-item :label="translate('tabbar.tel')">
12-
<quark-icon-tel slot="icon" size="20" />
13+
<quark-tabbar-item>
14+
<quark-icon-tel size="20" />
15+
<div>{{ translate("tabbar.tel") }}</div>
1316
</quark-tabbar-item>
1417
</quark-tabbar>
1518

16-
<h2>{{ translate("title.name") }}</h2>
17-
<quark-tabbar value="tel" fixed="false">
18-
<quark-tabbar-item :label="translate('tabbar.home')" name="home">
19-
<quark-icon-home slot="icon" size="20" />
20-
</quark-tabbar-item>
21-
<quark-tabbar-item :label="translate('tabbar.user')" name="user">
22-
<quark-icon-user slot="icon" size="20" />
23-
</quark-tabbar-item>
24-
<quark-tabbar-item :label="translate('tabbar.tel')" name="tel">
25-
<quark-icon-tel slot="icon" size="20" />
26-
</quark-tabbar-item>
27-
</quark-tabbar>
28-
29-
<h2>{{ translate("title.badge") }}</h2>
30-
<quark-tabbar value="1" :fixed="false">
31-
<quark-tabbar-item badgecontent="20" :label="translate('tabbar.home')">
32-
<quark-icon-home slot="icon" size="20" />
33-
</quark-tabbar-item>
34-
<quark-tabbar-item :label="translate('tabbar.user')">
35-
<quark-icon-user slot="icon" size="20" />
36-
</quark-tabbar-item>
37-
<quark-tabbar-item :label="translate('tabbar.tel')">
38-
<quark-icon-tel slot="icon" size="20" />
39-
</quark-tabbar-item>
19+
<h2>{{ translate("title.noicon") }}</h2>
20+
<quark-tabbar>
21+
<quark-tabbar-item>{{ translate("tabbar.home") }}</quark-tabbar-item>
22+
<quark-tabbar-item>{{ translate("tabbar.user") }}</quark-tabbar-item>
23+
<quark-tabbar-item>{{ translate("tabbar.tel") }}</quark-tabbar-item>
4024
</quark-tabbar>
4125

42-
<h2>{{ translate("title.icon") }}</h2>
43-
<quark-tabbar :fixed="false" @change="onChange2">
44-
<quark-tabbar-item :label="translate('tabbar.home')">
45-
<quark-icon-home slot="icon" size="20" />
46-
</quark-tabbar-item>
47-
<quark-tabbar-item :label="translate('tabbar.user')">
48-
<img
49-
slot="icon"
50-
style="height: 20px"
51-
:src="data.activeIndex === '1' ? data.img1 : data.img2"
52-
/>
53-
</quark-tabbar-item>
54-
<quark-tabbar-item :label="translate('tabbar.tel')">
55-
<quark-icon-tel slot="icon" size="20" />
56-
</quark-tabbar-item>
57-
</quark-tabbar>
58-
59-
<h2>{{ translate("title.color") }}</h2>
60-
<quark-tabbar :fixed="false" inactivecolor="#000" activeColor="#ee0a24">
61-
<quark-tabbar-item :label="translate('tabbar.home')">
62-
<quark-icon-home slot="icon" size="20" />
26+
<h2>{{ translate("title.name") }}</h2>
27+
<quark-tabbar value="tel">
28+
<quark-tabbar-item name="home">
29+
<quark-icon-home size="20" />
30+
<div>{{ translate("tabbar.home") }}</div>
6331
</quark-tabbar-item>
64-
<quark-tabbar-item :label="translate('tabbar.user')">
65-
<quark-icon-user slot="icon" size="20" />
32+
<quark-tabbar-item name="user">
33+
<quark-icon-user size="20" />
34+
<div>{{ translate("tabbar.user") }}</div>
6635
</quark-tabbar-item>
67-
<quark-tabbar-item :label="translate('tabbar.tel')">
68-
<quark-icon-tel slot="icon" size="20" />
36+
<quark-tabbar-item name="tel">
37+
<quark-icon-tel size="20" />
38+
<div>{{ translate("tabbar.tel") }}</div>
6939
</quark-tabbar-item>
7040
</quark-tabbar>
7141

72-
<h2>{{ translate("title.event") }}</h2>
73-
<quark-tabbar @change="onChange1" :fixed="false">
74-
<quark-tabbar-item :label="translate('tabbar.home')">
75-
<quark-icon-home slot="icon" size="20" />
42+
<h2>{{ translate("title.fixed") }}</h2>
43+
<quark-tabbar @change="onChange" fixed>
44+
<quark-tabbar-item>
45+
<quark-icon-home size="20" />
46+
<div>{{ translate("tabbar.home") }}</div>
7647
</quark-tabbar-item>
77-
<quark-tabbar-item :label="translate('tabbar.user')">
78-
<quark-icon-user slot="icon" size="20" />
48+
<quark-tabbar-item>
49+
<quark-icon-user size="20" />
50+
<div>{{ translate("tabbar.user") }}</div>
7951
</quark-tabbar-item>
80-
<quark-tabbar-item :label="translate('tabbar.tel')">
81-
<quark-icon-tel slot="icon" size="20" />
52+
<quark-tabbar-item>
53+
<quark-icon-tel size="20" />
54+
<div>{{ translate("tabbar.tel") }}</div>
8255
</quark-tabbar-item>
8356
</quark-tabbar>
8457
</div>
@@ -106,11 +79,12 @@ export default createDemo({
10679
"zh-CN": {
10780
title: {
10881
basic: "基础用法",
109-
name: "通过名称匹配",
82+
noicon: "不带图标",
83+
name: "默认激活菜单",
11084
badge: "徽标提示",
111-
icon: "自定义图标",
11285
color: "自定义颜色",
113-
event: "自定义切换事件",
86+
event: "自定义切换事件(可制定路由切换)",
87+
fixed: "固定底部",
11488
},
11589
tabbar: {
11690
home: "首页",
@@ -121,11 +95,12 @@ export default createDemo({
12195
"en-US": {
12296
title: {
12397
basic: "Basic Usage",
124-
name: "Match by Name",
98+
noicon: "No Icon",
99+
name: "Default Active menu",
125100
badge: "Badge Tips",
126-
icon: "Custom Icon",
127101
color: "Custom Color",
128102
event: "Custom Change Event",
103+
fixed: "Fixed",
129104
},
130105
tabbar: {
131106
home: "Home",
@@ -135,16 +110,14 @@ export default createDemo({
135110
},
136111
});
137112
});
138-
const onChange2 = ({ detail }) => {
139-
data.value.activeIndex = detail.value;
140-
};
141-
const onChange1 = ({ detail }) => {
113+
114+
const onChange = ({ detail }) => {
142115
Toast.text(`当前选中：${detail.value}`);
143116
};
117+
144118
return {
145119
data,
146-
onChange1,
147-
onChange2,
120+
onChange,
148121
translate,
149122
};
150123
},

0 commit comments

Comments
 (0)