Skip to content

Commit 95fd1c8

Browse files
wlxuquwlxuqu
committed
1. 给Modal弹窗添加异步关闭控制参数async-close和点击遮罩关闭参数mask-close-able
2. 修复$u.route方法type=back时，delta参数无法设置的问题 3. 修复Button按钮水波纹在支付宝小程序无效的问题 4. 给Navbar添加右侧的slot，名为right 5. 添加基础类u-relative(u-rela)和u-absolute(u-abso) 6. 给Switch组件添加active-value和inactive-value
1 parent a908cb8 commit 95fd1c8

16 files changed

Lines changed: 156 additions & 70 deletions

File tree

‎pages.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
"easycom": {
33
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
44
},
5-
// "condition": { //模式配置，仅开发期间生效
6-
// "current": 0, //当前激活的模式(list 的索引项)
7-
// "list": [{
8-
// "name": "test", //模式名称
9-
// "path": "pages/componentsB/upload/index", //启动页面，必选
10-
// "query": "id=1&name=2" //启动参数，在页面的-+onLoad函数里面得到
11-
// }]
12-
// },
5+
"condition": { //模式配置，仅开发期间生效
6+
"current": 0, //当前激活的模式(list 的索引项)
7+
"list": [{
8+
"name": "test", //模式名称
9+
"path": "pages/componentsA/navbar/index", //启动页面，必选
10+
"query": "id=1&name=2" //启动参数，在页面的-+onLoad函数里面得到
11+
}]
12+
},
1313
"pages": [
1414
// 演示-组件
1515
{

‎pages/componentsA/navbar/index.vue‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon>
2323
</view>
2424
</view>
25+
<view class="navbar-right" slot="right" v-if="slotRight">
26+
<view class="message-box right-item">
27+
<u-icon name="chat" size="38"></u-icon>
28+
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
29+
</view>
30+
<view class="dot-box right-item">
31+
<u-icon name="calendar-fill" size="38"></u-icon>
32+
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
33+
</view>
34+
</view>
2535
</u-navbar>
2636
<view class="u-demo">
2737
<view class="u-demo-wrap">
@@ -48,7 +58,11 @@
4858
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="leftChange"></u-subsection>
4959
</view>
5060
<view class="u-config-item">
51-
<view class="u-item-title">传入slot</view>
61+
<view class="u-item-title">自定义右侧内容</view>
62+
<u-subsection :current="slotRightCurrent" vibrateShort :list="['是', '否']" @change="rightChange"></u-subsection>
63+
</view>
64+
<view class="u-config-item">
65+
<view class="u-item-title">传入整体slot</view>
5266
<u-subsection vibrateShort :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection>
5367
</view>
5468
<view class="u-config-item">
@@ -82,7 +96,18 @@
8296
search: false,
8397
custom: false,
8498
isFixed: true,
85-
keyword: ''
99+
keyword: '',
100+
// #ifdef MP
101+
slotRight: false,
102+
// #endif
103+
// #ifndef MP
104+
slotRight: true
105+
// #endif
106+
}
107+
},
108+
computed: {
109+
slotRightCurrent() {
110+
return this.slotRight ? 0 : 1;
86111
}
87112
},
88113
methods: {
@@ -107,21 +132,25 @@
107132
if(index == 0) {
108133
this.title = '新闻';
109134
this.useSlot = false;
135+
this.rightSlot = false;
110136
} else if(index == 1) {
111137
this.showAction = false;
112138
this.useSlot = true;
113139
this.rightSlot = false;
114140
this.search = true;
141+
this.slotRight = false;
115142
} else if(index == 2) {
116143
this.useSlot = true;
117144
this.showAction = true;
118145
this.rightSlot = false;
119146
this.search = true;
147+
this.slotRight = false;
120148
} else {
121149
this.useSlot = true;
122150
this.search = true;
123151
this.showAction = false;
124152
this.rightSlot = true;
153+
this.slotRight = false;
125154
}
126155
},
127156
backChange(index) {
@@ -141,6 +170,14 @@
141170
}
142171
143172
},
173+
rightChange(index) {
174+
if(index == 0) {
175+
this.slotRight = true;
176+
this.useSlot = false;
177+
} else {
178+
this.slotRight = false;
179+
}
180+
},
144181
customChange(index) {
145182
this.search = false;
146183
this.rightSlot = false;

‎pages/componentsB/switch/index.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
:size="size" @change="change"
88
:active-color="activeColor"
99
:disabled="disabled"
10+
:activeValue="100"
11+
:inactiveValue="1"
1012
></u-switch>
1113
</view>
1214
</view>
@@ -100,7 +102,7 @@
100102
})
101103
},
102104
change(value) {
103-
// console.log(value);
105+
// console.log(value, this.checked);
104106
}
105107
}
106108
}

‎pages/componentsC/test/index.vue‎

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,30 @@
11
<template>
2-
<view>
3-
2+
<view class="">
3+
<u-modal v-model="show" @confirm="confirm" :async-close="true"></u-modal>
4+
<u-button @click="showModal">弹起Modal</u-button>
45
</view>
56
</template>
67

78
<script>
8-
export default {
9-
data() {
10-
return {
11-
dataList:[{
12-
id:1,
13-
num:0
14-
},
15-
{
16-
id:2,
17-
num:0
18-
}],
19-
};
9+
export default {
10+
data() {
11+
return {
12+
show: false
13+
}
14+
},
15+
onLoad: function(opt) {
16+
17+
},
18+
methods:{
19+
showModal() {
20+
this.show = true;
2021
},
21-
methods: {
22-
valChanges(e,index){
23-
this.dataList[index]['num'] = parseInt(e['value']);
24-
console.log(e);
25-
},
22+
confirm() {
23+
setTimeout(() => {
24+
this.show = false;
25+
}, 3000)
2626
}
27-
};
27+
}
28+
}
2829
</script>
2930

30-
<style lang="scss" scoped>
31-
.item {
32-
display: flex;
33-
padding: 20rpx;
34-
}
35-
36-
image {
37-
width: 120rpx;
38-
flex: 0 0 120rpx;
39-
height: 120rpx;
40-
margin-right: 20rpx;
41-
border-radius: 12rpx;
42-
}
43-
44-
.title {
45-
text-align: left;
46-
font-size: 28rpx;
47-
color: $u-content-color;
48-
margin-top: 20rpx;
49-
}
50-
</style>

‎uview-ui/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ Vue.use(uView);
7171

7272
```html
7373
<template>
74-
<u-buton>按钮</u-buton>
74+
<u-button>按钮</u-button>
7575
</template>
7676
```
7777

‎uview-ui/components/u-alert-tips/u-alert-tips.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
* alertTips 警告提示
3232
* @description 警告提示，展现需要关注的信息
3333
* @tutorial https://uviewui.com/components/alertTips.html
34-
* @property {String} title 辅助性文字，颜色比title浅一点，字号也小一点，可选
35-
* @property {String} description 显示的标题文字
34+
* @property {String} title 显示的标题文字
35+
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
3636
* @property {String} type 关闭按钮(默认为叉号icon图标)
3737
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
3838
* @property {Boolean} show-icon 是否显示左边的辅助图标

‎uview-ui/components/u-button/u-button.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,9 @@
297297
// 获取元素节点信息，请查看uniapp相关文档
298298
// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
299299
queryInfo = uni.createSelectorQuery().in(this);
300+
//#ifdef MP-ALIPAY
301+
queryInfo = uni.createSelectorQuery();
302+
//#endif
300303
queryInfo.select('.u-btn').boundingClientRect();
301304
queryInfo.exec((data) => {
302305
resolve(data)

‎uview-ui/components/u-message-input/u-message-input.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,7 @@
203203
text-align: left;
204204
z-index: 9;
205205
opacity: 1;
206+
background: none;
206207
}
207208
208209
.u-char-item {

‎uview-ui/components/u-modal/u-modal.vue‎

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
22
<view>
3-
<u-popup :zoom="zoom" mode="center" :z-index="uZIndex" v-model="value" :length="width" :mask-close-able="false" :border-radius="borderRadius">
3+
<u-popup :zoom="zoom"
4+
mode="center" :popup="false"
5+
:z-index="uZIndex" v-model="value"
6+
:length="width" :mask-close-able="maskCloseAble"
7+
:border-radius="borderRadius"
8+
@close="popupClose"
9+
>
410
<view class="u-model">
511
<view v-if="showTitle" class="u-model-title u-line-1" :style="[titleStyle]">{{ title }}</view>
612
<view class="u-model-content">
@@ -23,19 +29,22 @@
2329
<view
2430
v-if="showConfirmButton"
2531
:hover-stay-time="100"
26-
hover-class="btn-hover"
32+
:hover-class="asyncClose ? 'none' : 'btn-hover'"
2733
class="u-model-footer-button hairline-left"
2834
:style="[confirmBtnStyle]"
2935
@tap="confirm"
3036
>
31-
{{confirmText}}
37+
<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
38+
<block v-else>
39+
{{confirmText}}
40+
</block>
3241
</view>
3342
</view>
3443
</view>
3544
</u-popup>
3645
</view>
3746
</template>
38-
47+
3948
<script>
4049
/**
4150
* modal 模态框
@@ -47,8 +56,10 @@
4756
* @property {String | Number} width 模态框宽度（默认600）
4857
* @property {String} content 模态框内容（默认"内容"）
4958
* @property {Boolean} show-title 是否显示标题（默认true）
59+
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
5060
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
5161
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
62+
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
5263
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
5364
* @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
5465
* @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
@@ -169,8 +180,22 @@ export default {
169180
contentSlot: {
170181
type: Boolean,
171182
default: false
183+
},
184+
// 是否异步关闭，只对确定按钮有效
185+
asyncClose: {
186+
type: Boolean,
187+
default: false
188+
},
189+
// 是否允许点击遮罩关闭modal
190+
maskCloseAble: {
191+
type: Boolean,
192+
default: false
193+
}
194+
},
195+
data() {
196+
return {
197+
loading: false, // 确认按钮是否正在加载中
172198
}
173-
174199
},
175200
computed: {
176201
cancelBtnStyle() {
@@ -183,14 +208,35 @@ export default {
183208
return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
184209
}
185210
},
211+
watch: {
212+
// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
213+
// 避免下次打开的时候，状态混乱
214+
value(n) {
215+
if(n === true) this.loading = false;
216+
}
217+
},
186218
methods: {
187219
confirm() {
188220
this.$emit('confirm');
189-
this.$emit('input', false);
221+
// 异步关闭
222+
if(this.asyncClose) {
223+
this.loading = true;
224+
} else {
225+
this.$emit('input', false);
226+
}
190227
},
191228
cancel() {
192229
this.$emit('cancel');
193230
this.$emit('input', false);
231+
// 目前popup弹窗关闭有一个延时操作，此处做一个延时
232+
// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
233+
setTimeout(() => {
234+
this.loading = false;
235+
}, 300);
236+
},
237+
// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
238+
popupClose() {
239+
this.$emit('input', false);
194240
}
195241
}
196242
};

‎uview-ui/components/u-navbar/u-navbar.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
<view class="u-slot-content">
1818
<slot></slot>
1919
</view>
20+
<view class="u-slot-right">
21+
<slot name="right"></slot>
22+
</view>
2023
</view>
2124
</view>
2225
<!-- 解决fixed定位后导航栏塌陷的问题 -->

0 commit comments

Comments
 (0)