Skip to content

Commit 0513d7f

Browse files
chuanshuoyechuanshuoye
committed
feat: add popper component
1 parent 5c24057 commit 0513d7f

File tree

5 files changed

+224
-105
lines changed

5 files changed

+224
-105
lines changed

‎example/components/index.vue

+44-44
Original file line numberDiff line numberDiff line change
@@ -10,98 +10,95 @@
1010
<za-panel>
1111
<za-panel-header title="数据录入(12)"/>
1212
<za-panel-body>
13-
<za-cell hasArrow @click="$router.push('/input')">
14-
文本框 Input
15-
</za-cell>
16-
<za-cell hasArrow @click="$router.push('/radio')">
17-
单选框 Radio
13+
<za-cell hasArrow @click="$router.push('/calendar')">
14+
日历 Calendar
1815
</za-cell>
1916
<za-cell hasArrow @click="$router.push('/checkbox')">
2017
复选框 Checkbox
2118
</za-cell>
19+
<za-cell hasArrow @click="$router.push('/date-picker')">
20+
日期选择器 DatePicker
21+
</za-cell>
22+
<za-cell hasArrow @click="$router.push('/file-picker')">
23+
文件选择器 FilePicker
24+
</za-cell>
25+
<za-cell hasArrow @click="$router.push('/input')">
26+
文本框 Input
27+
</za-cell>
28+
<za-cell hasArrow @click="$router.push('/keyboard')">
29+
虚拟键盘 Keyboard
30+
</za-cell>
2231
<za-cell hasArrow @click="$router.push('/picker')">
2332
选择器 Picker
2433
</za-cell>
25-
<za-cell hasArrow @click="$router.push('/stack-picker')">
26-
层叠选择器 StackPicker
27-
</za-cell>
28-
<za-cell hasArrow @click="$router.push('/date-picker')">
29-
日期选择器 DatePicker
34+
<za-cell hasArrow @click="$router.push('/radio')">
35+
单选框 Radio
3036
</za-cell>
31-
<za-cell hasArrow @click="$router.push('/calendar')">
32-
日历 Calendar
37+
<za-cell hasArrow @click="$router.push('/search-bar')">
38+
搜索栏 SearchBar
3339
</za-cell>
3440
<za-cell hasArrow @click="$router.push('/slider')">
3541
滑动输入框 Slider
3642
</za-cell>
43+
<za-cell hasArrow @click="$router.push('/stack-picker')">
44+
层叠选择器 StackPicker
45+
</za-cell>
3746
<za-cell hasArrow @click="$router.push('/stepper')">
3847
步进器 Stepper
3948
</za-cell>
4049
<za-cell hasArrow @click="$router.push('/switch')">
4150
开关 Switch
4251
</za-cell>
43-
<za-cell hasArrow @click="$router.push('/search-bar')">
44-
搜索栏 SearchBar
45-
</za-cell>
46-
<za-cell hasArrow @click="$router.push('/file-picker')">
47-
文件选择器 FilePicker
48-
</za-cell>
49-
<za-cell hasArrow @click="$router.push('/keyboard')">
50-
虚拟键盘 Keyboard
51-
</za-cell>
5252
</za-panel-body>
5353
</za-panel>
5454

5555
<za-panel>
5656
<za-panel-header title="操作反馈(8)"/>
5757
<za-panel-body>
58-
<za-cell hasArrow @click="$router.push('/button')">
59-
按钮 Button
60-
</za-cell>
6158
<za-cell hasArrow @click="$router.push('/action-sheet')">
6259
动作面板 ActionSheet
6360
</za-cell>
61+
<za-cell hasArrow @click="$router.push('/activity-indicator')">
62+
活动指示器 ActivityIndicator
63+
</za-cell>
64+
<za-cell hasArrow @click="$router.push('/button')">
65+
按钮 Button
66+
</za-cell>
6467
<za-cell hasArrow @click="$router.push('/message')">
6568
消息 Message
6669
</za-cell>
6770
<za-cell hasArrow @click="$router.push('/modal')">
6871
模态框 Modal
6972
</za-cell>
70-
<za-cell hasArrow @click="$router.push('/toast')">
71-
轻提示 Toast
72-
</za-cell>
7373
<za-cell hasArrow @click="$router.push('/pull')">
7474
上拉加载下拉刷新 Pull
7575
</za-cell>
7676
<za-cell hasArrow @click="$router.push('/swipe-action')">
7777
滑动操作 SwipeAction
7878
</za-cell>
79-
<za-cell hasArrow @click="$router.push('/activity-indicator')">
80-
活动指示器 ActivityIndicator
79+
<za-cell hasArrow @click="$router.push('/toast')">
80+
轻提示 Toast
8181
</za-cell>
8282
</za-panel-body>
8383
</za-panel>
8484
<za-panel>
8585
<za-panel-header title="数据展示(8)"/>
8686
<za-panel-body>
87-
<za-cell hasArrow @click="$router.push('/collapse')">
88-
折叠面板 Collapse
89-
</za-cell>
9087
<za-cell hasArrow @click="$router.push('/badge')">
9188
徽标 Badge
9289
</za-cell>
90+
<za-cell hasArrow @click="$router.push('/carousel')">
91+
走马灯 Carousel
92+
</za-cell>
9393
<za-cell hasArrow @click="$router.push('/cell')">
9494
列表项 Cell
9595
</za-cell>
96+
<za-cell hasArrow @click="$router.push('/collapse')">
97+
折叠面板 Collapse
98+
</za-cell>
9699
<za-cell hasArrow @click="$router.push('/icon')">
97100
图标 Icon
98101
</za-cell>
99-
<za-cell hasArrow @click="$router.push('/carousel')">
100-
走马灯 Carousel
101-
</za-cell>
102-
<za-cell hasArrow @click="$router.push('/progress')">
103-
进度条 Progress
104-
</za-cell>
105102
<za-cell hasArrow @click="$router.push('/notice-bar')">
106103
通知栏 NoticeBar
107104
</za-cell>
@@ -111,23 +108,26 @@
111108
<za-cell hasArrow @click="$router.push('/popper')">
112109
气泡层 Popper
113110
</za-cell>
111+
<za-cell hasArrow @click="$router.push('/progress')">
112+
进度条 Progress
113+
</za-cell>
114114
</za-panel-body>
115115
</za-panel>
116116

117117
<za-panel>
118118
<za-panel-header title="导航(3)"/>
119119
<za-panel-body>
120+
<za-cell hasArrow @click="$router.push('/nav-bar')">
121+
导航栏 NavBar
122+
</za-cell>
120123
<za-cell hasArrow @click="$router.push('/popup')">
121124
弹出框 Popup
122125
</za-cell>
123-
<za-cell hasArrow @click="$router.push('/tabs')">
124-
标签页 Tabs
125-
</za-cell>
126-
<za-cell hasArrow @click="$router.push('/tab-bar')">
126+
<za-cell hasArrow @click="$router.push('/tab-bar')">
127127
标签栏 TabBar
128128
</za-cell>
129-
<za-cell hasArrow @click="$router.push('/nav-bar')">
130-
导航栏 NavBar
129+
<za-cell hasArrow @click="$router.push('/tabs')">
130+
标签页 Tabs
131131
</za-cell>
132132
</za-panel-body>
133133
</za-panel>

‎site/demos.js

+53-52
Original file line numberDiff line numberDiff line change
@@ -16,37 +16,50 @@ module.exports = {
1616
components: {
1717
form: [
1818
{
19-
name: 'Input',
20-
description: '文本框',
21-
},
22-
{
23-
name: 'Radio',
24-
description: '单选框',
19+
name: 'Calendar',
20+
description: '日历',
2521
},
2622
{
2723
name: 'Checkbox',
2824
description: '复选框',
2925
},
3026
{
31-
name: 'Picker',
32-
description: '选择器',
27+
name: 'DatePicker',
28+
description: '日期选择器',
3329
},
3430
{
35-
name: 'StackPicker',
36-
description: '层叠选择器',
31+
name: 'FilePicker',
32+
description: '文件选择器',
3733
},
3834
{
39-
name: 'DatePicker',
40-
description: '日期选择器',
35+
name: 'Input',
36+
description: '文本框',
4137
},
38+
4239
{
43-
name: 'Calendar',
44-
description: '日历',
40+
name: 'Keyboard',
41+
description: '虚拟键盘',
42+
},
43+
{
44+
name: 'Picker',
45+
description: '选择器',
46+
},
47+
{
48+
name: 'Radio',
49+
description: '单选框',
50+
},
51+
{
52+
name: 'SearchBar',
53+
description: '搜索栏',
4554
},
4655
{
4756
name: 'Slider',
4857
description: '滑动输入条',
4958
},
59+
{
60+
name: 'StackPicker',
61+
description: '层叠选择器',
62+
},
5063
{
5164
name: 'Stepper',
5265
description: '步进器',
@@ -55,28 +68,20 @@ module.exports = {
5568
name: 'Switch',
5669
description: '开关',
5770
},
71+
],
72+
feedback: [
5873
{
59-
name: 'SearchBar',
60-
description: '搜索栏',
61-
},
62-
{
63-
name: 'FilePicker',
64-
description: '文件选择器',
74+
name: 'ActionSheet',
75+
description: '动作面板',
6576
},
6677
{
67-
name: 'Keyboard',
68-
description: '虚拟键盘',
78+
name: 'ActivityIndicator',
79+
description: '活动指示器',
6980
},
70-
],
71-
feedback: [
7281
{
7382
name: 'Button',
7483
description: '按钮',
7584
},
76-
{
77-
name: 'ActionSheet',
78-
description: '动作面板',
79-
},
8085
{
8186
name: 'Message',
8287
description: '消息',
@@ -85,10 +90,6 @@ module.exports = {
8590
name: 'Modal',
8691
description: '模态框',
8792
},
88-
{
89-
name: 'Toast',
90-
description: '轻提示',
91-
},
9293
{
9394
name: 'Pull',
9495
description: '上拉加载下拉刷新',
@@ -98,34 +99,30 @@ module.exports = {
9899
description: '滑动操作',
99100
},
100101
{
101-
name: 'ActivityIndicator',
102-
description: '活动指示器',
102+
name: 'Toast',
103+
description: '轻提示',
103104
},
104105
],
105106
view: [
106-
{
107-
name: 'Collapse',
108-
description: '折叠面板',
109-
},
110107
{
111108
name: 'Badge',
112109
description: '徽标',
113110
},
114111
{
115-
name: 'Cell',
116-
description: '列表项',
112+
name: 'Carousel',
113+
description: '走马灯',
117114
},
118115
{
119-
name: 'Icon',
120-
description: '图标',
116+
name: 'Cell',
117+
description: '列表项',
121118
},
122119
{
123-
name: 'Carousel',
124-
description: '走马灯',
120+
name: 'Collapse',
121+
description: '折叠面板',
125122
},
126123
{
127-
name: 'Progress',
128-
description: '进度条',
124+
name: 'Icon',
125+
description: '图标',
129126
},
130127
{
131128
name: 'NoticeBar',
@@ -139,23 +136,27 @@ module.exports = {
139136
name: 'Popper',
140137
description: '气泡层',
141138
},
139+
{
140+
name: 'Progress',
141+
description: '进度条',
142+
},
142143
],
143144
navigation: [
144145
{
145-
name: 'Popup',
146-
description: '弹出框',
146+
name: 'NavBar',
147+
description: '导航栏',
147148
},
148149
{
149-
name: 'Tabs',
150-
description: '标签页',
150+
name: 'Popup',
151+
description: '弹出框',
151152
},
152153
{
153154
name: 'TabBar',
154155
description: '标签栏',
155156
},
156157
{
157-
name: 'NavBar',
158-
description: '导航栏',
158+
name: 'Tabs',
159+
description: '标签页',
159160
},
160161
],
161162
other: [

‎src/popper/src/popper.vue

+5-9
Original file line numberDiff line numberDiff line change
@@ -202,13 +202,11 @@ export default {
202202
203203
this.mounted = true;
204204
205-
this.$nextTick(() => {
206-
if (!currentVisible) {
207-
this.handleOpen();
208-
} else {
209-
this.handleClose();
210-
}
211-
});
205+
if (!currentVisible) {
206+
this.handleOpen();
207+
} else {
208+
this.handleClose();
209+
}
212210
},
213211
214212
handleOpen() {
@@ -382,8 +380,6 @@ export default {
382380
<div
383381
ref="reference"
384382
class={`${prefixCls}__inner`}
385-
on-click={handleClick}
386-
on-context-menu={handleClick}
387383
>
388384
{this.$slots.default}
389385
</div>

0 commit comments

Comments
 (0)