Skip to content

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

Merge branch 'yiruiwen' into dev

parents 9ebe74bb cae3f55a
Show whitespace changes
Inline Side-by-side
Showing with 361 additions and 531 deletions
manifest.json
View file @ 949abe51
...@@ -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 @ 949abe51
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
// "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/componentsB/checkbox/index.vue
View file @ 949abe51
...@@ -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 @ 949abe51
...@@ -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 @ 949abe51
...@@ -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 @ 949abe51
...@@ -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"> <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>
...@@ -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 @ 949abe51
<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 @ 949abe51
...@@ -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 @ 949abe51
...@@ -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;
}, },
} }
}; };
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ 949abe51
...@@ -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
} }
} }
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ 949abe51
<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',
}"> }">
<!-- 为了块对齐 --> <!-- 为了块对齐 -->
...@@ -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>
...@@ -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() {
......
uview-ui/components/u-form/u-form.vue
View file @ 949abe51
...@@ -37,8 +37,35 @@ export default { ...@@ -37,8 +37,35 @@ 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 {
uForm: this uForm: this
......
uview-ui/components/u-image/u-image.vue
View file @ 949abe51
...@@ -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 @ 949abe51
<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,6 +42,8 @@ ...@@ -42,6 +42,8 @@
* @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 输入框失去焦点时触发，对象形式
...@@ -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);
......
uview-ui/components/u-number-keyboard/u-number-keyboard.vue
View file @ 949abe51
...@@ -9,19 +9,21 @@ ...@@ -9,19 +9,21 @@
: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: {
...@@ -88,7 +90,7 @@ export default { ...@@ -88,7 +90,7 @@ export default {
}, },
hoverClass() { hoverClass() {
return index => { return index => {
if(!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class'; if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
else return 'u-keyboard-hover'; else return 'u-keyboard-hover';
} }
} }
...@@ -97,13 +99,15 @@ export default { ...@@ -97,13 +99,15 @@ export default {
// 点击退格键 // 点击退格键
backspaceClick() { backspaceClick() {
this.$emit('backspace'); this.$emit('backspace');
 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器 clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = setInterval(() => { this.timer = null;
    this.$emit('backspace'); this.timer = setInterval(() => {
      }, 250); this.$emit('backspace');
}, 250);
}, },
clearTimer() { clearTimer() {
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null;
}, },
// 获取键盘显示的内容 // 获取键盘显示的内容
keyboardClick(val) { keyboardClick(val) {
...@@ -112,23 +116,23 @@ export default { ...@@ -112,23 +116,23 @@ export default {
this.$emit('change', 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;
...@@ -138,17 +142,17 @@ export default { ...@@ -138,17 +142,17 @@ export default {
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 @ 949abe51
...@@ -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() {
......
uview-ui/libs/config/config.js
View file @ 949abe51
// 此版本发布于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 @ 949abe51
...@@ -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是否数组，如果传过来的是一个数组，那么直接使用数组元素值当做键值去父组件寻找
if(Array.isArray(keys)) {
keys.map(val => {
data[val] = parent[val] ? parent[val] : '';
})
} else {
// 历遍传过来的对象参数 // 历遍传过来的对象参数
for(let i in keys) { for(let i in keys) {
// 如果父组件有此值则用，无此值则用默认值 // 如果子组件有此值则用，无此值则用父组件的值
data[i] = parent[i] ? parent[i] : keys[i]; // 判断是否空数组，如果是，则用父组件的值，否则用子组件的值
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 @ 949abe51
{ {
"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