Skip to content

Commit f48fd37

Browse files
wlxuquwlxuqu
committed
1. card组件新增box-shadow参数，用于设置卡片外围阴影
2. 优化radio和checkbox的icon在QQ小程序上，位置偏下的兼容性 3. 修复由于HX2.8.5版本v-if导致的自定义tabbar报错的问题的
1 parent 0da59ed commit f48fd37

File tree

5 files changed

+81
-64
lines changed

5 files changed

+81
-64
lines changed

‎pages/componentsC/cell/index.vue

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@
44
<view class="u-demo-title">演示效果</view>
55
<view class="u-demo-area">
66
<u-cell-group title="读万卷书">
7-
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i
8-
ndex="index" @click="click" :hover-class="hoverClass"
9-
:arrow="arrow" :title="title"
10-
:icon="icon"
11-
>
7+
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass"
8+
:arrow="arrow" :title="title" :icon="icon">
129
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
1310
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
1411
</u-cell-item>
@@ -28,10 +25,13 @@
2825
<view class="u-item-title">更换图标</view>
2926
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
3027
</view>
28+
<!-- QQ小程序无法动态切换slot -->
29+
<!-- #ifndef MP-QQ -->
3130
<view class="u-config-item">
3231
<view class="u-item-title">自定义右侧内容</view>
3332
<u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
3433
</view>
34+
<!-- #endif -->
3535
<view class="u-config-item">
3636
<view class="u-item-title">描述信息</view>
3737
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
@@ -49,66 +49,65 @@
4949
</template>
5050

5151
<script>
52-
export default {
53-
data() {
54-
return {
55-
icon: 'setting',
56-
arrow: true,
57-
label: '',
58-
title: '青山一道同云雨',
59-
rightSlot: true,
60-
checked: false,
61-
}
62-
},
63-
computed: {
64-
hoverClass() {
65-
// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
66-
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
67-
}
68-
},
69-
methods: {
70-
iconChange(index) {
71-
this.icon = index == 0 ? 'setting' : 'file-text'
72-
},
73-
arrowChange(index) {
74-
this.arrow = index == 0 ? true : false
75-
},
76-
lableChange(index) {
77-
this.label = index == 0 ? '岂曰无衣，与子同裳' : ''
78-
},
79-
titleChange(index) {
80-
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
52+
export default {
53+
data() {
54+
return {
55+
icon: 'setting',
56+
arrow: true,
57+
label: '',
58+
title: '青山一道同云雨',
59+
rightSlot: true,
60+
checked: false,
61+
}
8162
},
82-
rightSlotChange(index) {
83-
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
84-
if(index == 0) this.arrow = true;
85-
else this.arrow = false;
63+
computed: {
64+
hoverClass() {
65+
// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
66+
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
67+
}
8668
},
87-
click(index) {
88-
// console.log(index);
69+
methods: {
70+
iconChange(index) {
71+
this.icon = index == 0 ? 'setting' : 'file-text'
72+
},
73+
arrowChange(index) {
74+
this.arrow = index == 0 ? true : false
75+
},
76+
lableChange(index) {
77+
this.label = index == 0 ? '岂曰无衣，与子同裳' : ''
78+
},
79+
titleChange(index) {
80+
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
81+
},
82+
rightSlotChange(index) {
83+
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
84+
if (index == 0) this.arrow = true;
85+
else this.arrow = false;
86+
},
87+
click(index) {
88+
// console.log(index);
89+
}
8990
}
90-
}
91-
};
91+
};
9292
</script>
9393

9494
<style lang="scss" scoped>
95-
96-
.gab {
97-
background-color: rgb(245, 245, 245);
98-
height: 20rpx;
99-
}
95+
.gab {
96+
background-color: rgb(245, 245, 245);
97+
height: 20rpx;
98+
}
10099
101-
.wrap {
102-
height: 100vh;
103-
background-color: rgb(241, 241, 241);
104-
}
100+
.wrap {
101+
height: 100vh;
102+
background-color: rgb(241, 241, 241);
103+
}
105104
106-
.box {
107-
padding: 30rpx 00rpx;
108-
font-size: 28rpx;
109-
color: $u-type-info;
110-
display: flex;
111-
align-items: center;
112-
justify-content: space-between;
113-
}
105+
.box {
106+
padding: 30rpx 00rpx;
107+
font-size: 28rpx;
108+
color: $u-type-info;
109+
display: flex;
110+
align-items: center;
111+
justify-content: space-between;
112+
}
114113
</style>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
66
:style="{
77
borderRadius: borderRadius + 'rpx',
8-
margin: margin
8+
margin: margin,
9+
boxShadow: boxShadow
910
}"
1011
>
1112
<view
@@ -83,6 +84,7 @@
8384
* @property {String | Number} sub-title-size 副标题字体大小（默认26）
8485
* @property {Boolean} border 是否显示边框（默认true）
8586
* @property {String | Number} index 用于标识点击了第几个卡片
87+
* @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
8688
* @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
8789
* @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
8890
* @property {Object} head-style 头部自定义样式，对象形式
@@ -219,6 +221,11 @@ export default {
219221
showFoot: {
220222
type: Boolean,
221223
default: true
224+
},
225+
// 卡片外围阴影，字符串形式
226+
boxShadow: {
227+
type: Boolean,
228+
default: 'none'
222229
}
223230
},
224231
data() {

‎uview-ui/components/u-cell-item/u-cell-item.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@
3535
<block class="u-cell__value" v-if="value">{{ value }}</block>
3636
<slot v-else></slot>
3737
</view>
38-
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
3938
<view class="u-flex" v-if="$slots['right-icon']">
4039
<slot name="right-icon"></slot>
4140
</view>
41+
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
4242
</view>
4343
</template>
4444

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@
2121
:color="elColor(index)"
2222
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
2323
></u-icon>
24+
<!-- 需要判断是否数字，$u.test.number()，否则报错 -->
2425
<u-badge :count="item.count" :is-dot="item.isDot"
25-
v-if="item.count > 0"
26+
v-if="$u.test.number(item.count) && Number(item.count) > 0"
2627
:offset="[-2, getOffsetRight(item.count, item.isDot)]"
2728
></u-badge>
2829
</view>

‎uview-ui/libs/css/style.mp.scss

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* start--微信小程序编译后页面有组件名的元素，特别处理--start */
2-
/* #ifdef MP-WEIXIN */
2+
/* #ifdef MP-WEIXIN || MP-QQ */
33
u-td, u-th {
44
flex: 1;
55
align-self: stretch;
@@ -30,4 +30,14 @@ u-switch {
3030
align-items: center;
3131
}
3232
/* #endif */
33-
/* end-微信小程序编译后页面有组件名的元素，特别处理--end */
33+
/* end-微信小程序编译后页面有组件名的元素，特别处理--end */
34+
35+
36+
/* #ifdef MP-QQ */
37+
/* 需要做这一切额外的兼容，都是因为TX的无能 */
38+
u-icon {
39+
line-height: 0;
40+
}
41+
/* #endif */
42+
43+

0 commit comments

Comments
 (0)