Skip to content

U
uview-ui
Commit 6c95f5b1 authored by PC-20180318CEYD\Administrator's avatar PC-20180318CEYD\Administrator
Browse files
Options

1. 添加tag参数类型 

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