Skip to content

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

1. 修复picker组件的按钮颜色参数无效的问题 

2. field组件增加field-style和clearsize参数
3. 优化swipeAction滑动单元格组件的内部逻辑，新增content-click事件
4. 修复部分安卓手机下载demo中样式错乱的问题
parent 9a297f22
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 53 deletions
manifest.json
View file @ 3bd79f55
...@@ -46,7 +46,8 @@ ...@@ -46,7 +46,8 @@
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
] ],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
}, },
"ios" : {}, "ios" : {},
"sdkConfigs" : { "sdkConfigs" : {
......
pages/componentsB/swipeAction/index.vue
View file @ 3bd79f55
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
:btn-width="btnWidth" :btn-width="btnWidth"
@close="close" @close="close"
:options="options" :options="options"
@content-click="contentClick"
> >
<view class="item u-border-bottom"> <view class="item u-border-bottom">
<image mode="aspectFill" :src="item.images" /> <image mode="aspectFill" :src="item.images" />
...@@ -115,6 +116,9 @@ export default { ...@@ -115,6 +116,9 @@ export default {
}, },
close(index) { close(index) {
this.list[index].show = false; this.list[index].show = false;
},
contentClick(index) {
// console.log(index);
} }
} }
}; };
......
template.h5.html
View file @ 3bd79f55
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/x-icon" href="http://cdn.uviewui.com/uview/common/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="https://cdn.uviewui.com/uview/common/favicon.ico">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
......
uview-ui/components/u-checkbox-group/u-checkbox-group.vue
View file @ 3bd79f55
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
* @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
* @tutorial https://www.uviewui.com/components/checkbox.html * @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} max 最多能选中多少个checkbox（默认999） * @property {String Number} max 最多能选中多少个checkbox（默认999）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {Boolean} disabled 是否禁用所有checkbox（默认false） * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
* @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff） * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
* @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象 * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
......
uview-ui/components/u-checkbox/u-checkbox.vue
View file @ 3bd79f55
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
* @tutorial https://www.uviewui.com/components/checkbox.html * @tutorial https://www.uviewui.com/components/checkbox.html
* @property {String Number} icon-size 图标大小，单位rpx（默认24） * @property {String Number} icon-size 图标大小，单位rpx（默认24）
* @property {String Number} label-size label字体大小，单位rpx（默认28） * @property {String Number} label-size label字体大小，单位rpx（默认28）
* @property {String Number} size 组件整体的大小，单位rpx（默认40）
* @property {String Number} name checkbox组件的标示符 * @property {String Number} name checkbox组件的标示符
* @property {String} shape 形状，见官网说明（默认circle） * @property {String} shape 形状，见官网说明（默认circle）
* @property {Boolean} disabled 是否禁用（默认false） * @property {Boolean} disabled 是否禁用（默认false）
......
uview-ui/components/u-field/u-field.vue
View file @ 3bd79f55
...@@ -12,30 +12,32 @@ ...@@ -12,30 +12,32 @@
<text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text> <text class="u-label-text" :class="[this.$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
</view> </view>
<view class="fild-body"> <view class="fild-body">
<textarea v-if="type == 'textarea'" class="u-input-class u-textarea-class" :style="[inputStyle]" :value="value" <view class="u-field__input-wrap u-flex" :style="[inputWrapStyle]">
:placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength" <textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :value="value"
:focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm" :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength"
@tap="fieldClick" /> :focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
<input @tap="fieldClick" />
v-else <input
:style="[inputStyle]" v-else
class="u-input-class" :style="[fieldStyle]"
:type="type" :type="type"
:value="value" class="u-flex-1"
:password="password || type === 'password'" :value="value"
:placeholder="placeholder" :password="password || type === 'password'"
:placeholderStyle="placeholderStyle" :placeholder="placeholder"
:disabled="disabled" :placeholderStyle="placeholderStyle"
:maxlength="inputMaxlength" :disabled="disabled"
:focus="focus" :maxlength="inputMaxlength"
:confirmType="confirmType" :focus="focus"
@focus="onFocus" :confirmType="confirmType"
@blur="onBlur" @focus="onFocus"
@input="onInput" @blur="onBlur"
@confirm="onConfirm" @input="onInput"
@tap="fieldClick" @confirm="onConfirm"
/> @tap="fieldClick"
<u-icon v-if="clearable && value && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/> />
</view>
<u-icon :size="clearSize" v-if="clearable && value && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/>
<view class="u-button-wrap"><slot name="button" /></view> <view class="u-button-wrap"><slot name="button" /></view>
<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" /> <u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
</view> </view>
...@@ -60,6 +62,8 @@ ...@@ -60,6 +62,8 @@
* @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true） * @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
* @property {Number String} label-width label的宽度，单位rpx（默认130） * @property {Number String} label-width label的宽度，单位rpx（默认130）
* @property {String} label-align label的文字对齐方式（默认left） * @property {String} label-align label的文字对齐方式（默认left）
* @property {Object} field-style 自定义输入框的样式，对象形式
* @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
* @property {String} input-align 输入框内容对齐方式（默认left） * @property {String} input-align 输入框内容对齐方式（默认left）
* @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266） * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true） * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
...@@ -146,6 +150,18 @@ export default { ...@@ -146,6 +150,18 @@ export default {
labelPosition: { labelPosition: {
type: String, type: String,
default: 'left' default: 'left'
},
// 输入框的自定义样式
fieldStyle: {
type: Object,
default() {
return {}
}
},
// 清除按钮的大小
clearSize: {
type: [Number, String],
default: 30
} }
}, },
inject: ['uCellGroup'], inject: ['uCellGroup'],
...@@ -161,7 +177,7 @@ export default { ...@@ -161,7 +177,7 @@ export default {
} }
}, },
computed: { computed: {
inputStyle() { inputWrapStyle() {
let style = {}; let style = {};
style.textAlign = this.inputAlign; style.textAlign = this.inputAlign;
// 判断lable的位置，如果是left的话，让input左边两边有间隙 // 判断lable的位置，如果是left的话，让input左边两边有间隙
...@@ -302,7 +318,7 @@ export default { ...@@ -302,7 +318,7 @@ export default {
line-height: 1; line-height: 1;
} }
.u-input-class { .u-field__input-wrap {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
...@@ -338,4 +354,8 @@ export default { ...@@ -338,4 +354,8 @@ export default {
.placeholder-style { .placeholder-style {
color: rgb(150, 151, 153); color: rgb(150, 151, 153);
} }
.u-input-class {
font-size: 28rpx;
}
</style> </style>
uview-ui/components/u-picker/u-picker.vue
View file @ 3bd79f55
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex"> :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
<view class="u-datetime-picker" @tap.stop> <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="stop" catchtouchmove="stop">
<view class="u-btn-picker u-tips-color" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150" <view class="u-btn-picker u-btn-picker--tips" :style="{ color: cancelColor }" hover-class="u-opacity" :hover-stay-time="150"
@tap="getResult('cancel')">取消</view> @tap="getResult('cancel')">取消</view>
<view class="u-btn-picker u-type-primary" :style="{ color: confirmColor }" hover-class="u-opacity" :hover-stay-time="150" <view class="u-btn-picker u-btn-picker--primary" :style="{ color: confirmColor }" hover-class="u-opacity" :hover-stay-time="150"
@touchmove.stop="" @tap.stop="getResult('confirm')">确定</view> @touchmove.stop="" @tap.stop="getResult('confirm')">确定</view>
</view> </view>
<view class="u-picker-body"> <view class="u-picker-body">
...@@ -532,4 +532,12 @@ ...@@ -532,4 +532,12 @@
.u-opacity { .u-opacity {
opacity: 0.5; opacity: 0.5;
} }
.u-btn-picker--primary {
color: $u-type-primary;
}
.u-btn-picker--tips {
color: $u-tips-color;
}
</style> </style>
uview-ui/components/u-rate/u-rate.vue
View file @ 3bd79f55
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
* @property {String Number} size 星星的大小，单位rpx（默认32） * @property {String Number} size 星星的大小，单位rpx（默认32）
* @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2） * @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
* @property {String} active-color 选中的星星颜色（默认#FA3534） * @property {String} active-color 选中的星星颜色（默认#FA3534）
* @property {String} gutter 星星之间的距离（默认#323233） * @property {String} gutter 星星之间的距离（默认10）
* @property {String Number} min-count 最少选中星星的个数（默认0） * @property {String Number} min-count 最少选中星星的个数（默认0）
* @property {Boolean} allow-half 是否允许半星选择（默认false） * @property {Boolean} allow-half 是否允许半星选择（默认false）
* @event {Function} change 选中的星星发生变化时触发 * @event {Function} change 选中的星星发生变化时触发
......
uview-ui/components/u-swipe-action/u-swipe-action.vue
View file @ 3bd79f55
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
width: movableViewWidth width: movableViewWidth
}" }"
> >
<view class="u-swipe-content"><slot></slot></view> <view class="u-swipe-content" @tap.stop="contentClick"><slot></slot></view>
<view <view
class="u-swipe-del" class="u-swipe-del"
@tap.stop="del(index)" @tap.stop="btnClick(index)"
:style="[btnStyle(item.style)]" :style="[btnStyle(item.style)]"
v-for="(item, index) in options" :key="index" v-for="(item, index) in options" :key="index"
> >
...@@ -30,31 +30,21 @@ ...@@ -30,31 +30,21 @@
* swipeAction 左滑单元格 * swipeAction 左滑单元格
* @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
* @tutorial https://www.uviewui.com/components/swipeAction.html * @tutorial https://www.uviewui.com/components/swipeAction.html
* @property {String} btn-text 按钮文字（默认“删除”）
* @property {String} btn-bg-color 按钮背景颜色（默认#ff0033）
* @property {String} bg-color 整个组件背景颜色（默认#ffffff） * @property {String} bg-color 整个组件背景颜色（默认#ffffff）
* @property {Array} options 数组形式，可以配置背景颜色和文字
* @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可 * @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
* @property {String Number} btn-width 按钮宽度，单位rpx（默认180） * @property {String Number} btn-width 按钮宽度，单位rpx（默认180）
* @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false） * @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false）
* @property {Boolean} show 打开或者关闭某个组件（默认false） * @property {Boolean} show 打开或者关闭某个组件（默认false）
* @event {Function} click 点击组件时触发 * @event {Function} click 点击组件时触发
* @event {Function} close 组件触发关闭状态时 * @event {Function} close 组件触发关闭状态时
* @event {Function} content-click 点击内容时触发
* @event {Function} open 组件触发打开状态时 * @event {Function} open 组件触发打开状态时
* @example <u-swipe-action btn-text="收藏">...</u-swipe-action> * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
*/ */
export default { export default {
name: 'u-swipe-action', name: 'u-swipe-action',
props: { props: {
// 左边滑动出来按钮的文字
btnText: {
type: String,
default: '删除'
},
// 滑动出来的按钮的背景颜色
btnBgColor: {
type: String,
default: '#ff0033'
},
// index值，用于得知点击删除的是哪个按钮 // index值，用于得知点击删除的是哪个按钮
index: { index: {
type: [Number, String], type: [Number, String],
...@@ -85,7 +75,7 @@ export default { ...@@ -85,7 +75,7 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
// // 按钮操作参数
options: { options: {
type: Array, type: Array,
default() { default() {
...@@ -136,10 +126,9 @@ export default { ...@@ -136,10 +126,9 @@ export default {
this.getActionRect(); this.getActionRect();
}, },
methods: { methods: {
// 点击删除按钮 // 点击按钮
del(index) { btnClick(index) {
this.status = false; this.status = false;
this.moveX = 0;
// this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引) // this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引)
this.$emit('click', this.index, index); this.$emit('click', this.index, index);
}, },
...@@ -209,6 +198,15 @@ export default { ...@@ -209,6 +198,15 @@ export default {
this.$uGetRect('.u-swipe-action').then(res => { this.$uGetRect('.u-swipe-action').then(res => {
this.movableAreaWidth = res.width; this.movableAreaWidth = res.width;
}); });
},
// 点击内容触发事件
contentClick() {
// 点击内容时，如果当前为打开状态，收起组件
if(this.status == true) {
this.status = 'close';
this.moveX = 0;
}
this.$emit('content-click', this.index);
} }
} }
}; };
......
uview-ui/components/u-waterfall/u-waterfall.vue
View file @ 3bd79f55
...@@ -74,6 +74,9 @@ ...@@ -74,6 +74,9 @@
let rightRect = await this.$uGetRect('#u-right-cloumn'); let rightRect = await this.$uGetRect('#u-right-cloumn');
// 如果左边小于或等于右边，就添加到左边，否则添加到右边 // 如果左边小于或等于右边，就添加到左边，否则添加到右边
let item = this.tempList[0]; let item = this.tempList[0];
// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
// 数组可能变成[]，导致此item值可能为undefined
if(!item) return ;
if (leftRect.height < rightRect.height) { if (leftRect.height < rightRect.height) {
this.leftList.push(item); this.leftList.push(item);
} else if (leftRect.height > rightRect.height) { } else if (leftRect.height > rightRect.height) {
......
uview-ui/libs/config/config.js
View file @ 3bd79f55
// 此版本发布于2020-05-05 // 此版本发布于2020-05-07
let version = '1.1.7'; let version = '1.2.0';
export default { export default {
v: version, v: version,
......
uview-ui/libs/css/common.scss
View file @ 3bd79f55
.u-relative {
position: relative;
}
.u-absolute {
position: absolute;
}
.u-font-xs { .u-font-xs {
font-size: 22rpx; font-size: 22rpx;
} }
......
uview-ui/package.json
View file @ 3bd79f55
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.1.9", "version": "1.2.0",
"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