Skip to content

Commit c07a615

Browse files
KuangPFKuangPF
committed
refactor(feedback): msg, picker and dialog
1 parent 8b47429 commit c07a615

File tree

11 files changed

+221
-57
lines changed

11 files changed

+221
-57
lines changed

‎src/css/app.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
page {
2+
height: 100%;
23
background-color: #ededed;
34
font-size: 16px;
45
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;

‎src/main.json

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
"pages/msg/main",
2828
"pages/msg-fail/main",
2929
"pages/msg-success/main",
30+
"pages/msg-text/main",
31+
"pages/msg-text-primary/main",
3032
"pages/picker/main",
3133
"pages/mulLinkagePicker/main",
3234
"pages/toast/main",

‎src/pages/dialog/index.vue

+43-15
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,30 @@
66
</div>
77
<div class="page__bd">
88
<div class="weui-btn-area">
9-
<button class="weui-btn" type="default" @click="openConfirm">Confirm Dialog</button>
10-
<button class="weui-btn" type="default" @click="openAlert">Alert Dialog</button>
9+
<button class="weui-btn" type="default" @click="openConfirm">原生 Dialog</button>
10+
<button class="weui-btn" type="default" @click="openDialog">模拟 Dialog</button>
11+
</div>
12+
<div :class="['weui-demo-dialog', istrue ? 'weui-demo-dialog_show' : '']">
13+
<div class="weui-mask" @click="closeDialog"></div>
14+
<div class="weui-dialog__wrp" @click="closeDialog">
15+
<div class="weui-dialog" catchtouchmove>
16+
<div class="weui-dialog__hd">
17+
<div class="weui-dialog__title">标题</div>
18+
</div>
19+
<div class="weui-dialog__bd">
20+
<image
21+
class="weui-article__img"
22+
src="/static/images/pic_article.png"
23+
mode="aspectFill"
24+
style="max-width:100%;"
25+
/>
26+
</div>
27+
<div class="weui-dialog__ft">
28+
<div class="weui-dialog__btn weui-dialog__btn_default" @click="closeDialog">取消</div>
29+
<div class="weui-dialog__btn" @click="closeDialog">确定</div>
30+
</div>
31+
</div>
32+
</div>
1133
</div>
1234
</div>
1335
</div>
@@ -17,7 +39,7 @@
1739
export default {
1840
data() {
1941
return {
20-
42+
istrue: false
2143
}
2244
},
2345
methods: {
@@ -37,21 +59,27 @@ export default {
3759
}
3860
});
3961
},
40-
openAlert() {
41-
wx.showModal({
42-
content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
43-
showCancel: false,
44-
success: function (res) {
45-
if (res.confirm) {
46-
console.log('用户点击确定')
47-
}
48-
}
49-
});
62+
openDialog() {
63+
this.istrue = true
64+
},
65+
closeDialog() {
66+
this.istrue = false
5067
}
5168
}
5269
}
5370
</script>
5471

55-
<style>
56-
72+
<style scoped>
73+
page {
74+
background-color: #ffffff;
75+
}
76+
.weui-demo-dialog {
77+
visibility: hidden;
78+
opacity: 0;
79+
transition: opacity 0.3s;
80+
}
81+
.weui-demo-dialog_show {
82+
visibility: visible;
83+
opacity: 1;
84+
}
5785
</style>

‎src/pages/msg-fail/index.vue

+34-20
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
<template>
22
<div class="page">
33
<div class="weui-msg">
4-
<div class="weui-msg__icon-area">
5-
<icon type="warn" size="93"></icon>
4+
<div class="weui-msg__icon-area">
5+
<icon type="warn" size="64"></icon>
6+
</div>
7+
<div class="weui-msg__text-area">
8+
<div class="weui-msg__title">操作失败</div>
9+
<div class="weui-msg__desc">
10+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
11+
<navigator url class="weui-msg__link">文字链接</navigator>
612
</div>
7-
<div class="weui-msg__text-area">
8-
<div class="weui-msg__title">操作失败</div>
9-
<div class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></div>
13+
</div>
14+
<div class="weui-msg__tips-area">
15+
<div class="weui-msg__tips">
16+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
17+
<navigator url class="weui-msg__link">文字链接</navigator>
1018
</div>
11-
<div class="weui-msg__opr-area">
12-
<div class="weui-btn-area">
13-
<button class="weui-btn" type="primary">推荐操作</button>
14-
<button class="weui-btn" type="default">辅助操作</button>
15-
</div>
19+
</div>
20+
<div class="weui-msg__opr-area">
21+
<div class="weui-btn-area">
22+
<button class="weui-btn" type="default">辅助操作</button>
1623
</div>
17-
<div class="weui-msg__extra-area">
18-
<div class="weui-footer">
19-
<div class="weui-footer__links">
20-
<navigator url="" class="weui-footer__link">底部链接文本</navigator>
21-
</div>
22-
<div class="weui-footer__text">Copyright © 2008-2018 weui.io</div>
23-
</div>
24+
</div>
25+
<div class="weui-msg__extra-area">
26+
<div class="weui-footer">
27+
<div class="weui-footer__links">
28+
<navigator url class="weui-footer__link">底部链接文本</navigator>
29+
</div>
30+
<div class="weui-footer__text">Copyright © 2008-2016 weui.io</div>
2431
</div>
32+
</div>
2533
</div>
26-
</div>
34+
</div>
2735
</template>
2836

2937
<script>
@@ -32,6 +40,12 @@ export default {
3240
}
3341
</script>
3442

35-
<style>
36-
43+
<style scoped>
44+
page {
45+
background-color: #ffffff;
46+
}
47+
page,
48+
.page {
49+
height: 100%;
50+
}
3751
</style>

‎src/pages/msg-success/index.vue

+34-20
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,37 @@
11
<template>
22
<div class="page">
33
<div class="weui-msg">
4-
<div class="weui-msg__icon-area">
5-
<icon type="success" size="93"></icon>
4+
<div class="weui-msg__icon-area">
5+
<icon type="success" size="64"></icon>
6+
</div>
7+
<div class="weui-msg__text-area">
8+
<div class="weui-msg__title">操作成功</div>
9+
<div class="weui-msg__desc">
10+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
11+
<navigator url class="weui-msg__link">文字链接</navigator>
612
</div>
7-
<div class="weui-msg__text-area">
8-
<div class="weui-msg__title">操作成功</div>
9-
<div class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></div>
13+
</div>
14+
<div class="weui-msg__opr-area">
15+
<div class="weui-btn-area">
16+
<button class="weui-btn" type="primary">推荐操作</button>
1017
</div>
11-
<div class="weui-msg__opr-area">
12-
<div class="weui-btn-area">
13-
<button class="weui-btn" type="primary">推荐操作</button>
14-
<button class="weui-btn" type="default">辅助操作</button>
15-
</div>
18+
</div>
19+
<div class="weui-msg__tips-area">
20+
<div class="weui-msg__tips">
21+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
22+
<navigator url class="weui-msg__link">文字链接</navigator>
1623
</div>
17-
<div class="weui-msg__extra-area">
18-
<div class="weui-footer">
19-
<div class="weui-footer__links">
20-
<navigator url="" class="weui-footer__link">底部链接文本</navigator>
21-
</div>
22-
<div class="weui-footer__text">Copyright © 2008-2018 weui.io</div>
23-
</div>
24+
</div>
25+
<div class="weui-msg__extra-area">
26+
<div class="weui-footer">
27+
<div class="weui-footer__links">
28+
<navigator url class="weui-footer__link">底部链接文本</navigator>
29+
</div>
30+
<div class="weui-footer__text">Copyright © 2008-2016 weui.io</div>
2431
</div>
32+
</div>
2533
</div>
26-
</div>
34+
</div>
2735
</template>
2836

2937
<script>
@@ -32,6 +40,12 @@ export default {
3240
}
3341
</script>
3442

35-
<style>
36-
43+
<style scoped>
44+
page {
45+
background-color: #ffffff;
46+
}
47+
page,
48+
.page {
49+
height: 100%;
50+
}
3751
</style>

‎src/pages/msg-text-primary/index.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="page">
3+
<div class="weui-msg">
4+
<div class="weui-msg__text-area">
5+
<div class="weui-msg__desc">
6+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
7+
<navigator url class="weui-msg__link">文字链接</navigator>
8+
</div>
9+
<div class="weui-msg__desc-primary">
10+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
11+
<navigator url class="weui-msg__link">文字链接</navigator>
12+
</div>
13+
</div>
14+
<div class="weui-msg__opr-area">
15+
<div class="weui-btn-area">
16+
<button class="weui-btn" type="primary">推荐操作</button>
17+
</div>
18+
</div>
19+
<div class="weui-msg__tips-area">
20+
<div class="weui-msg__tips">
21+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
22+
<navigator url class="weui-msg__link">文字链接</navigator>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
32+
}
33+
</script>
34+
35+
<style scoped>
36+
page {
37+
background-color: #ffffff;
38+
}
39+
page,
40+
.page {
41+
height: 100%;
42+
}
43+
</style>

‎src/pages/msg-text-primary/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Vue from 'vue'
2+
import App from './index'
3+
4+
const app = new Vue(App)
5+
app.$mount()

‎src/pages/msg-text/index.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="page">
3+
<div class="weui-msg">
4+
<div class="weui-msg__text-area">
5+
<div class="weui-msg__title">操作成功</div>
6+
<div class="weui-msg__desc">
7+
内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
8+
<navigator url class="weui-msg__link">文字链接</navigator>
9+
</div>
10+
</div>
11+
<div class="weui-msg__opr-area">
12+
<div class="weui-btn-area">
13+
<button class="weui-btn" type="primary">推荐操作</button>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
23+
}
24+
</script>
25+
26+
<style scoped>
27+
page {
28+
background-color: #ffffff;
29+
}
30+
page,
31+
.page {
32+
height: 100%;
33+
}
34+
</style>

‎src/pages/msg-text/main.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Vue from 'vue'
2+
import App from './index'
3+
4+
const app = new Vue(App)
5+
app.$mount()

‎src/pages/msg/index.vue

+19-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<div class="weui-btn-area">
99
<button class="weui-btn" type="default" @click="openSuccess">成功提示页</button>
1010
<button class="weui-btn" type="default" @click="openFail">失败提示页</button>
11+
<button class="weui-btn" type="default" @click="openText">无图标提示页</button>
12+
<button class="weui-btn" type="default" @click="openTextPrimary">无图标提示页</button>
1113
</div>
1214
</div>
1315
</div>
@@ -30,11 +32,27 @@ export default {
3032
wx.navigateTo({
3133
url: '../msg-fail/main'
3234
})
35+
},
36+
openText() {
37+
wx.navigateTo({
38+
url: '../msg-text/main'
39+
})
40+
},
41+
openTextPrimary: function () {
42+
wx.navigateTo({
43+
url: '../msg-text-primary/main'
44+
})
3345
}
3446
}
3547
}
3648
</script>
3749

3850
<style>
39-
51+
page {
52+
background-color: #ffffff;
53+
}
54+
page,
55+
.page {
56+
height: 100%;
57+
}
4058
</style>

‎src/pages/picker/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<div class="page__bd">
88
<div class="weui-btn-area">
9-
<picker @change="bindPickerChange" :value="index" :range="array">
9+
<picker class="weui-btn" @change="bindPickerChange" :value="index" :range="array">
1010
<button type="default">单列选择器</button>
1111
</picker>
1212
<picker class="weui-btn" mode="multiSelector" @change="MultiPickerChange" :value="indexMulPicker" :range="multiArray" @columnchange="MultiPickerColumChange">

0 commit comments

Comments
 (0)