Skip to content

U
uview-ui
Commit 6f963099 authored by wlxuqu's avatar wlxuqu
Browse files
Options

# **欢迎加群交流反馈：249718512** 

1. 优化cell组件的label数字不会换行的问题
2. countdown组件新增hide-zero-day参数，当"天"为0时自动隐藏该字段
3. image组件允许事件冒泡到外层
4. input组件添加cursor-spacing参数
5. modal和popup的中部弹出模式新增negative-top参数，可以将弹出区域往上移，避免与弹出的键盘重合。
6. 优化navbar的title为英文时，可能会发生部分字母被竖向截断的问题
7. 优化picker和select滑动顶部区域，可能会产生报错的问题
8. row组件允许flex换行
9. 优化upload组件的on-list-change事件逻辑
parent c185e800
Show whitespace changes
Inline Side-by-side
Showing with 429 additions and 64 deletions
README.md
View file @ 6f963099
......@@ -9,6 +9,8 @@
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
### **欢迎加群交流反馈：249718512**
## 特性
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
......
manifest.json
View file @ 6f963099
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.4.3",
"versionName" : "1.4.4",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 6f963099
......@@ -649,6 +649,13 @@
{
"root": "pages/componentsB",
"pages": [
// tabbar-底部导航栏
{
"path": "tabbar/index",
"style": {
"navigationBarTitleText": "tabbar-底部导航栏"
}
},
// line-线条
{
"path": "line/index",
......
pages/componentsB/tabbar/index.vue 0 → 100644
View file @ 6f963099
<template>
</template>
<script>
</script>
<style>
</style>
pages/componentsC/test/index.vue
View file @ 6f963099
<template>
<view>
<u-icon name="map" label="nihao" label-pos="right"></u-icon>
<view class="container">
<view class="search-box">
<u-search @focus="getKeys" @blur="hideKey" bg-color='#ffffff' border-color='rgba(242, 242, 242, 1)' placeholder="日照香炉生紫烟" :clearabled="true" v-model="keyword"></u-search>
</view>
<view class="search-word">
<view class="search-hot" v-if="keys.length!==0">
热门搜索
</view>
<view class="search-key" v-if="keys.length!==0">
<view class="key-font" :key="" v-for="item in keys">
{{item.brand_name}}
</view>
</view>
</view>
<view class="search-end" v-if="keys.length==0">
<view class="">
全部
</view>
<view class="">
销量
</view>
<view class="" @click="showChoice = true">
筛选
</view>
</view>
<view class="guess-section">
<view v-for="(item, index) in mainData" :key="index" class="guess-item" @click="navToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.goods_img"></image>
<text class="goods-tip" v-if="item.is_new==1">新品</text>
</view>
<view class="goods-info">
<text class="title clamp">{{item.goods_name}}</text>
<p><text class="price">￥{{item.promote_price}}</text><text class="price sell">¥{{item.market_price}}</text></p>
<view class="">
<u-rate count="count" gutter="6" size=3 inactive-icon="star-fill" :plain="true" active-color="#FBD14F" inactive-color="RGBA(251, 209, 79, 0.3)" current="2"></u-rate>
<text style="font-size:16upx;margin-left: 8upx; color: #363636;">4.5</text>
</view>
</view>
</view>
</view>
<u-popup v-model="showChoice" mode="right" width="404rpx" @close="closePopup">
<view class="choice">筛选</view>
<view class="choice-main">
<view class="choice-price">
价格区间(元）
</view>
<view class="choice-between">
<input type="text" v-model="higtPrice" placeholder="最低价"/>
<view class="line">
</view>
<input type="text" v-model="lowPrice" placeholder="最高价"/>
</view>
<view class="choice-price">
品牌
</view>
<view class="choice-brand">
<view class="choice-item" v-for="i in 5">
富安娜
</view>
</view>
<view class="choice-submit">
<view class="sub" @click="closePopup">
取消
</view>
<view class="sub confirm" @click="GetData">
确定
</view>
</view>
</view>
</u-popup>
</view>
</template>
......@@ -8,27 +84,240 @@
export default {
data() {
return {
s:false,
show:false
}
keyword: '',
keys:[],
page:1,
pageSize:10,
mainData:[],
showChoice:false,
higtPrice:'',
lowPrice:''
};
},
onReady() {
this.show = true;
created() {
this.GetData()
},
methods: {
methods:{
GetData() {
this.$request.get(`/v1/goods/getGoodsByType?page=${this.page}&pageSize=${this.pageSize}&type=1&higtPrice=${this.higtPrice}&lowPrice=${this.lowPrice}`).then((res) => {
this.mainData = res.data.list
console.log(3435333, this.mainData)
this.closePopup()
})
},
getKeys(){
this.$request.get(`/v1/brand/getBrandList`).then((res) => {
this.keys = res.data.list
console.log(3333, this.keys)
})
},
hideKey(){
this.keys = []
},
closePopup(){
this.higtPrice = ''
this.lowPrice = ''
this.showChoice = false
}
}
}
</script>
<style>
.box-1{
z-index: 999;
height: 50px;
background-color: #f00;
left: 0;
<style scoped>
page{
background-color: #ffffff;
}
.container{
background-color: #ffffff;
.search-box{
padding: 34upx 32upx;
/deep/ .u-action-active{
background:rgba(255,105,105,1);
border-radius:32upx;
border:2upx solid rgba(254,156,143,1);
padding: 10upx 22upx;
width: 108upx;
margin-left: 32upx;
color: #ffffff;
}
}
.search-word{
padding: 0 34upx;
margin-top: 12upx;
.search-hot{
font-size:32upx;
line-height:44upx;
margin-bottom: 24upx;
}
.search-key{
display: flex;
flex-wrap: wrap;
.key-font{
background-color: rgba(242, 242, 242, 1);
border-radius:24upx;
padding: 6upx 30upx;
font-size:28upx;
line-height:40upx;
color: #252A33;
margin-right: 32upx;
margin-bottom: 36upx;
}
}
}
.search-end{
display: flex;
padding: 0 65upx;
justify-content: space-between;
font-size:28upx;
line-height:80upx;
}
/* 精品推荐 */
.guess-section{
display:flex;
flex-wrap:wrap;
padding: 0 32upx;
padding-top: 24upx;
background: $page-color-base;
.guess-item{
display:flex;
flex-direction: column;
width: 47.5%;
margin-bottom: 40upx;
border-radius:8upx;
background-color: #ffffff;
&:nth-child(2n+1){
margin-right: 4.5%;
}
}
.image-wrapper{
width: 100%;
height: 330upx;
overflow: hidden;
position: relative;
image{
width: 100%;
position: fixed;
bottom: 0;
height: 100%;
opacity: 1;
}
.goods-tip{
display: block;
position: absolute;
top: 20upx;
right: 32upx;
width: 56upx;
height: 56upx;
background-color: #000000;
line-height: 56upx;
text-align: center;
border-radius: 50%;
font-size:18upx!important;
color: #ffffff;
}
}
.goods-info{
padding: 8upx 20upx 22upx;
position: relative;
.title{
font-size: 24upx;
color: #202020;
line-height: 34upx;
}
.price{
font-size: 24upx;
color: $text-color-red;
line-height:28upx;
}
.sell{
flex-basis: 16upx;
color: #B1ADAD;
margin-left: 4upx;
}
.icon-buy{
position: absolute;
width: 44upx;
height: 44upx;
bottom: 24upx;
right: 24upx;
}
}
}
}
.choice{
width: 100%;
height: 88upx;
padding-left: 40upx;
background-color: #F2F2F2;
font-size:24upx;
color: #8E9299;
margin-bottom: 20upx;
}
.choice-main{
padding: 0upx 32upx;
.choice-price{
font-size:24upx;
line-height:34upx;
color: #252A33;
margin-bottom: 24upx;
}
.line{
width:24upx;
height:2upx;
background-color: #DADEE6;
margin: 0 12upx;
vertical-align: middle;
margin-top: 30upx;
}
.choice-between{
display: flex;
margin-bottom: 36upx;
input{
width: 136upx;
height: 64upx;
border: 2upx solid #DADEE6;
padding-left: 16upx;
}
}
.choice-brand{
display: flex;
flex-wrap: wrap;
.choice-item{
margin-right:32upx;
font-size:28upx;
line-height:40upx;
padding: 4upx 32upx;
background:linear-gradient(180deg,rgba(255,162,162,1) 0%,rgba(255,105,105,1) 100%);
border-radius:24upx;
margin-bottom: 44upx;
color: #ffffff;
&:nth-of-type(2n){
margin-right:0upx;
}
}
}
.choice-submit{
display: flex;
position: absolute;
bottom: 72upx;
.sub{
font-size:30upx;
height: 68upx;
line-height: 60upx;
color: #FF6969;
padding: 0upx 24upx;
border:2px solid #DADEE6;
border-radius:34upx;
color: #DADEE6;
}
.confirm{
border-color: #FF6969;
color: #FF6969;
margin-left: 32upx;
}
}
}
</style>
uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue
View file @ 6f963099
......@@ -116,7 +116,8 @@ export default {
// 裁剪框宽度，单位px
rectWidth: 200,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg'
fileType: 'jpg',
src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
};
},
onLoad(option) {
......@@ -163,9 +164,9 @@ export default {
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
let src = res.tempFilePaths[0];
this.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
this.cropper.pushOrign(src);
this.cropper.pushOrign(this.src);
}
});
},
......@@ -180,6 +181,9 @@ export default {
this.cropper.touchEnd(e);
},
getCropperImage(isPre = false) {
console.log(this.src);
if(!this.src) return this.$u.toast('请先选择图片再裁剪');
let cropper_opt = {
destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
destWidth: Number(this.destWidth),
......@@ -212,11 +216,11 @@ export default {
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const src = res.tempFilePaths[0];
success: (res) => {
self.src = res.tempFilePaths[0];
// 获取裁剪图片资源后，给data添加src属性及其值
self.cropper.pushOrign(src);
self.cropper.pushOrign(this.src);
}
});
}
......@@ -237,7 +241,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
z-index: 99999999999999;
z-index: 11;
}
.cropper-buttons {
......
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ 6f963099
......@@ -267,6 +267,7 @@ export default {
font-size: 26rpx;
line-height: 36rpx;
color: $u-tips-color;
word-wrap: break-word;
}
.u-cell__value {
......
uview-ui/components/u-count-down/u-count-down.vue
View file @ 6f963099
<template>
<view class="u-countdown">
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays">
<view class="u-countdown-item" :style="[itemStyle]" v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))">
<view class="u-countdown-time" :style="[letterStyle]">
{{ d }}
</view>
......@@ -8,7 +8,7 @@
<view
class="u-countdown-colon"
:style="{fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator == 'colon' ? '4rpx' : 0}"
v-if="showDays"
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))"
>
{{ separator == 'colon' ? ':' : '天' }}
</view>
......@@ -63,6 +63,7 @@
* @property {String} separator-color 分隔符的颜色（默认#303133）
* @property {String Number} font-size 倒计时字体大小，单位rpx（默认30）
* @property {Boolean} show-border 是否显示倒计时数字的边框（默认false）
* @property {Boolean} hide-zero-day 当"天"的部分为0时，隐藏该字段 （默认true）
* @property {String} border-color 数字边框的颜色（默认#303133）
* @property {String} bg-color 倒计时数字的背景颜色（默认#ffffff）
* @property {String} color 倒计时数字的颜色（默认#303133）
......@@ -153,6 +154,11 @@ export default {
type: Boolean,
default: true
},
// 当"天"的部分为0时，不显示
hideZeroDay: {
type: Boolean,
default: false
}
},
watch: {
// 监听时间戳的变化
......
uview-ui/components/u-image/u-image.vue
View file @ 6f963099
<template>
<view
class="u-image"
@tap.stop.prevent="onClick"
@tap="onClick"
:style="[wrapStyle, backgroundStyle]"
>
<image
......
uview-ui/components/u-input/u-input.vue
View file @ 6f963099
......@@ -42,6 +42,7 @@
:maxlength="inputMaxlength"
:focus="focus"
:confirmType="confirmType"
:cursor-spacing="getCursorSpacing"
@focus="onFocus"
@blur="handleBlur"
@input="handleInput"
......@@ -77,6 +78,7 @@ import Emitter from '../../libs/util/emitter.js';
* @property {String} placeholder placeholder显示值(默认 '请输入内容')
* @property {Boolean} disabled 是否禁用输入框(默认false)
* @property {String Number} maxlength 输入框的最大可输入长度(默认140)
* @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
* @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
* @property {Object} custom-style 自定义输入框的样式，对象形式
......@@ -178,6 +180,11 @@ export default {
type: Boolean,
default: true
},
// 指定光标与键盘的距离，单位 px
cursorSpacing: {
type: [Number, String],
default: 0
}
},
data() {
return {
......@@ -219,6 +226,10 @@ export default {
style.marginRight = this.marginRight + 'px';
style = Object.assign(style, this.customStyle);
return style;
},
//
getCursorSpacing() {
return Number(this.cursorSpacing);
}
},
created() {
......
uview-ui/components/u-modal/u-modal.vue
View file @ 6f963099
......@@ -6,6 +6,7 @@
:length="width" :mask-close-able="maskCloseAble"
:border-radius="borderRadius"
@close="popupClose"
:negative-top="negativeTop"
>
<view class="u-model">
<view v-if="showTitle" class="u-model-title u-line-1" :style="[titleStyle]">{{ title }}</view>
......@@ -59,6 +60,7 @@
* @property {Boolean} show-title 是否显示标题（默认true）
* @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
* @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
* @property {Stringr | Number} negative-top modal往上偏移的值
* @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
* @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
* @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
......@@ -185,6 +187,11 @@ export default {
maskCloseAble: {
type: Boolean,
default: false
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
negativeTop: {
type: [String, Number],
default: 0
}
},
data() {
......
uview-ui/components/u-navbar/u-navbar.vue
View file @ 6f963099
......@@ -275,7 +275,7 @@ export default {
}
.u-title {
line-height: 1;
line-height: 60rpx;
font-size: 32rpx;
flex: 1;
}
......
uview-ui/components/u-picker/u-picker.vue
View file @ 6f963099
<template>
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-datetime-picker" @tap.stop>
<view class="u-picker-header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-picker-header" @touchmove.stop.prevent="">
<view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150" @tap="getResult('cancel')">取消</view>
<view class="u-picker__title">{{ title }}</view>
<view
......
uview-ui/components/u-popup/u-popup.vue
View file @ 6f963099
......@@ -56,6 +56,7 @@
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
* @property {Numberr | String} border-radius 弹窗圆角值（默认0）
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
* @property {Boolean} closeable 是否显示关闭图标（默认false）
......@@ -174,6 +175,11 @@ export default {
height: {
type: String,
default: ''
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
negativeTop: {
type: [String, Number],
default: 0
}
},
data() {
......@@ -231,6 +237,7 @@ export default {
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
style.height = this.height ? this.getUnitValue(this.height) : 'auto';
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`;
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}rpx`;
// 不加可能圆角无效
......
uview-ui/components/u-row/u-row.vue
View file @ 6f963099
......@@ -71,6 +71,7 @@
/* #ifndef MP-WEIXIN */
display: flex;
/* #endif */
flex-wrap: wrap;
}
.u-row:after {
......
uview-ui/components/u-select/u-select.vue
View file @ 6f963099
......@@ -11,7 +11,7 @@
</view> -->
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-select">
<view class="u-select__header" @touchmove.stop.prevent="stop" catchtouchmove="stop">
<view class="u-select__header" @touchmove.stop.prevent="">
<view
class="u-select__header__cancel u-select__header__btn"
:style="{ color: cancelColor }"
......
uview-ui/components/u-tabbar/u-tabbar.vue 0 → 100644
View file @ 6f963099
<template>
<view class="u-tabbar">
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.u-tabbar {
}
</style>
uview-ui/components/u-upload/u-upload.vue
View file @ 6f963099
......@@ -255,14 +255,16 @@ export default {
!tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
});
}
},
// 监听lists的变化，发出事件
lists(n) {
this.$emit('on-list-change', n);
}
},
methods: {
// 清除列表
clear() {
this.lists = [];
// 如果是清空形式的话，发出"on-list-change"事件
this.$emit('on-list-change', this.lists);
},
// 重新上传队列中上传失败的所有文件
reUpload() {
......@@ -305,8 +307,6 @@ export default {
progress: 0,
error: false
});
// 列表发生改变，发出事件，第二个参数为当前发生变化的项的索引
this.$emit('on-list-change', this.lists);
}
});
// 每次图片选择完，抛出一个事件，并将当前内部选择的图片数组抛出去
......@@ -437,8 +437,6 @@ export default {
this.$forceUpdate();
this.$emit('on-remove', index, this.lists);
this.showToast('移除成功');
// 列表发生改变，发出事件
this.$emit('on-list-change', this.lists);
}
}
});
......
uview-ui/libs/config/config.js
View file @ 6f963099
// 此版本发布于2020-07-01
let version = '1.4.3';
// 此版本发布于2020-07-03
let version = '1.4.4';
export default {
v: version,
......
uview-ui/package.json
View file @ 6f963099
{
"name": "uview-ui",
"version": "1.4.3",
"version": "1.4.4",
"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
"main": "index.js",
"keywords": ["uview", "uView", "uni-app", "uni-app ui", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
......
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