1. 添加tag参数类型

2. 给上传和验证码输入框添加可控制尺寸的参数
3. 去除loadmore和divider的默认高度
parent d429d3ac
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
},
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsA/navbar/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
}]
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsA/navbar/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
......
......@@ -2,7 +2,7 @@
<view class="wrap">
<view class="item-warp">
<view class="item" v-for="(item, index) in list" :key="index">
<u-lazy-load threshold="-450" height="auto" img-mode="widthFix" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
</view>
</view>
<u-loadmore :status="status" @loadmore="getData"></u-loadmore>
......
<template>
<view class="wrap">
<u-waterfall :flowList="flowList">
<template v-slot:left="{list}">
<view class="demo-warter" v-for="(item, index) in list" :key="index">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告:微信小程序不支持嵌入lazyload组件,请自行如下使用image标签 -->
<!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
......@@ -31,8 +31,8 @@
</view>
</view>
</template>
<template v-slot:right="{list}">
<view class="demo-warter" v-for="(item, index) in list" :key="index">
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
......
<template>
<view>
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
</view>
</template>
<script>
export default {
};
data() {
return {
list: [{
name: '待收货'
}, {
name: '待付款'
}, {
name: '待评价'
}],
current: 0
}
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>
<style>
......
<template>
<view class="u-divider" :style="{
height: height == 'auto' ? 'auto' : height + 'rpx',
backgroundColor: bgColor
backgroundColor: bgColor,
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
}" @tap="click">
<view class="u-divider-line" :style="[lineStyle]"></view>
<view class="u-divider-text" :style="{
......@@ -48,7 +50,17 @@ export default {
// 整个divider的高度单位rpx
height: {
type: [Number, String],
default: 40
default: 'auto'
},
// 上边距
marginTop: {
type: [String, Number],
default: 0
},
// 下边距
marginBottom: {
type: [String, Number],
default: 0
},
},
computed: {
......@@ -91,6 +103,5 @@ export default {
.u-divider-text {
white-space: nowrap;
display: inline-flex;
padding: 0 20rpx;
}
</style>
<template>
<view class="u-wrap" :style="{
opacity: Number(opacity),
height: imgHeight,
borderRadius: borderRadius + 'rpx',
// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
transition: `opacity ${time / 1000}s ease-in-out`
......@@ -48,7 +47,7 @@
// 负数为图片超出屏幕底部多少距离后触发懒加载,正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
threshold: {
type: [Number, String],
default: 300
default: 100
},
// 淡入淡出动画的过渡时间
duration: {
......
<template>
<view class="u-load-more-wrap" :style="{backgroundColor: bgColor}">
<view class="u-load-more-wrap" :style="{
backgroundColor: bgColor,
marginBottom: marginBottom + 'rpx',
marginTop: marginTop + 'rpx'
}">
<!-- 加载中和没有更多的状态才显示两边的横线 -->
<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
......@@ -65,7 +69,17 @@
iconColor: {
type: String,
default: '#b7b7b7'
}
},
// 上边距
marginTop: {
type: [String, Number],
default: 0
},
// 下边距
marginBottom: {
type: [String, Number],
default: 0
},
},
data() {
return {
......@@ -119,7 +133,6 @@
<style scoped lang="scss">
.u-load-more-wrap {
padding: 40rpx 0;
width: 100%;
display: flex;
justify-content: center;
......
......@@ -8,9 +8,16 @@
mode === 'box' ? 'u-box' : '']" :style="{
fontWeight: bold ? 'bold' : 'normal',
fontSize: fontSize + 'rpx',
width: width + 'rpx',
height: width + 'rpx',
color: inactiveColor
}">
<view class="u-placeholder-line" :style="{display: charArrLength === index ? 'block' : 'none'}" v-if="mode !== 'middleLine'"></view>
<view class="u-placeholder-line" :style="{
display: charArrLength === index ? 'block' : 'none',
height: width * 0.5 +'rpx'
}"
v-if="mode !== 'middleLine'"
></view>
<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
......@@ -77,6 +84,11 @@
inactiveColor: {
type: String,
default: '#606266'
},
// 输入框的大小,单位rpx,宽等于高
width: {
type: [Number, String],
default: '80'
}
},
watch: {
......
......@@ -7,10 +7,12 @@
}">
{{title}}
</view>
<view class="u-right-info" v-if="right">
<view class="u-right-info" v-if="right" :style="{
color: subColor
}">
{{subTitle}}
<view class="u-icon-arrow" @tap="rightClick">
<u-icon name="arrow-right" size="22" :color="$u.color['tipsColor']"></u-icon>
<u-icon name="arrow-right" size="22" :color="subColor"></u-icon>
</view>
</view>
</view>
......@@ -47,6 +49,11 @@
color: {
type: String,
default: '#303133'
},
// 右边副标题的颜色
subColor: {
type: String,
default: '#909399'
}
},
data() {
......
......@@ -38,7 +38,7 @@
},
// 标签文字
text: {
type: String,
type: [String, Number],
default: ''
},
// 背景颜色,默认为空字符串,即不处理
......
<template>
<view class="u-upload" v-if="!disabled">
<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index">
<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index" :style="{
width: width + 'rpx',
height: width + 'rpx'
}">
<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)">
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
</view>
......@@ -12,7 +15,10 @@
<slot name="file" :file="lists"></slot>
<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
<slot name="addBtn"></slot>
<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150">
<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
width: width + 'rpx',
height: width + 'rpx'
}">
<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
<view class="u-add-tips">{{uploadText}}</view>
</view>
......@@ -131,6 +137,11 @@
customBtn: {
type: Boolean,
default: false
},
// 内部预览图片区域和选择图片按钮的区域宽度,高等于宽
width: {
type: [String, Number],
default: 200
}
},
mounted() {
......
<template>
<view class="u-waterfall">
<view id="u-left-cloumn" class="u-cloumn">
<slot name="left" :list="leftList"></slot>
<slot name="left" :leftList="leftList"></slot>
</view>
<view id="u-right-cloumn" class="u-cloumn">
<slot name="right" :list="rightList"></slot>
<slot name="right" :rightList="rightList"></slot>
</view>
</view>
</template>
......
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