Commit f48fd379 authored by wlxuqu's avatar wlxuqu

1. card组件新增box-shadow参数,用于设置卡片外围阴影

2. 优化radio和checkbox的icon在QQ小程序上,位置偏下的兼容性
3. 修复由于HX2.8.5版本v-if导致的自定义tabbar报错的问题的
parent 0da59ed2
...@@ -4,11 +4,8 @@ ...@@ -4,11 +4,8 @@
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-cell-group title="读万卷书"> <u-cell-group title="读万卷书">
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i <u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass"
ndex="index" @click="click" :hover-class="hoverClass" :arrow="arrow" :title="title" :icon="icon">
:arrow="arrow" :title="title"
:icon="icon"
>
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge> <u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch> <u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
</u-cell-item> </u-cell-item>
...@@ -28,10 +25,13 @@ ...@@ -28,10 +25,13 @@
<view class="u-item-title">更换图标</view> <view class="u-item-title">更换图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection> <u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
</view> </view>
<!-- QQ小程序无法动态切换slot -->
<!-- #ifndef MP-QQ -->
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">自定义右侧内容</view> <view class="u-item-title">自定义右侧内容</view>
<u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection> <u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
</view> </view>
<!-- #endif -->
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">描述信息</view> <view class="u-item-title">描述信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection> <u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
...@@ -49,66 +49,65 @@ ...@@ -49,66 +49,65 @@
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
icon: 'setting', icon: 'setting',
arrow: true, arrow: true,
label: '', label: '',
title: '青山一道同云雨', title: '青山一道同云雨',
rightSlot: true, rightSlot: true,
checked: false, checked: false,
} }
},
computed: {
hoverClass() {
// 如果右侧是switch步进器组件的话,去掉cell的点击反馈,因为这个时候点击的反馈应该在switch上
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
}
},
methods: {
iconChange(index) {
this.icon = index == 0 ? 'setting' : 'file-text'
},
arrowChange(index) {
this.arrow = index == 0 ? true : false
},
lableChange(index) {
this.label = index == 0 ? '岂曰无衣,与子同裳' : ''
},
titleChange(index) {
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
}, },
rightSlotChange(index) { computed: {
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge' hoverClass() {
if(index == 0) this.arrow = true; // 如果右侧是switch步进器组件的话,去掉cell的点击反馈,因为这个时候点击的反馈应该在switch上
else this.arrow = false; return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
}
}, },
click(index) { methods: {
// console.log(index); iconChange(index) {
this.icon = index == 0 ? 'setting' : 'file-text'
},
arrowChange(index) {
this.arrow = index == 0 ? true : false
},
lableChange(index) {
this.label = index == 0 ? '岂曰无衣,与子同裳' : ''
},
titleChange(index) {
this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
},
rightSlotChange(index) {
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
if (index == 0) this.arrow = true;
else this.arrow = false;
},
click(index) {
// console.log(index);
}
} }
} };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.gab {
.gab { background-color: rgb(245, 245, 245);
background-color: rgb(245, 245, 245); height: 20rpx;
height: 20rpx; }
}
.wrap { .wrap {
height: 100vh; height: 100vh;
background-color: rgb(241, 241, 241); background-color: rgb(241, 241, 241);
} }
.box { .box {
padding: 30rpx 00rpx; padding: 30rpx 00rpx;
font-size: 28rpx; font-size: 28rpx;
color: $u-type-info; color: $u-type-info;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }" :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
:style="{ :style="{
borderRadius: borderRadius + 'rpx', borderRadius: borderRadius + 'rpx',
margin: margin margin: margin,
boxShadow: boxShadow
}" }"
> >
<view <view
...@@ -83,6 +84,7 @@ ...@@ -83,6 +84,7 @@
* @property {String | Number} sub-title-size 副标题字体大小(默认26) * @property {String | Number} sub-title-size 副标题字体大小(默认26)
* @property {Boolean} border 是否显示边框(默认true) * @property {Boolean} border 是否显示边框(默认true)
* @property {String | Number} index 用于标识点击了第几个卡片 * @property {String | Number} index 用于标识点击了第几个卡片
* @property {String} box-shadow 卡片外围阴影,字符串形式(默认none)
* @property {String} margin 卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx"(默认30rpx) * @property {String} margin 卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx"(默认30rpx)
* @property {String | Number} border-radius 卡片整体的圆角值,单位rpx(默认16) * @property {String | Number} border-radius 卡片整体的圆角值,单位rpx(默认16)
* @property {Object} head-style 头部自定义样式,对象形式 * @property {Object} head-style 头部自定义样式,对象形式
...@@ -219,6 +221,11 @@ export default { ...@@ -219,6 +221,11 @@ export default {
showFoot: { showFoot: {
type: Boolean, type: Boolean,
default: true default: true
},
// 卡片外围阴影,字符串形式
boxShadow: {
type: Boolean,
default: 'none'
} }
}, },
data() { data() {
......
...@@ -35,10 +35,10 @@ ...@@ -35,10 +35,10 @@
<block class="u-cell__value" v-if="value">{{ value }}</block> <block class="u-cell__value" v-if="value">{{ value }}</block>
<slot v-else></slot> <slot v-else></slot>
</view> </view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
<view class="u-flex" v-if="$slots['right-icon']"> <view class="u-flex" v-if="$slots['right-icon']">
<slot name="right-icon"></slot> <slot name="right-icon"></slot>
</view> </view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
</view> </view>
</template> </template>
......
...@@ -21,8 +21,9 @@ ...@@ -21,8 +21,9 @@
:color="elColor(index)" :color="elColor(index)"
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'" :custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
></u-icon> ></u-icon>
<!-- 需要判断是否数字,$u.test.number(),否则报错 -->
<u-badge :count="item.count" :is-dot="item.isDot" <u-badge :count="item.count" :is-dot="item.isDot"
v-if="item.count > 0" v-if="$u.test.number(item.count) && Number(item.count) > 0"
:offset="[-2, getOffsetRight(item.count, item.isDot)]" :offset="[-2, getOffsetRight(item.count, item.isDot)]"
></u-badge> ></u-badge>
</view> </view>
......
/* start--微信小程序编译后页面有组件名的元素,特别处理--start */ /* start--微信小程序编译后页面有组件名的元素,特别处理--start */
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN || MP-QQ */
u-td, u-th { u-td, u-th {
flex: 1; flex: 1;
align-self: stretch; align-self: stretch;
...@@ -30,4 +30,14 @@ u-switch { ...@@ -30,4 +30,14 @@ u-switch {
align-items: center; align-items: center;
} }
/* #endif */ /* #endif */
/* end-微信小程序编译后页面有组件名的元素,特别处理--end */ /* end-微信小程序编译后页面有组件名的元素,特别处理--end */
\ No newline at end of file
/* #ifdef MP-QQ */
/* 需要做这一切额外的兼容,都是因为TX的无能 */
u-icon {
line-height: 0;
}
/* #endif */
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment