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 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-cell-group title="读万卷书">
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i
ndex="index" @click="click" :hover-class="hoverClass"
:arrow="arrow" :title="title"
:icon="icon"
>
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass"
:arrow="arrow" :title="title" :icon="icon">
<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-cell-item>
......@@ -28,10 +25,13 @@
<view class="u-item-title">更换图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
</view>
<!-- QQ小程序无法动态切换slot -->
<!-- #ifndef MP-QQ -->
<view class="u-config-item">
<view class="u-item-title">自定义右侧内容</view>
<u-subsection vibrateShort :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">描述信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
......@@ -49,7 +49,7 @@
</template>
<script>
export default {
export default {
data() {
return {
icon: 'setting',
......@@ -81,34 +81,33 @@ export default {
},
rightSlotChange(index) {
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
if(index == 0) this.arrow = true;
if (index == 0) this.arrow = true;
else this.arrow = false;
},
click(index) {
// console.log(index);
}
}
};
};
</script>
<style lang="scss" scoped>
.gab {
.gab {
background-color: rgb(245, 245, 245);
height: 20rpx;
}
}
.wrap {
.wrap {
height: 100vh;
background-color: rgb(241, 241, 241);
}
}
.box {
.box {
padding: 30rpx 00rpx;
font-size: 28rpx;
color: $u-type-info;
display: flex;
align-items: center;
justify-content: space-between;
}
}
</style>
......@@ -5,7 +5,8 @@
:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
:style="{
borderRadius: borderRadius + 'rpx',
margin: margin
margin: margin,
boxShadow: boxShadow
}"
>
<view
......@@ -83,6 +84,7 @@
* @property {String | Number} sub-title-size 副标题字体大小(默认26)
* @property {Boolean} border 是否显示边框(默认true)
* @property {String | Number} index 用于标识点击了第几个卡片
* @property {String} box-shadow 卡片外围阴影,字符串形式(默认none)
* @property {String} margin 卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx"(默认30rpx)
* @property {String | Number} border-radius 卡片整体的圆角值,单位rpx(默认16)
* @property {Object} head-style 头部自定义样式,对象形式
......@@ -219,6 +221,11 @@ export default {
showFoot: {
type: Boolean,
default: true
},
// 卡片外围阴影,字符串形式
boxShadow: {
type: Boolean,
default: 'none'
}
},
data() {
......
......@@ -35,10 +35,10 @@
<block class="u-cell__value" v-if="value">{{ value }}</block>
<slot v-else></slot>
</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']">
<slot name="right-icon"></slot>
</view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
</view>
</template>
......
......@@ -21,8 +21,9 @@
:color="elColor(index)"
:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
></u-icon>
<!-- 需要判断是否数字,$u.test.number(),否则报错 -->
<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)]"
></u-badge>
</view>
......
/* start--微信小程序编译后页面有组件名的元素,特别处理--start */
/* #ifdef MP-WEIXIN */
/* #ifdef MP-WEIXIN || MP-QQ */
u-td, u-th {
flex: 1;
align-self: stretch;
......@@ -31,3 +31,13 @@ u-switch {
}
/* #endif */
/* end-微信小程序编译后页面有组件名的元素,特别处理--end */
/* #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