Skip to content

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

1. 【新增】modal和popup的中部弹出模式新增negative-top参数，可以将弹出区域往上移，避免与弹出的键盘重合。 

2. 【新增】countdown组件新增hide-zero-day参数，当"天"为0时自动隐藏该字段
3. 【新增】input组件添加cursor-spacing参数
4. 【优化】image组件允许事件冒泡到外层
5. 【优化】优化cell组件的label数字不会换行的问题
6. 【优化】优化navbar的title为英文时，可能会发生部分字母被竖向截断的问题
7. 【优化】优化picker和select滑动顶部区域，可能会产生报错的问题
8. 【优化】row组件允许flex换行
9. 【优化】优化upload组件的on-list-change事件逻辑
10. 【优化】优化avatar-cropper组件没有选择图片也能点击确定进行裁剪的问题
11. 【修复】修正image组件的border-radius无法接受带单位的值的问题
12. 【新增rate评分组件新增v-model双向绑定的形式
13. 【新增numberBox步进器组件新增step支持小数加减，另外新增long-press和press-time用于长按连续加减
parent 6f963099
Hide whitespace changes
Inline Side-by-side
Showing with 361 additions and 531 deletions
manifest.json
View file @ cae3f55a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.4.4", "versionName" : "1.4.5",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
pages.json
View file @ cae3f55a
...@@ -6,16 +6,16 @@ ...@@ -6,16 +6,16 @@
// "current": 0, //当前激活的模式(list 的索引项) // "current": 0, //当前激活的模式(list 的索引项)
// "list": [{ // "list": [{
// "name": "test", //模式名称 // "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面，必选 // "path": "pages/componentsB/checkbox/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到 // "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }] // }]
// }, // },
"pages": [ "pages": [
// 演示-组件 // 演示-组件
{ {
"path": "pages/example/components", "path": "pages/example/components",
"style": { "style": {
"navigationBarTitleText": "组件" "navigationBarTitleText": "组件"
} }
}, },
// avatarCropper-头像裁剪 // avatarCropper-头像裁剪
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
"navigationBarTitleText": "badge-徽标数" "navigationBarTitleText": "badge-徽标数"
} }
}, },
// button按钮 // button按钮
{ {
"path": "button/index", "path": "button/index",
"style": { "style": {
...@@ -583,7 +583,7 @@ ...@@ -583,7 +583,7 @@
"style": { "style": {
"navigationBarTitleText": "icon-字体图标" "navigationBarTitleText": "icon-字体图标"
} }
}, // avatar-用户头像展示 }, // avatar-用户头像展示
{ {
"path": "avatar/index", "path": "avatar/index",
"style": { "style": {
......
pages/componentsA/form/index.vue
View file @ cae3f55a
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
<view class="u-config-wrap"> <view class="u-config-wrap">
<view class="u-config-title u-border-bottom"> <view class="u-config-title u-border-bottom">
参数配置 参数配置
</view> </view>
<view class="u-config-item"> <view class="u-config-item">
<view class="u-item-title">label对齐方式</view> <view class="u-item-title">label对齐方式</view>
...@@ -119,15 +119,15 @@ export default { ...@@ -119,15 +119,15 @@ export default {
], ],
rules: { rules: {
name: [ name: [
{ {
required: true, required: true,
message: '请输入姓名', message: '请输入姓名',
trigger: 'blur' , trigger: 'blur' ,
}, },
{ {
min: 3, min: 3,
max: 5, max: 5,
message: '姓名长度在3到5个字符', message: '姓名长度在3到5个字符',
trigger: ['change','blur'], trigger: ['change','blur'],
}, },
{ {
...@@ -160,19 +160,19 @@ export default { ...@@ -160,19 +160,19 @@ export default {
], ],
sex: [ sex: [
{ {
required: true, required: true,
message: '请选择性别', message: '请选择性别',
trigger: 'change' trigger: 'change'
}, },
], ],
intro: [ intro: [
{ {
required: true, required: true,
message: '请填写简介' message: '请填写简介'
}, },
{ {
min: 5, min: 5,
message: '简介不能少于5个字', message: '简介不能少于5个字',
trigger: 'change' , trigger: 'change' ,
}, },
// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文 // 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
...@@ -184,7 +184,7 @@ export default { ...@@ -184,7 +184,7 @@ export default {
], ],
likeFruit: [ likeFruit: [
{ {
required: true, required: true,
message: '请选择您喜欢的水果', message: '请选择您喜欢的水果',
trigger: 'change', trigger: 'change',
type: 'array', type: 'array',
...@@ -192,28 +192,28 @@ export default { ...@@ -192,28 +192,28 @@ export default {
], ],
payType: [ payType: [
{ {
required: true, required: true,
message: '请选择任意一种支付方式', message: '请选择任意一种支付方式',
trigger: 'change', trigger: 'change',
} }
], ],
region: [ region: [
{ {
required: true, required: true,
message: '请选择地区', message: '请选择地区',
trigger: 'change', trigger: 'change',
} }
], ],
goodsType: [ goodsType: [
{ {
required: true, required: true,
message: '请选择商品类型', message: '请选择商品类型',
trigger: 'change', trigger: 'change',
} }
], ],
phone: [ phone: [
{ {
required: true, required: true,
message: '请输入手机号', message: '请输入手机号',
trigger: ['change','blur'], trigger: ['change','blur'],
}, },
...@@ -229,7 +229,7 @@ export default { ...@@ -229,7 +229,7 @@ export default {
], ],
code: [ code: [
{ {
required: true, required: true,
message: '请输入验证码', message: '请输入验证码',
trigger: ['change','blur'], trigger: ['change','blur'],
}, },
...@@ -241,7 +241,7 @@ export default { ...@@ -241,7 +241,7 @@ export default {
], ],
password: [ password: [
{ {
required: true, required: true,
message: '请输入密码', message: '请输入密码',
trigger: ['change','blur'], trigger: ['change','blur'],
}, },
...@@ -254,7 +254,7 @@ export default { ...@@ -254,7 +254,7 @@ export default {
], ],
rePassword: [ rePassword: [
{ {
required: true, required: true,
message: '请重新输入密码', message: '请重新输入密码',
trigger: ['change','blur'], trigger: ['change','blur'],
}, },
...@@ -337,7 +337,7 @@ export default { ...@@ -337,7 +337,7 @@ export default {
}; };
}, },
onLoad() { onLoad() {
}, },
computed: { computed: {
borderCurrent() { borderCurrent() {
...@@ -445,7 +445,7 @@ export default { ...@@ -445,7 +445,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 40rpx 0; margin: 40rpx 0;
.agreement-text { .agreement-text {
padding-left: 8rpx; padding-left: 8rpx;
color: $u-tips-color; color: $u-tips-color;
......
pages/componentsB/checkbox/index.vue
View file @ cae3f55a
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
activeColor: '#2979ff', activeColor: '#2979ff',
size: 34, size: 34,
wrap: false, wrap: false,
width: '' width: 'auto'
} }
}, },
computed: { computed: {
......
pages/componentsB/image/index.vue
View file @ cae3f55a
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area u-flex u-row-center"> <view class="u-demo-area u-flex u-row-center">
<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill"> <u-image border-radius="100%" :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading> <u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view> <view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image> </u-image>
......
pages/componentsB/radio/index.vue
View file @ cae3f55a
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
activeColor: '#2979ff', activeColor: '#2979ff',
size: 34, size: 34,
wrap: false, wrap: false,
width: '' width: 'auto'
} }
}, },
methods: { methods: {
......
pages/componentsB/rate/index.vue
View file @ cae3f55a
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<view class="u-demo-wrap"> <view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view> <view class="u-demo-title">演示效果</view>
<view class="u-demo-area"> <view class="u-demo-area">
<u-rate :count="count" :current="current" @change="change" <u-rate v-model="value" :count="count" @change="change"
:active-color="activeColor" :inaction-color="inactiveColor" :active-color="activeColor" :inaction-color="inactiveColor"
:active-icon="activeIcon" :inactive-icon="inactiveIcon" :active-icon="activeIcon" :inactive-icon="inactiveIcon"
:disabled="disabled"></u-rate> :disabled="disabled"></u-rate>
</view> </view>
</view> </view>
...@@ -45,13 +45,20 @@ ...@@ -45,13 +45,20 @@
export default { export default {
data() { data() {
return { return {
current: 1, // 1.4.5后推荐使用v-model双向绑定，弃用current
// current: 1,
activeColor: '#FA3534', activeColor: '#FA3534',
inactiveColor: '#b2b2b2', inactiveColor: '#b2b2b2',
disabled: false, disabled: false,
count: 5, count: 5,
customIcon: false, customIcon: false,
plain: false, plain: false,
value: 0
}
},
watch: {
value(n) {
// console.log(n);
} }
}, },
computed: { computed: {
......
pages/componentsC/test/index.vue
View file @ cae3f55a
<template> <template>
<view class="container"> <u-checkbox-group>
<view class="search-box"> <u-checkbox v-model="checked">xxxx</u-checkbox>
<u-search @focus="getKeys" @blur="hideKey" bg-color='#ffffff' border-color='rgba(242, 242, 242, 1)' placeholder="日照香炉生紫烟" :clearabled="true" v-model="keyword"></u-search> </u-checkbox-group>
</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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
keyword: '', checked: true,
keys:[],
page:1,
pageSize:10,
mainData:[],
showChoice:false,
higtPrice:'',
lowPrice:''
};
},
created() {
this.GetData()
},
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> </script>
<style scoped> <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%;
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> </style>
pages/example/components.config.js
View file @ cae3f55a
...@@ -209,6 +209,10 @@ export default [{ ...@@ -209,6 +209,10 @@ export default [{
}, { }, {
groupName: '导航组件', groupName: '导航组件',
list: [{ list: [{
path: '/pages/componentsB/tabbar/index',
icon: 'tabbar',
title: 'Tabbar 底部导航栏',
},{
path: '/pages/componentsA/backTop/index', path: '/pages/componentsA/backTop/index',
icon: 'backTop', icon: 'backTop',
title: 'BackTop 返回顶部', title: 'BackTop 返回顶部',
......
uview-ui/components/u-car-keyboard/u-car-keyboard.vue
View file @ cae3f55a
...@@ -153,12 +153,14 @@ ...@@ -153,12 +153,14 @@
backspaceClick() { backspaceClick() {
this.$emit('backspace'); this.$emit('backspace');
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = null;
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.$emit('backspace'); this.$emit('backspace');
}, 250); }, 250);
}, },
clearTimer() { clearTimer() {
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null;
}, },
} }
}; };
...@@ -166,7 +168,7 @@ ...@@ -166,7 +168,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-keyboard-grids { .u-keyboard-grids {
background: rgb(215, 215, 217); background: rgb(215, 215, 217);
padding: 24rpx 0; padding: 24rpx 0;
......
uview-ui/components/u-checkbox-group/u-checkbox-group.vue
View file @ cae3f55a
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-checkbox-group { .u-checkbox-group {
/* #ifndef MP */ /* #ifndef MP */
display: inline-flex; display: inline-flex;
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ cae3f55a
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
activeColor: '#2979ff', activeColor: '#2979ff',
max: 999999, max: 999999,
emitEvent: () => {}, emitEvent: () => {},
width: '', width: 'auto',
wrap: false wrap: false
} }
} }
...@@ -199,7 +199,7 @@ ...@@ -199,7 +199,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-checkbox { .u-checkbox {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
user-select: none; user-select: none;
line-height: 1.8; line-height: 1.8;
} }
.u-checkbox__icon-wrap, .u-checkbox__icon-wrap,
.u-checkbox__label { .u-checkbox__label {
color: $u-content-color; color: $u-content-color;
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ cae3f55a
<template> <template>
<view class="u-form-item" :class="{'u-border-bottom': borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}"> <view class="u-form-item" :class="{'u-border-bottom': parentParam.borderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
<view class="u-form-item__body" :style="{ <view class="u-form-item__body" :style="{
flexDirection: labelPosition == 'left' ? 'row' : 'column' flexDirection: parentParam.labelPosition == 'left' ? 'row' : 'column'
}"> }">
<view class="u-form-item--left" :style="{ <view class="u-form-item--left" :style="{
width: labelPosition == 'left' ? getLabelWidth : '100%', width: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%',
flex: `0 0 ${labelPosition == 'left' ? getLabelWidth : '100%'}`, flex: `0 0 ${parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '100%'}`,
marginBottom: labelPosition == 'left' ? 0 : '10rpx', marginBottom: parentParam.labelPosition == 'left' ? 0 : '10rpx',
}"> }">
<!-- 为了块对齐 --> <!-- 为了块对齐 -->
<view class="u-form-item--left__content"> <view class="u-form-item--left__content">
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<view class="u-form-item--left__content__icon" v-if="leftIcon"> <view class="u-form-item--left__content__icon" v-if="leftIcon">
<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon> <u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
</view> </view>
<view class="u-form-item--left__content__label" :style="[labelStyle, { <view class="u-form-item--left__content__label" :style="[parentParam.labelStyle, {
'justify-content': labelAlign == 'left' ? 'flex-star' : labelAlign == 'center' ? 'center' : 'flex-end' 'justify-content': parentParam.labelAlign == 'left' ? 'flex-star' : parentParam.labelAlign == 'center' ? 'center' : 'flex-end'
}]"> }]">
{{label}} {{label}}
</view> </view>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</view> </view>
</view> </view>
<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{ <view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
paddingLeft: labelPosition == 'left' ? getLabelWidth : '0', paddingLeft: parentParam.labelPosition == 'left' ? $u.addUnit(parentParam.labelWidth) : '0',
}">{{validateMessage}}</view> }">{{validateMessage}}</view>
</view> </view>
</template> </template>
...@@ -65,7 +65,7 @@ schema.warning = function(){}; ...@@ -65,7 +65,7 @@ schema.warning = function(){};
* @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false) * @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false)
* @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item> * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
*/ */
export default { export default {
name: 'u-form-item', name: 'u-form-item',
mixins: [Emitter], mixins: [Emitter],
...@@ -89,13 +89,13 @@ export default { ...@@ -89,13 +89,13 @@ export default {
}, },
// 是否显示表单域的下划线边框 // 是否显示表单域的下划线边框
borderBottom: { borderBottom: {
type: Boolean, type: [Boolean, String],
default: true default: ''
}, },
// label的位置，left-左边，top-上边 // label的位置，left-左边，top-上边
labelPosition: { labelPosition: {
type: String, type: String,
default: 'left' default: ''
}, },
// label的宽度，单位rpx // label的宽度，单位rpx
labelWidth: { labelWidth: {
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
// lable字体的对齐方式 // lable字体的对齐方式
labelAlign: { labelAlign: {
type: String, type: String,
default: 'left' default: ''
}, },
// 右侧图标 // 右侧图标
rightIcon: { rightIcon: {
...@@ -152,9 +152,26 @@ export default { ...@@ -152,9 +152,26 @@ export default {
validateMessage: '' ,// 校验失败的提示语 validateMessage: '' ,// 校验失败的提示语
// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色， // 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
// border-bottom-下边框呈现红色，none-无提示 // border-bottom-下边框呈现红色，none-无提示
errorType: ['message'] errorType: ['message'],
parentParam: {
labelStyle: {}, // lable的样式，对象形式
labelAlign: '', // lable的对齐方式
labelWidth: '', // 提示文字的宽度，单位rpx
labelPosition: '', // 表单域提示文字的位置
borderBottom: '', // 是否显示表单域的下划线边框
}
}; };
}, },
created() {
// 如果子组件有值，优先使用子组件的，否则使用u-from提供的值
this.parentParam = this.$u.getParent.call(this, 'u-form', {
labelStyle: this.labelStyle,
labelWidth: this.labelWidth,
labelPosition: this.labelPosition,
borderBottom: this.borderBottom,
labelAlign: this.labelAlign
});
},
watch: { watch: {
validateState(val) { validateState(val) {
this.broadcastInputError(); this.broadcastInputError();
...@@ -177,10 +194,6 @@ export default { ...@@ -177,10 +194,6 @@ export default {
else return false; else return false;
} }
}, },
// 获取labelWidth的值
getLabelWidth() {
return this.labelWidth == 'auto' ? 'auto' : this.labelWidth + 'rpx';
}
}, },
methods: { methods: {
broadcastInputError() { broadcastInputError() {
...@@ -291,7 +304,7 @@ export default { ...@@ -291,7 +304,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-form-item { .u-form-item {
display: flex; display: flex;
// align-items: flex-start; // align-items: flex-start;
...@@ -301,30 +314,30 @@ export default { ...@@ -301,30 +314,30 @@ export default {
box-sizing: border-box; box-sizing: border-box;
line-height: $u-form-item-height; line-height: $u-form-item-height;
flex-direction: column; flex-direction: column;
&__border-bottom--error:after { &__border-bottom--error:after {
border-color: $u-type-error; border-color: $u-type-error;
} }
&__body { &__body {
display: flex; display: flex;
} }
&--left { &--left {
display: flex; display: flex;
align-items: center; align-items: center;
&__content { &__content {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 10rpx; padding-right: 10rpx;
flex: 1; flex: 1;
&__icon { &__icon {
margin-right: 8rpx; margin-right: 8rpx;
} }
&--required { &--required {
position: absolute; position: absolute;
left: -16rpx; left: -16rpx;
...@@ -332,7 +345,7 @@ export default { ...@@ -332,7 +345,7 @@ export default {
color: $u-type-error; color: $u-type-error;
padding-top: 6rpx; padding-top: 6rpx;
} }
&__label { &__label {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -340,15 +353,15 @@ export default { ...@@ -340,15 +353,15 @@ export default {
} }
} }
} }
&--right { &--right {
flex: 1; flex: 1;
&__content { &__content {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
&__slot { &__slot {
flex: 1; flex: 1;
/* #ifndef MP */ /* #ifndef MP */
...@@ -356,13 +369,13 @@ export default { ...@@ -356,13 +369,13 @@ export default {
align-items: center; align-items: center;
/* #endif */ /* #endif */
} }
&__icon { &__icon {
margin-left: 10rpx; margin-left: 10rpx;
} }
} }
} }
&__message { &__message {
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 24rpx;
......
uview-ui/components/u-form/u-form.vue
View file @ cae3f55a
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
* @property {Array} errorType 错误的提示方式，数组形式，见上方说明(默认['message']) * @property {Array} errorType 错误的提示方式，数组形式，见上方说明(默认['message'])
* @example <u-form :model="form" ref="uForm"></u-form> * @example <u-form :model="form" ref="uForm"></u-form>
*/ */
export default { export default {
name: 'u-form', name: 'u-form',
props: { props: {
...@@ -37,7 +37,34 @@ export default { ...@@ -37,7 +37,34 @@ export default {
default() { default() {
return ['message', 'toast'] return ['message', 'toast']
} }
} },
// 是否显示表单域的下划线边框
borderBottom: {
type: Boolean,
default: true
},
// label的位置，left-左边，top-上边
labelPosition: {
type: String,
default: 'left'
},
// label的宽度，单位rpx
labelWidth: {
type: [String, Number],
default: 90
},
// lable字体的对齐方式
labelAlign: {
type: String,
default: 'left'
},
// lable的样式，对象形式
labelStyle: {
type: Object,
default() {
return {}
}
},
}, },
provide() { provide() {
return { return {
......
uview-ui/components/u-image/u-image.vue
View file @ cae3f55a
...@@ -13,17 +13,17 @@ ...@@ -13,17 +13,17 @@
:lazy-load="lazyLoad" :lazy-load="lazyLoad"
class="u-image__image" class="u-image__image"
:style="{ :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx', borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
}" }"
></image> ></image>
<view v-if="showLoading && loading" class="u-image__loading" :style="{ <view v-if="showLoading && loading" class="u-image__loading" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx', borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
}"> }">
<slot v-if="$slots.loading" name="loading" /> <slot v-if="$slots.loading" name="loading" />
<u-icon v-else :name="loadingIcon"></u-icon> <u-icon v-else :name="loadingIcon"></u-icon>
</view> </view>
<view v-if="showError && isError && !loading" class="u-image__error" :style="{ <view v-if="showError && isError && !loading" class="u-image__error" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx', borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
}"> }">
<slot v-if="$slots.error" name="error" /> <slot v-if="$slots.error" name="error" />
<u-icon v-else :name="errorIcon"></u-icon> <u-icon v-else :name="errorIcon"></u-icon>
......
uview-ui/components/u-number-box/u-number-box.vue
View file @ cae3f55a
<template> <template>
<view class="u-numberbox"> <view class="u-numberbox">
<view class="u-icon-minus" @tap.stop="minus" :class="{ 'u-icon-disabled': disabled || inputVal <= min }" :style="{ <view class="u-icon-minus" @touchstart.stop="btnTouchStart('minus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }" :style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
width: inputWidth + 'rpx' width: inputWidth + 'rpx'
}" /> }" />
<view class="u-icon-plus" @tap.stop="plus" :class="{ 'u-icon-disabled': disabled || inputVal >= max }" :style="{ <view class="u-icon-plus" @touchstart.stop="btnTouchStart('plus')" @touchend.stop="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }" :style="{
background: bgColor, background: bgColor,
height: inputHeight + 'rpx', height: inputHeight + 'rpx',
color: color color: color
...@@ -42,11 +42,13 @@ ...@@ -42,11 +42,13 @@
* @property {String | Number} input-width 输入框宽度，单位rpx（默认80） * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
* @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50） * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
* @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框 * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
* @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
* @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200） * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
* @event {Function} change 输入框内容发生变化时触发，对象形式 * @event {Function} change 输入框内容发生变化时触发，对象形式
* @event {Function} blur 输入框失去焦点时触发，对象形式 * @event {Function} blur 输入框失去焦点时触发，对象形式
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式 * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式 * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
* @example <u-number-box :min="1" :max="100"></u-number-box> * @example <u-number-box :min="1" :max="100"></u-number-box>
*/ */
export default { export default {
...@@ -117,6 +119,16 @@ ...@@ -117,6 +119,16 @@
cursorSpacing: { cursorSpacing: {
type: [Number, String], type: [Number, String],
default: 100 default: 100
},
// 是否开启长按连续递增或递减
longPress: {
type: Boolean,
default: true
},
// 开启长按触发后，每触发一次需要多久
pressTime: {
type: [Number, String],
default: 250
} }
}, },
watch: { watch: {
...@@ -128,19 +140,20 @@ ...@@ -128,19 +140,20 @@
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串 // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
if (v1 == '') return; if (v1 == '') return;
let value = 0; let value = 0;
// 首先判断是否正整数，并且在min和max之间，如果不是，使用原来值 // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
let tmp = /(^\d+$)/.test(v1); let tmp = this.$u.test.number(v1);
if (tmp && v1 >= this.min && v1 <= this.max) value = v1; if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
else value = v2; else value = v2;
this.handleChange(value, 'change'); this.handleChange(value, 'change');
this.$nextTick(() => { this.$nextTick(() => {
this.inputVal = value; this.inputVal = v1;
}) })
} }
}, },
data() { data() {
return { return {
inputVal: 1 // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态 inputVal: 1 , // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
timer: null, // 用作长按的定时器
}; };
}, },
created() { created() {
...@@ -153,6 +166,25 @@ ...@@ -153,6 +166,25 @@
} }
}, },
methods: { methods: {
// 点击退格键
btnTouchStart(callback) {
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
this[callback]();
// 如果没开启长按功能，直接返回
if(!this.longPress) return ;
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = null;
this.timer = setInterval(() => {
// 执行加或减函数
this[callback]();
}, this.pressTime);
},
clearTimer() {
this.$nextTick(() => {
clearInterval(this.timer);
this.timer = null;
})
},
minus() { minus() {
this.computeVal('minus'); this.computeVal('minus');
}, },
...@@ -189,6 +221,7 @@ ...@@ -189,6 +221,7 @@
} catch (e) { } catch (e) {
baseNum2 = 0; baseNum2 = 0;
} }
console.log(num1, num2, baseNum1, baseNum2);
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision); return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
...@@ -244,7 +277,7 @@ ...@@ -244,7 +277,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-numberbox { .u-numberbox {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
......
uview-ui/components/u-number-keyboard/u-number-keyboard.vue
View file @ cae3f55a
...@@ -2,153 +2,157 @@ ...@@ -2,153 +2,157 @@
<view class="u-keyboard" @touchmove.stop.prevent> <view class="u-keyboard" @touchmove.stop.prevent>
<view class="u-keyboard-grids"> <view class="u-keyboard-grids">
<view <view
class="u-keyboard-grids-item" class="u-keyboard-grids-item"
:class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']" :class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']"
:style="[itemStyle(index)]" :style="[itemStyle(index)]"
v-for="(item, index) in numList" v-for="(item, index) in numList"
:key="index" :key="index"
:hover-class="hoverClass(index)" :hover-class="hoverClass(index)"
:hover-stay-time="100" :hover-stay-time="100"
@tap="keyboardClick(item)" @tap="keyboardClick(item)">
>
<view class="u-keyboard-grids-btn">{{ item }}</view> <view class="u-keyboard-grids-btn">{{ item }}</view>
</view> </view>
<view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick" @touchend="clearTimer"> <view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick"
<view class="u-keyboard-back u-keyboard-grids-btn"><u-icon name="backspace" :size="38" :bold="true"></u-icon></view> @touchend="clearTimer">
<view class="u-keyboard-back u-keyboard-grids-btn">
<u-icon name="backspace" :size="38" :bold="true"></u-icon>
</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
// 键盘的类型，number-数字键盘，card-身份证键盘 // 键盘的类型，number-数字键盘，card-身份证键盘
mode: { mode: {
type: String, type: String,
default: 'number' default: 'number'
},
// 是否显示键盘的"."符号
dotEnabled: {
type: Boolean,
default: true
},
// 是否打乱键盘按键的顺序
random: {
type: Boolean,
default: false
}
}, },
// 是否显示键盘的"."符号 data() {
dotEnabled: { return {
type: Boolean, backspace: 'backspace', // 退格键内容
default: true dot: '.', // 点
timer: null, // 长按多次删除的事件监听
cardX: 'X' // 身份证的X符号
};
}, },
// 是否打乱键盘按键的顺序 computed: {
random: { // 键盘需要显示的内容
type: Boolean, numList() {
default: false let tmp = [];
} if (!this.dotEnabled && this.mode == 'number') {
}, if (!this.random) {
data() { return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
return { } else {
backspace: 'backspace', // 退格键内容 return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
dot: '.', // 点 }
timer: null, // 长按多次删除的事件监听 } else if (this.dotEnabled && this.mode == 'number') {
cardX: 'X' // 身份证的X符号 if (!this.random) {
}; return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
}, } else {
computed: { return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
// 键盘需要显示的内容 }
numList() { } else if (this.mode == 'card') {
let tmp = []; if (!this.random) {
if (!this.dotEnabled && this.mode == 'number') { return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
if (!this.random) { } else {
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
} else { }
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
} }
} else if (this.dotEnabled && this.mode == 'number') { },
if (!this.random) { // 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]; itemStyle() {
} else { return index => {
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]); let style = {};
} if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%';
} else if (this.mode == 'card') { return style;
if (!this.random) { };
return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]; },
} else { // 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]); btnBgGray() {
return index => {
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true;
else return false;
};
},
hoverClass() {
return index => {
if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
else return 'u-keyboard-hover';
} }
} }
}, },
// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间 methods: {
itemStyle() { // 点击退格键
return index => { backspaceClick() {
let style = {}; this.$emit('backspace');
if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%'; clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
return style; this.timer = null;
}; this.timer = setInterval(() => {
}, this.$emit('backspace');
// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候 }, 250);
btnBgGray() { },
return index => { clearTimer() {
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true; clearInterval(this.timer);
else return false; this.timer = null;
}; },
}, // 获取键盘显示的内容
hoverClass() { keyboardClick(val) {
return index => { // 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
if(!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class'; if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
else return 'u-keyboard-hover'; this.$emit('change', val);
} }
} }
}, };
methods: {
// 点击退格键
backspaceClick() {
this.$emit('backspace');
 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = setInterval(() => {
    this.$emit('backspace');
      }, 250);
},
clearTimer() {
clearInterval(this.timer);
},
// 获取键盘显示的内容
keyboardClick(val) {
// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
this.$emit('change', val);
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-keyboard { .u-keyboard {
position: relative; position: relative;
z-index: 1003; z-index: 1003;
} }
.u-keyboard-grids { .u-keyboard-grids {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.u-keyboard-grids-item { .u-keyboard-grids-item {
flex: 0 0 33.3333333333%; flex: 0 0 33.3333333333%;
text-align: center; text-align: center;
font-size: 50rpx; font-size: 50rpx;
color: #333; color: #333;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 110rpx; height: 110rpx;
font-weight: 500; font-weight: 500;
} }
.u-bg-gray { .u-bg-gray {
background-color: #e7e6eb; background-color: #e7e6eb;
} }
.u-keyboard-back { .u-keyboard-back {
font-size: 36rpx; font-size: 36rpx;
} }
.u-keyboard-hover { .u-keyboard-hover {
background-color: #e7e6eb; background-color: #e7e6eb;
} }
</style> </style>
uview-ui/components/u-rate/u-rate.vue
View file @ cae3f55a
...@@ -36,12 +36,19 @@ ...@@ -36,12 +36,19 @@
export default { export default {
name: 'u-rate', name: 'u-rate',
props: { props: {
// 用于v-model双向绑定选中的星星数量
// 1.4.5版新增
value: {
type: [Number, String],
default: -1
},
// 要显示的星星数量 // 要显示的星星数量
count: { count: {
type: [Number, String], type: [Number, String],
default: 5 default: 5
}, },
// 当前需要默认选中的星星(选中的个数) // 当前需要默认选中的星星(选中的个数)
// 1.4.5后通过value双向绑定，不再建议使用此参数
current: { current: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
...@@ -98,7 +105,8 @@ export default { ...@@ -98,7 +105,8 @@ export default {
elId: this.$u.guid(), elId: this.$u.guid(),
elClass: this.$u.guid(), elClass: this.$u.guid(),
starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离 starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
activeIndex: this.current, // 当前激活的星星的index // 当前激活的星星的index，如果存在value，优先使用value，因为它可以双向绑定(1.4.5新增)
activeIndex: this.value != -1 ? this.value : this.current,
starWidth: 0, // 每个星星的宽度 starWidth: 0, // 每个星星的宽度
starWidthArr: [] //每个星星最右边到组件盒子最左边的距离 starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
}; };
...@@ -106,6 +114,9 @@ export default { ...@@ -106,6 +114,9 @@ export default {
watch: { watch: {
current(val) { current(val) {
this.activeIndex = val; this.activeIndex = val;
},
value(val) {
this.activeIndex = val;
} }
}, },
methods: { methods: {
...@@ -148,7 +159,7 @@ export default { ...@@ -148,7 +159,7 @@ export default {
this.activeIndex = index > this.count ? this.count : index; this.activeIndex = index > this.count ? this.count : index;
// 对最少颗星星的限制 // 对最少颗星星的限制
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount; if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.$emit('change', this.activeIndex); this.emitEvent();
}, },
// 通过点击，直接选中 // 通过点击，直接选中
click(index, e) { click(index, e) {
...@@ -167,7 +178,16 @@ export default { ...@@ -167,7 +178,16 @@ export default {
} }
// 对最少颗星星的限制 // 对最少颗星星的限制
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount; if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.emitEvent();
},
// 发出事件
emitEvent() {
// 发出change事件
this.$emit('change', this.activeIndex); this.$emit('change', this.activeIndex);
// 同时修改双向绑定的value的值
if(this.value != -1) {
this.$emit('input', this.activeIndex);
}
} }
}, },
mounted() { mounted() {
...@@ -179,7 +199,7 @@ export default { ...@@ -179,7 +199,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-rate { .u-rate {
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: inline-flex; display: inline-flex;
......
uview-ui/libs/config/config.js
View file @ cae3f55a
// 此版本发布于2020-07-03 // 此版本发布于2020-07-04
let version = '1.4.4'; let version = '1.4.5';
export default { export default {
v: version, v: version,
......
uview-ui/libs/function/getParent.js
View file @ cae3f55a
...@@ -10,10 +10,34 @@ export default function getParent(name, keys) { ...@@ -10,10 +10,34 @@ export default function getParent(name, keys) {
parent = parent.$parent; parent = parent.$parent;
} else { } else {
let data = {}; let data = {};
// 历遍传过来的对象参数 // 判断keys是否数组，如果传过来的是一个数组，那么直接使用数组元素值当做键值去父组件寻找
for(let i in keys) { if(Array.isArray(keys)) {
// 如果父组件有此值则用，无此值则用默认值 keys.map(val => {
data[i] = parent[i] ? parent[i] : keys[i]; data[val] = parent[val] ? parent[val] : '';
})
} else {
// 历遍传过来的对象参数
for(let i in keys) {
// 如果子组件有此值则用，无此值则用父组件的值
// 判断是否空数组，如果是，则用父组件的值，否则用子组件的值
if(Array.isArray(keys[i])) {
if(keys[i].length) {
data[i] = keys[i];
} else {
data[i] = parent[i];
}
} else if(keys[i].constructor === Object) {
// 判断是否对象，如果是对象，且有属性，那么使用子组件的值，否则使用父组件的值
if(Object.keys(keys[i]).length) {
data[i] = keys[i];
} else {
data[i] = parent[i];
}
} else {
// 只要子组件有传值，即使是false值，也是“传值”了，也需要覆盖父组件的同名参数
data[i] = (keys[i] || keys[i] === false) ? keys[i] : parent[i];
}
}
} }
return data; return data;
} }
......
uview-ui/package.json
View file @ cae3f55a
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.4.4", "version": "1.4.5",
"description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水", "description": "uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
"main": "index.js", "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"], "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