Skip to content

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

1. 【新增】upload组件新增height参数，可以设置预览缩略图的高度 

2. 【优化】优化tabs组件在微信小程序开发控制台报选择器警告的问题
3. 【优化】优化某些sass版本无法支持/deep/的问题，改为使用::v-deep穿透写法
4. 【修复】修复dropdown在微信小程序菜单第一项无法高亮，以及title无法双向绑定的问题
5. 【修复】修复select组件的extra属性为0时，内部判断无效的问题
6. 【修复】修复swiper组件title-style参数缺失的问题
7. 【修复】修复1.6.3引起的按钮水波纹会溢出的问题
8. 【修复】修复由于hx2.8.x引出的field和input点击右侧清除图标，在微信小程序上报错的问题
9. 【修复】修复tabbar在某些机型中，图标不居中的问题
parent f59450dd
Show whitespace changes
Inline Side-by-side
Showing with 317 additions and 116 deletions
main.js
View file @ 5fde4680
/*
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 15:18:39
*/
import Vue from 'vue'
import App from './App'
......
manifest.json
View file @ 5fde4680
......@@ -2,7 +2,7 @@
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.6.3",
"versionName" : "1.6.4",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
......
pages.json
View file @ 5fde4680
......@@ -6,7 +6,7 @@
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面，必选
// "path": "pages/componentsA/field/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
......@@ -61,7 +61,7 @@
{
"path": "test/index",
"style": {
"navigationBarTitleText": "navbar-自定义导航栏"
"navigationBarTitleText": "Test"
// "navigationStyle": "custom" ,// 隐藏系统导航栏
// "navigationBarTextStyle": "white" // 状态栏字体为白色
}
......
pages/componentsB/image/index.vue
View file @ 5fde4680
......@@ -15,10 +15,13 @@
<view class="u-item-title">状态</view>
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
</view>
<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 -->
<!-- #ifndef MP-WEIXIN -->
<view class="u-config-item">
<view class="u-item-title">加载中状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
</view>
<!-- #endif -->
<view class="u-config-item">
<view class="u-item-title">加载失败状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
......
pages/componentsC/test/index.vue
View file @ 5fde4680
<template>
<view class="wrap">
<view class="pre-box" v-if="!showUploadList">
<view class="pre-item" v-for="(item, index) in lists" :key="index">
<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
</view>
</view>
<u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action">
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
</view>
</u-upload>
<view class="">
</view>
</template>
<script>
export default {
export default {
data() {
return {
action: 'http://192.168.100.17/index.php/index/index/upload', // 演示地址
showUploadList: false,
// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
// 这里直接获取内部的lists变量即可
lists: []
};
},
onLoad() {
console.log(this.$u.test.url('http://www.aa.com?b=3&a=328sdsfhiwiefwismdfhsewiemsnfwiemdhisi'));
},
computed: {
},
methods: {
reachBottom() {
// 此tab为空数据
if(this.current != 2) {
this.loadStatus.splice(this.current,1,"loading")
setTimeout(() => {
this.getOrderList(this.current);
}, 1200);
}
},
// 页面数据
getOrderList(idx) {
for(let i = 0; i < 5; i++) {
let index = this.$u.random(0, this.dataList.length - 1);
let data = JSON.parse(JSON.stringify(this.dataList[index]));
data.id = this.$u.guid();
this.orderList[idx].push(data);
}
this.loadStatus.splice(this.current,1,"loadmore")
},
change(index) {
this.swiperCurrent = index;
this.getOrderList();
},
transition({ detail: { dx } }) {
this.$refs.tabs.setDx(dx);
},
animationfinish({ detail: { current } }) {
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// 数据请求
// post示例
// sumbitByPost() {
// this.$u.post('http://10.28.83.111:59694/formMessage', {
// username:this.loginForm.username,
// password:md5(this.loginForm.password).toUpperCase(),
// }).then(res => {
// // res为服务端返回的数据
// })
// },
sendInfo(){
let params = {
username:this.loginForm.username,
password:md5(this.loginForm.password).toUpperCase(),
}
let headers={
"Content-Type":"application/x-www-form-urlencoded",
// "Token":`this.userToken` //设置token，保证每一个用户进入系统的安全性
}
uni.request({
url: `http://10.28.83.111:59694/formMessage`,
method: 'POST',
header: headers,
data: params,
success: (res)=>{
},
// 只有onReady生命周期才能调用refs操作组件
onReady() {
// 得到整个组件对象，内部图片列表变量为"lists"
this.lists = this.$refs.uUpload.lists;
fail: (err)=>{
}
})
}
</script>
<style lang="scss">
.wrap {
padding: 24rpx;
}
};
</script>
<style>
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
}
/* #endif */
</style>
.slot-btn {
width: 341rpx;
height: 140rpx;
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
justify-content: center;
align-items: center;
background: rgb(244, 245, 246);
.store {
margin: 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
}
.right {
// color: $u-type-warning-dark;
color: #F29100;
// color: #5098ff;
// color: #e5d001;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
.slot-btn__hover {
background-color: rgb(235, 236, 238);
}
.pre-box {
.content {
.title {
font-size: 28rpx;
line-height: 50rpx;
}
.type {
margin: 10rpx 0;
font-size: 24rpx;
color: $u-tips-color;
}
.delivery-time {
color: #999999;
font-size: 24rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
.decimal {
font-size: 24rpx;
margin-top: 4rpx;
}
.number {
color: $u-tips-color;
font-size: 24rpx;
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
align-items: center;
margin-top: 40rpx;
padding: 0 10rpx;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
.btn {
line-height: 52rpx;
width: 160rpx;
border-radius: 26rpx;
border: 2rpx solid $u-border-color;
font-size: 26rpx;
text-align: center;
color: $u-type-info-dark;
}
.pre-item {
flex: 0 0 48.5%;
border-radius: 10rpx;
height: 140rpx;
overflow: hidden;
position: relative;
margin-bottom: 20rpx;
.evaluate {
color: $u-type-warning-dark;
border-color: $u-type-warning-dark;
}
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 250rpx;
height: 300rpx;
// margin-bottom: 20rpx;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.pre-item-image {
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
height: 140rpx;
}
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
}
</style>
uview-ui/components/u-avatar/u-avatar.vue
View file @ 5fde4680
......@@ -6,7 +6,7 @@
class="u-avatar__img"
v-if="!uText && avatar"
:src="avatar"
:mode="mode"
:mode="imgMode"
></image>
<text class="u-line-1" v-else-if="uText" :style="{
fontSize: '38rpx'
......
uview-ui/components/u-button/u-button.vue
View file @ 5fde4680
......@@ -10,7 +10,6 @@
hairLine ? showHairLineBorder : 'u-btn--bold-border',
'u-btn--' + type,
disabled ? `u-btn--${type}--disabled` : '',
]"
:disabled="disabled"
:form-type="formType"
......@@ -29,7 +28,9 @@
@error="error"
@opensetting="opensetting"
@launchapp="launchapp"
:style="[customStyle]"
:style="[customStyle, {
overflow: ripple ? 'hidden' : 'visible'
}]"
@tap.stop="click($event)"
:hover-class="getHoverClass"
:loading="loading"
......
uview-ui/components/u-dropdown-item/u-dropdown-item.vue
View file @ 5fde4680
......@@ -24,7 +24,7 @@
},
// 菜单项标题
title: {
type: String,
type: [String, Number],
default: ''
},
// 选项数据，如果传入了默认slot，此参数无效
......@@ -47,22 +47,25 @@
inactiveColor: '#606266', // 未激活时左边文字和右边对勾图标的颜色
}
},
computed: {
// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
propsChange() {
return `${this.title}-${this.disabled}`;
}
},
watch: {
propsChange(n) {
// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
// 将所有子组件数据重新整理一遍
if(this.parent) this.parent.init();
}
},
created() {
// 父组件的实例
this.parent = false;
},
methods: {
// cell被点击
cellClick(value) {
// 修改通过v-model绑定的值
this.$emit('input', value);
// 通知父组件(u-dropdown)收起菜单
this.parent.close();
// 发出事件，抛出当前勾选项的value
this.$emit('change', value);
}
},
mounted() {
init() {
// 获取父组件u-dropdown
let parent = this.$u.$parent.call(this, 'u-dropdown');
if(parent) {
......@@ -79,6 +82,19 @@
disabled: this.disabled
});
}
},
// cell被点击
cellClick(value) {
// 修改通过v-model绑定的值
this.$emit('input', value);
// 通知父组件(u-dropdown)收起菜单
this.parent.close();
// 发出事件，抛出当前勾选项的value
this.$emit('change', value);
}
},
mounted() {
this.init();
}
}
</script>
......
uview-ui/components/u-dropdown/u-dropdown.vue
View file @ 5fde4680
<template>
<view class="u-dropdown" @touchmove.stop.prevent>
<view class="u-dropdown">
<view class="u-dropdown__menu" :style="{
height: $u.addUnit(height)
}" :class="{
......@@ -21,7 +21,7 @@
</view>
<view class="u-dropdown__content" :style="[contentStyle, {
transition: `opacity ${duration / 1000}s linear`
}]" @tap="maskClick">
}]" @tap="maskClick" @touchmove.stop.prevent>
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
<slot></slot>
</view>
......@@ -79,7 +79,9 @@
showDropdown: true, // 是否打开下来菜单,
menuList: [], // 显示的菜单
active: false, // 下拉菜单的状态
current: "", // 当前是第几个菜单处于激活状态
// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
current: 99999,
// 外层内容的样式，初始时处于底层，且透明
contentStyle: {
zIndex: -1,
......@@ -101,6 +103,14 @@
this.children = [];
},
methods: {
init() {
// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
// 以保证数据的正确性
this.menuList = [];
this.children.map(child => {
child.init();
})
},
// 点击菜单
menuClick(index) {
// 判断是否被禁用
......@@ -132,7 +142,7 @@
close() {
// 设置为收起状态，同时current归位，设置为空字符串
this.active = false;
this.current = "";
this.current = 99999;
// 下拉内容的样式进行调整，不透明度设置为0
this.contentStyle = {
zIndex: -1,
......
uview-ui/components/u-field/u-field.vue
View file @ 5fde4680
......@@ -37,7 +37,7 @@
@tap="fieldClick"
/>
</view>
<u-icon :size="clearSize" v-if="clearable && value != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @touchstart="onClear"/>
<u-icon :size="clearSize" v-if="clearable && value != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="onClear"/>
<view class="u-button-wrap"><slot name="right" /></view>
<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
</view>
......@@ -256,7 +256,11 @@ export default {
this.$emit('focus', event);
},
onBlur(event) {
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
setTimeout(() => {
this.focused = false;
}, 100)
this.$emit('blur', event);
},
onConfirm(e) {
......
uview-ui/components/u-icon/u-icon.vue
View file @ 5fde4680
......@@ -2,7 +2,8 @@
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
<text v-if="label" class="u-icon__label" :style="{
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
<text v-if="label !== ''" class="u-icon__label" :style="{
color: labelColor,
fontSize: $u.addUnit(labelSize),
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
......
uview-ui/components/u-input/u-input.vue
View file @ 5fde4680
......@@ -54,8 +54,8 @@
@confirm="onConfirm"
/>
<view class="u-input__right-icon u-flex">
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && value != '' && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc" @touchstart="onClear"/>
<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
</view>
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
......@@ -284,7 +284,11 @@ export default {
* @param event
*/
handleBlur(event) {
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
setTimeout(() => {
this.focused = false;
}, 100)
// vue 原生的方法 return 出去
this.$emit('blur', event.detail.value);
this.$nextTick(() => {
......
uview-ui/components/u-select/u-select.vue
View file @ 5fde4680
......@@ -300,7 +300,7 @@ export default {
label: data ? data[this.labelName] : null,
};
// 判断是否有需要额外携带的参数
if(data && data.extra) tmp.extra = data.extra;
if(data && data.extra !== undefined) tmp.extra = data.extra;
this.selectValue.push(tmp);
})
......@@ -314,7 +314,7 @@ export default {
label: data ? data[this.labelName] : null,
};
// 判断是否有需要额外携带的参数
if(data && data.extra) tmp.extra = data.extra;
if(data && data.extra !== undefined) tmp.extra = data.extra;
this.selectValue.push(tmp);
} else if(this.mode == 'mutil-column') {
// 初始默认选中值
......@@ -326,7 +326,7 @@ export default {
label: data ? data[this.labelName] : null,
};
// 判断是否有需要额外携带的参数
if(data && data.extra) tmp.extra = data.extra;
if(data && data.extra !== undefined) tmp.extra = data.extra;
this.selectValue.push(tmp);
})
}
......
uview-ui/components/u-swiper/u-swiper.vue
View file @ 5fde4680
......@@ -15,9 +15,9 @@
backgroundColor: bgColor
}">
<image class="u-swiper-image" :src="item[name]" :mode="imgMode"></image>
<view v-if="title" class="u-swiper-title u-line-1" :style="{
<view v-if="title" class="u-swiper-title u-line-1" :style="[{
'padding-bottom': titlePaddingBottom
}">
}, titleStyle]">
{{ item.title }}
</view>
</view>
......@@ -161,6 +161,13 @@
current: {
type: [Number, String],
default: 0
},
// 标题的样式，对象形式
titleStyle: {
type: Object,
default() {
return {}
}
}
},
watch: {
......
uview-ui/components/u-tabbar/u-tabbar.vue
View file @ 5fde4680
......@@ -278,6 +278,8 @@
&__button {
position: absolute;
top: 10rpx;
left: 50%;
transform: translateX(-50%);
}
&__text {
......
uview-ui/components/u-table/u-table.vue
View file @ 5fde4680
......@@ -86,10 +86,4 @@
width: 100%;
box-sizing: border-box;
}
/* #ifdef MP */
.u-table /deep/ t-tr {
display: flex;
}
/* #endif */
</style>
uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
View file @ 5fde4680
......@@ -393,7 +393,7 @@
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
......
uview-ui/components/u-tabs/u-tabs.vue
View file @ 5fde4680
......@@ -312,7 +312,7 @@
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view /deep/ ::-webkit-scrollbar {
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
......
uview-ui/components/u-upload/u-upload.vue
View file @ 5fde4680
......@@ -6,8 +6,8 @@
v-for="(item, index) in lists"
:key="index"
:style="{
width: width + 'rpx',
height: width + 'rpx'
width: $u.addUnit(width),
height: $u.addUnit(height)
}"
>
<view
......@@ -39,8 +39,8 @@
hover-class="u-add-wrap__hover"
hover-stay-time="150"
:style="{
width: width + 'rpx',
height: width + 'rpx'
width: $u.addUnit(width),
height: $u.addUnit(height)
}"
>
<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
......@@ -202,11 +202,16 @@ export default {
type: Boolean,
default: false
},
// 内部预览图片区域和选择图片按钮的区域宽度，高等于宽
// 内部预览图片区域和选择图片按钮的区域宽度
width: {
type: [String, Number],
default: 200
},
// 内部预览图片区域和选择图片按钮的区域高度
height: {
type: [String, Number],
default: 200
},
// 右上角关闭按钮的背景颜色
delBgColor: {
type: String,
......
uview-ui/components/u-waterfall/u-waterfall.vue
View file @ 5fde4680
......@@ -112,6 +112,7 @@ export default {
this.rightList = [];
// 同时清除父组件列表中的数据
this.$emit('input', []);
this.tempList = [];
},
// 清除某一条指定的数据，根据id实现
remove(id) {
......
uview-ui/libs/config/config.js
View file @ 5fde4680
// 此版本发布于2020-08-18
let version = '1.6.3';
// 此版本发布于2020-08-21
let version = '1.6.4';
export default {
v: version,
......
uview-ui/libs/css/style.vue.scss
View file @ 5fde4680
......@@ -165,6 +165,7 @@ uni-toast .uni-toast {
font-size: inherit;
line-height: inherit;
background-color: transparent;
color: inherit;
}
.u-reset-button::after {
......
uview-ui/package.json
View file @ 5fde4680
{
"name": "uview-ui",
"version": "1.6.3",
"version": "1.6.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