Skip to content

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

1. toast新增back参数用于toast结束后自动返回上一页 

2. 修复upload组件初始化绑定对象文件列表后，修改外部文件列表导致内部数据错乱的问题
3. cell组件新增icon-style，border-top参数，无需强制结合cell-group即可使用
4. field组件新增border-top参数，，无需强制结合cell-group即可使用
5. 阻止radio和checkbox组件的事件冒泡
6. 优化input组件右侧的图片对齐效果
7. 新增精致，小巧而实用的image组件，有淡入，懒加载，加载中，加载失败提示等效果。
8. 新增this.$u.getParent()用于获取父组件参数的方法
parent 95496a55
Hide whitespace changes
Inline Side-by-side
Showing with 371 additions and 28 deletions
pages.json
View file @ e0ec5ac8
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// "condition": { //模式配置，仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsC/test/index", //启动页面，必选
// "query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
// }]
// },
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/test/index", //启动页面，必选
"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
}]
},
"pages": [
// 演示-组件
{
......@@ -656,6 +656,13 @@
"navigationBarTitleText": "line-线条"
}
},
// image-图片
{
"path": "image/index",
"style": {
"navigationBarTitleText": "image-图片"
}
},
// card-卡片
{
"path": "card/index",
......
pages/componentsB/image/index.vue 0 → 100644
View file @ e0ec5ac8
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<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-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection :current="statusCurrent" vibrateShort :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载中状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">加载失败状态</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="errorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
width: '200',
height: '200',
loadingSlot: false,
statusCurrent: 0,
errorSlot: false,
shape: 'square'
};
},
computed: {
// statusCurrent() {
// }
},
methods: {
statusChange(index) {
// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
if (index == 0) {
this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
this.$refs.uImage.loading = false;
this.$refs.uImage.isError = false;
} else if (index == 1) {
this.$refs.uImage.loading = true;
} else {
this.$refs.uImage.loading = false;
this.$refs.uImage.isError = true;
}
},
loadingChange(index) {
this.statusCurrent = 1;
this.statusChange(1);
if (index == 0) {
this.loadingSlot = false;
} else {
this.loadingSlot = true;
}
},
errorChange(index) {
this.statusCurrent = 2;
this.statusChange(2);
if (index == 0) {
this.errorSlot = false;
} else {
this.errorSlot = true;
}
},
shapeChange(index) {
this.shape = index == 0 ? 'square' : 'circle';
}
}
};
</script>
<style scoped lang="scss">
.u-demo-area {
}
</style>
pages/componentsC/test/index.vue
View file @ e0ec5ac8
<template>
<view class="">
</view>
</template>
\ No newline at end of file
</template>
<script>
export default {
data() {
return {}
}
}
</script>
\ No newline at end of file
pages/example/components.config.js
View file @ e0ec5ac8
......@@ -8,6 +8,10 @@ export default [{
path: '/pages/componentsA/icon/index',
icon: 'icon',
title: 'Icon 图标',
},{
path: '/pages/componentsB/image/index',
icon: 'image',
title: 'Image 图片',
}, {
path: '/pages/componentsC/button/index',
icon: 'button',
......
uview-ui/components/u-cell-item/u-cell-item.vue
View file @ e0ec5ac8
......@@ -2,14 +2,14 @@
<view
@tap="click"
class="u-cell"
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
hover-stay-time="150"
:hover-class="hoverClass"
:style="{
backgroundColor: bgColor
}"
>
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="icon"></slot>
</view>
......@@ -49,13 +49,14 @@
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
* @property {Object} icon-style 左边图标的样式，对象形式
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
* @property {Boolean} border-top 是否显示cell的上边框（默认false）
* @property {Boolean} center 是否使内容垂直居中（默认false）
* @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
* @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
* // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
* @property {Boolean} arrow 是否显示右侧箭头（默认true）
* @property {Boolean} required 箭头方向，可选值（默认right）
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
......@@ -101,10 +102,11 @@ export default {
default: false
},
// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
borderGap: {
type: Boolean,
default: true
},
// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
// borderGap: {
// type: Boolean,
// default: true
// },
// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
hoverClass: {
type: String,
......@@ -175,7 +177,14 @@ export default {
iconSize: {
type: [Number, String],
default: 34
}
},
// 左边图标的样式，对象形式
iconStyle: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
......@@ -253,10 +262,6 @@ export default {
position: relative;
}
.u-border-gap:after {
left: 32rpx !important;
}
.u-cell__label {
margin-top: 6rpx;
font-size: 26rpx;
......
uview-ui/components/u-field/u-field.vue
View file @ e0ec5ac8
......@@ -55,6 +55,7 @@
* @tutorial https://www.uviewui.com/components/field.html
* @property {String} type 输入框的类型（默认text）
* @property {String} icon label左边的图标，限uView的图标名称
* @property {Object} icon-style 左边图标的样式，对象形式
* @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
* @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
* @property {String} label 输入框左边的文字提示
......
uview-ui/components/u-image/u-image.vue 0 → 100644
View file @ e0ec5ac8
<template>
<view
class="u-image"
@tap.stop.prevent="onClick"
:style="[wrapStyle]"
>
<image
v-if="!isError"
:src="src"
:mode="mode"
@error="onErrorHandler"
@load="onLoadHandler"
:lazy-load="lazyLoad"
class="u-image__image"
:style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}"
></image>
<view v-if="showLoading && loading" class="u-image__loading" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}">
<slot v-if="$slots.loading" name="loading" />
<u-icon v-else :name="loadingIcon"></u-icon>
</view>
<view v-if="showError && isError && !loading" class="u-image__error" :style="{
borderRadius: shape == 'circle' ? '50%' : borderRadius + 'rpx',
}">
<slot v-if="$slots.error" name="error" />
<u-icon v-else :name="errorIcon"></u-icon>
</view>
</view>
</template>
<script>
export default {
props: {
// 图片地址
src: {
type: String,
default: ''
},
// 裁剪模式
mode: {
type: String,
default: 'widthFix'
},
// 宽度，单位任意
width: {
type: [String, Number],
default: '100%'
},
// 高度，单位任意
height: {
type: [String, Number],
default: 'auto'
},
// 图片形状，circle-圆形，square-方形
shape: {
type: String,
default: 'square'
},
// 圆角，单位任意
borderRadius: {
type: [String, Number],
default: 10
},
// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
lazyLoad: {
type: Boolean,
default: true
},
// 开启长按图片显示识别微信小程序码菜单
showMenuByLongpress: {
type: Boolean,
default: true
},
// 加载中的图标，或者小图片
loadingIcon: {
type: String,
default: 'photo'
},
// 加载失败的图标，或者小图片
errorIcon: {
type: String,
default: 'error-circle'
},
// 是否显示加载中的图标或者自定义的slot
showLoading: {
type: Boolean,
default: true
},
// 是否显示加载错误的图标或者自定义的slot
showError: {
type: Boolean,
default: true
},
// 是否需要淡入效果
fade: {
type: Boolean,
default: true
},
// 只支持网络资源，只对微信小程序有效
webp: {
type: Boolean,
default: false
},
// 过渡时间，单位ms
duration: {
type: [String, Number],
default: 500
}
},
data() {
return {
// 图片是否加载错误，如果是，则显示错误占位图
isError: false,
// 初始化组件时，默认为加载中状态
loading: true,
// 不透明度，为了实现淡入淡出的效果
opacity: 1,
// 过渡时间，因为props的值无法修改，故需要一个中间值
durationTime: this.duration,
};
},
computed: {
wrapStyle() {
let style = {};
// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
style.width = this.$u.addUnit(this.width);
style.height = this.$u.addUnit(this.height);
// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
// 如果设置圆角，必须要有hidden，否则可能圆角无效
style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
if(this.fade) {
style.opacity = this.opacity;
style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
}
return style;
}
},
methods: {
// 点击图片
onClick() {
this.$emit('click');
},
// 图片加载失败
onErrorHandler() {
this.loading = false;
this.isError = true;
this.$emit('error');
},
// 图片加载完成，标记loading结束
onLoadHandler() {
this.loading = false;
this.error = false;
this.$emit('load');
// 如果不需要动画效果，就不执行下方代码
if(!this.fade) return ;
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
this.opacity = 0;
// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
// 到图片展示的过程中的淡入效果
this.durationTime = 0;
// 延时50ms，否则在浏览器H5，过渡效果无效
setTimeout(() => {
this.durationTime = this.duration;
this.opacity = 1;
}, 50)
}
}
};
</script>
<style scoped lang="scss">
@import '../../libs/css/style.components.scss';
.u-image {
background-color: $u-bg-color;
position: relative;
transition: opacity 0.5s ease-in-out;
&__image {
width: 100%;
height: 100%;
}
&__loading, &__error {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: $u-bg-color;
color: $u-tips-color;
font-size: 46rpx;
}
}
</style>
uview-ui/components/u-input/u-input.vue
View file @ e0ec5ac8
......@@ -318,7 +318,7 @@ export default {
&__right-icon {
position: absolute;
right: 20rpx;
right: 0;
top: 50%;
z-index: 3;
transform: translateY(-50%);
......
uview-ui/components/u-lazy-load/u-lazy-load.vue
View file @ e0ec5ac8
......@@ -126,7 +126,7 @@
// 如果是不开启过渡效果，直接返回
if (!this.isEffect) return;
this.time = 0;
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明， 意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
this.opacity = 0;
// 延时30ms，否则在浏览器H5，过渡效果无效
setTimeout(() => {
......
uview-ui/components/u-toast/u-toast.vue
View file @ e0ec5ac8
......@@ -37,10 +37,11 @@
type: '', // 主题类型，primary，success，error，warning，black
duration: 2000, // 显示的时间，毫秒
isTab: false, // 是否跳转tab页面
url: '', // toast消失后是否跳转页面，有则跳转
url: '', // toast消失后是否跳转页面，有则跳转，优先级高于back参数
icon: true, // 显示的图标
position: 'center', // toast出现的位置
callback: null, // 执行完后的回调函数
back: false, // 结束toast是否自动返回上一页
}
};
},
......@@ -117,6 +118,11 @@
url: this.config.url
});
}
} else if(this.config.back) {
// 回退到上一页
this.$u.route({
type: 'back'
})
}
}
}
......
uview-ui/components/u-upload/u-upload.vue
View file @ e0ec5ac8
......@@ -245,7 +245,14 @@ export default {
immediate: true,
handler(val) {
val.map(value => {
this.lists.push({ url: value.url, error: false, progress: 100 });
// 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList
// 时，会触发watch，导致重新把原来的图片再次添加到this.lists
// 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
let tmp = this.lists.some(val => {
return val.url == value.url;
})
// 如果内部没有这个图片(tmp为false)，则添加到内部
!tmp && this.lists.push({ url: value.url, error: false, progress: 100 });
});
}
}
......
uview-ui/index.js
View file @ e0ec5ac8
// 引入全局mixin
import mixin from './libs/mixin/mixin.js'
// 引入关于是否mixin集成小程序分享的配置
import wxshare from './libs/mixin/mpShare.js'
// import wxshare from './libs/mixin/mpShare.js'
// 全局挂载引入http相关请求拦截插件
import http from './libs/request'
......@@ -45,6 +45,8 @@ import randomArray from './libs/function/randomArray.js'
import deepClone from './libs/function/deepClone.js'
// 对象深度拷贝
import deepMerge from './libs/function/deepMerge.js'
// 添加单位
import addUnit from './libs/function/addUnit.js'
// 规则检验
import test from './libs/function/test.js'
......@@ -86,6 +88,7 @@ const $u = {
deepClone,
deepMerge,
getParent,
addUnit,
trim,
type: ['primary', 'success', 'error', 'warning', 'info'],
http,
......
uview-ui/libs/function/addUnit.js 0 → 100644
View file @ e0ec5ac8
import validation from './test.js';
// 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
export default function addUnit(value = 'auto', unit = 'rpx') {
value = String(value);
// 用uView内置验证规则中的number判断是否为数值
return validation.number(value) ? `${value}${unit}` : value;
}
\ No newline at end of file
uview-ui/theme.scss
View file @ e0ec5ac8
......@@ -6,7 +6,7 @@ $u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: red;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
$u-type-primary: #2979ff;
......
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