Commit 51377cee authored by wlxuqu's avatar wlxuqu

Merge branch 'yiruiwen' into dev

parents 6355799f ddca2043
...@@ -38,6 +38,8 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全 ...@@ -38,6 +38,8 @@ uView UI,是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架,全
#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index) #### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)
#### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table) #### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table)
#### **luch-request** —— [基于 Promise 开发的 uni-app 跨平台、项目级别的请求库,它有更小的体积,易用的 api,方便简单的自定义能力](https://www.quanzhan.co/luch-request/)
<br> <br>
## 链接 ## 链接
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"name" : "uView", "name" : "uView",
"appid" : "__UNI__60F4B81", "appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架", "description" : "多平台快速开发的UI框架",
"versionName" : "1.5.4", "versionName" : "1.5.5",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
......
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
return { return {
title: '新闻', title: '新闻',
backText: '返回', backText: '返回',
backIconName: 'arrow-left', backIconName: 'nav-back',
right: false, right: false,
showAction: false, showAction: false,
rightSlot: false, rightSlot: false,
......
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
}, },
methods: { methods: {
onClickLabel() { onClickLabel() {
if (!this.isLabelDisabled) { if (!this.isLabelDisabled && !this.isDisabled) {
this.setValue(); this.setValue();
} }
}, },
......
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
marginLeft: 100 / 12 * offset + '%', marginLeft: 100 / 12 * offset + '%',
flex: `0 0 ${100 / 12 * span}%`, flex: `0 0 ${100 / 12 * span}%`,
alignItems: uAlignItem, alignItems: uAlignItem,
justifyContent: uJustify justifyContent: uJustify,
textAlign: this.textAlign
}" @tap.stop.prevent="click"> }" @tap.stop.prevent="click">
<slot></slot> <slot></slot>
</view> </view>
...@@ -18,6 +19,7 @@ ...@@ -18,6 +19,7 @@
* @description 通过基础的 12 分栏,迅速简便地创建布局(搭配<u-row>使用) * @description 通过基础的 12 分栏,迅速简便地创建布局(搭配<u-row>使用)
* @tutorial https://www.uviewui.com/components/layout.html * @tutorial https://www.uviewui.com/components/layout.html
* @property {String Number} span 栅格占据的列数,总12等分(默认0) * @property {String Number} span 栅格占据的列数,总12等分(默认0)
* @property {String} text-align 文字水平对齐方式(默认left)
* @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0) * @property {String Number} offset 分栏左边偏移,计算方式与span相同(默认0)
* @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col> * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
*/ */
...@@ -43,6 +45,11 @@ ...@@ -43,6 +45,11 @@
align: { align: {
type: String, type: String,
default: 'center' default: 'center'
},
// 文字对齐方式
textAlign: {
type: String,
default: 'left'
} }
}, },
inject: ['gutter'], inject: ['gutter'],
......
<template> <template>
<view class="u-mask" :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent :class="{ <view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click" @touchmove.stop.prevent :class="{
'u-mask-zoom': zoom, 'u-mask-zoom': zoom,
'u-mask-show': show 'u-mask-show': show
}"> }">
......
...@@ -4,22 +4,27 @@ ...@@ -4,22 +4,27 @@
<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view> <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="u-navbar-inner" :style="[navbarInnerStyle]"> <view class="u-navbar-inner" :style="[navbarInnerStyle]">
<view class="u-back-wrap" v-if="isBack" @tap="goBack"> <view class="u-back-wrap" v-if="isBack" @tap="goBack">
<view class="u-icon-wrap"><u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon></view> <view class="u-icon-wrap">
<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
</view>
<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view> <view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
</view> </view>
<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]"> <view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
<view <view
class="u-title u-line-1" class="u-title u-line-1"
:style="{ :style="{
color: titleColor, color: titleColor,
fontSize: titleSize + 'rpx' fontSize: titleSize + 'rpx'
}" }">
>
{{ title }} {{ title }}
</view> </view>
</view> </view>
<view class="u-slot-content"><slot></slot></view> <view class="u-slot-content">
<view class="u-slot-right"><slot name="right"></slot></view> <slot></slot>
</view>
<view class="u-slot-right">
<slot name="right"></slot>
</view>
</view> </view>
</view> </view>
<!-- 解决fixed定位后导航栏塌陷的问题 --> <!-- 解决fixed定位后导航栏塌陷的问题 -->
...@@ -28,268 +33,269 @@ ...@@ -28,268 +33,269 @@
</template> </template>
<script> <script>
// 获取系统状态栏的高度 // 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync(); let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {}; let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API,尚未兼容) // 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API,尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect(); menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif // #endif
/** /**
* navbar 自定义导航栏 * navbar 自定义导航栏
* @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uniapp自带的导航栏。 * @description 此组件一般用于在特殊情况下,需要自定义导航栏的时候用到,一般建议使用uniapp自带的导航栏。
* @tutorial https://www.uviewui.com/components/navbar.html * @tutorial https://www.uviewui.com/components/navbar.html
* @property {String Number} height 导航栏高度(不包括状态栏高度在内,内部自动加上),注意这里的单位是px(默认44) * @property {String Number} height 导航栏高度(不包括状态栏高度在内,内部自动加上),注意这里的单位是px(默认44)
* @property {String} back-icon-color 左边返回图标的颜色(默认#606266) * @property {String} back-icon-color 左边返回图标的颜色(默认#606266)
* @property {String} back-icon-name 左边返回图标的名称,只能为uView自带的图标(默认arrow-left) * @property {String} back-icon-name 左边返回图标的名称,只能为uView自带的图标(默认arrow-left)
* @property {String Number} back-icon-size 左边返回图标的大小,单位rpx(默认30) * @property {String Number} back-icon-size 左边返回图标的大小,单位rpx(默认30)
* @property {String} back-text 返回图标右边的辅助提示文字 * @property {String} back-text 返回图标右边的辅助提示文字
* @property {Object} back-text-style 返回图标右边的辅助提示文字的样式,对象形式(默认{ color: '#606266' }) * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式,对象形式(默认{ color: '#606266' })
* @property {String} title 导航栏标题,如设置为空字符,将会隐藏标题占位区域 * @property {String} title 导航栏标题,如设置为空字符,将会隐藏标题占位区域
* @property {String Number} title-width 导航栏标题的最大宽度,内容超出会以省略号隐藏,单位rpx(默认250) * @property {String Number} title-width 导航栏标题的最大宽度,内容超出会以省略号隐藏,单位rpx(默认250)
* @property {String} title-color 标题的颜色(默认#606266) * @property {String} title-color 标题的颜色(默认#606266)
* @property {String Number} title-size 导航栏标题字体大小,单位rpx(默认32) * @property {String Number} title-size 导航栏标题字体大小,单位rpx(默认32)
* @property {Function} custom-back 自定义返回逻辑方法 * @property {Function} custom-back 自定义返回逻辑方法
* @property {String Number} z-index 固定在顶部时的z-index值(默认980) * @property {String Number} z-index 固定在顶部时的z-index值(默认980)
* @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字(默认true) * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字(默认true)
* @property {Object} background 导航栏背景设置,见官网说明(默认{ background: '#ffffff' }) * @property {Object} background 导航栏背景设置,见官网说明(默认{ background: '#ffffff' })
* @property {Boolean} is-fixed 导航栏是否固定在顶部(默认true) * @property {Boolean} is-fixed 导航栏是否固定在顶部(默认true)
* @property {Boolean} border-bottom 导航栏底部是否显示下边框,如定义了较深的背景颜色,可取消此值(默认true) * @property {Boolean} border-bottom 导航栏底部是否显示下边框,如定义了较深的背景颜色,可取消此值(默认true)
* @example <u-navbar back-text="返回" title="剑未配妥,出门已是江湖"></u-navbar> * @example <u-navbar back-text="返回" title="剑未配妥,出门已是江湖"></u-navbar>
*/ */
export default { export default {
name: "u-navbar", name: "u-navbar",
props: { props: {
// 导航栏高度,单位px,非rpx // 导航栏高度,单位px,非rpx
height: { height: {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
// 返回箭头的颜色 // 返回箭头的颜色
backIconColor: { backIconColor: {
type: String, type: String,
default: '#606266' default: '#606266'
}, },
// 左边返回的图标 // 左边返回的图标
backIconName: { backIconName: {
type: String, type: String,
default: 'arrow-left' default: 'nav-back'
}, },
// 左边返回图标的大小,rpx // 左边返回图标的大小,rpx
backIconSize: { backIconSize: {
type: [String, Number], type: [String, Number],
default: '30' default: '44'
}, },
// 返回的文字提示 // 返回的文字提示
backText: { backText: {
type: String, type: String,
default: '' default: ''
}, },
// 返回的文字的 样式 // 返回的文字的 样式
backTextStyle: { backTextStyle: {
type: Object, type: Object,
default() { default () {
return { return {
color: '#606266' color: '#606266'
}
} }
} },
}, // 导航栏标题
// 导航栏标题 title: {
title: { type: String,
type: String, default: ''
default: '' },
}, // 标题的宽度,如果需要自定义右侧内容,且右侧内容很多时,可能需要减少这个宽度,单位rpx
// 标题的宽度,如果需要自定义右侧内容,且右侧内容很多时,可能需要减少这个宽度,单位rpx titleWidth: {
titleWidth: { type: [String, Number],
type: [String, Number], default: '250'
default: '250' },
}, // 标题的颜色
// 标题的颜色 titleColor: {
titleColor: { type: String,
type: String, default: '#606266'
default: '#606266' },
}, // 标题的字体大小
// 标题的字体大小 titleSize: {
titleSize: { type: [String, Number],
type: [String, Number], default: 32
default: 32 },
}, isBack: {
isBack: { type: [Boolean, String],
type: [Boolean, String], default: true
default: true },
}, // 对象形式,因为用户可能定义一个纯色,或者线性渐变的颜色
// 对象形式,因为用户可能定义一个纯色,或者线性渐变的颜色 background: {
background: { type: Object,
type: Object, default () {
default() { return {
return { background: '#ffffff'
background: '#ffffff' }
} }
},
// 导航栏是否固定在顶部
isFixed: {
type: Boolean,
default: true
},
// 是否显示导航栏的下边框
borderBottom: {
type: Boolean,
default: true
},
zIndex: {
type: [String, Number],
default: ''
},
// 自定义返回逻辑
customBack: {
type: Function,
default: null
} }
}, },
// 导航栏是否固定在顶部 data() {
isFixed: { return {
type: Boolean, menuButtonInfo: menuButtonInfo,
default: true statusBarHeight: systemInfo.statusBarHeight
}, };
// 是否显示导航栏的下边框
borderBottom: {
type: Boolean,
default: true
}, },
zIndex: { computed: {
type: [String, Number], // 导航栏内部盒子的样式
default: '' navbarInnerStyle() {
}, let style = {};
// 自定义返回逻辑 // 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离
customBack: { style.height = this.navbarHeight + 'px';
type: Function, // // 如果是各家小程序,导航栏内部的宽度需要减少右边胶囊的宽度
default: null // #ifdef MP
} let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
}, style.marginRight = rightButtonWidth + 'px';
data() { // #endif
return { return style;
menuButtonInfo: menuButtonInfo, },
statusBarHeight: systemInfo.statusBarHeight // 整个导航栏的样式
}; navbarStyle() {
}, let style = {};
computed: { style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
// 导航栏内部盒子的样式 // 合并用户传递的背景色对象
navbarInnerStyle() { Object.assign(style, this.background);
let style = {}; return style;
// 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离 },
style.height = this.navbarHeight + 'px'; // 导航中间的标题的样式
// // 如果是各家小程序,导航栏内部的宽度需要减少右边胶囊的宽度 titleStyle() {
// #ifdef MP let style = {};
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; // #ifndef MP
style.marginRight = rightButtonWidth + 'px'; style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
// #endif style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
return style; // #endif
}, // #ifdef MP
// 整个导航栏的样式 // 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间,是通过绝对定位实现的
navbarStyle() { let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
let style = {}; style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar; style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
// 合并用户传递的背景色对象 'px';
Object.assign(style, this.background); // #endif
return style; style.width = uni.upx2px(this.titleWidth) + 'px';
}, return style;
// 导航中间的标题的样式 },
titleStyle() { // 转换字符数值为真正的数值
let style = {}; navbarHeight() {
// #ifndef MP // #ifdef APP-PLUS || H5
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; return this.height ? this.height : 44;
style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; // #endif
// #endif // #ifdef MP
// #ifdef MP // 小程序特别处理,让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间,是通过绝对定位实现的 // 此方法有缺陷,暂不用(会导致少了几个px),采用直接固定值的方式
let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left; // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px'; let height = systemInfo.platform == 'ios' ? 44 : 48;
style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth + 'px'; return this.height ? this.height : height;
// #endif // #endif
style.width = uni.upx2px(this.titleWidth) + 'px'; }
return style;
}, },
// 转换字符数值为真正的数值 created() {},
navbarHeight() { methods: {
// #ifdef APP-PLUS || H5 goBack() {
return this.height ? this.height : 44; // 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑
// #endif if (typeof this.customBack === 'function') {
// #ifdef MP this.customBack();
// 小程序特别处理,让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离) } else {
// 此方法有缺陷,暂不用(会导致少了几个px),采用直接固定值的方式 uni.navigateBack();
// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度 }
let height = systemInfo.platform == 'ios' ? 44 : 48;
return this.height ? this.height : height;
// #endif
}
},
created() {},
methods: {
goBack() {
// 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑
if(typeof this.customBack === 'function') {
this.customBack();
} else {
uni.navigateBack();
} }
} }
} };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-navbar { .u-navbar {
width: 100%; width: 100%;
} }
.u-navbar-fixed { .u-navbar-fixed {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
z-index: 991; z-index: 991;
} }
.u-status-bar { .u-status-bar {
width: 100%; width: 100%;
} }
.u-navbar-inner { .u-navbar-inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
align-items: center; align-items: center;
} }
.u-back-wrap { .u-back-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
flex-grow: 0; flex-grow: 0;
padding: 14rpx 14rpx 14rpx 24rpx; padding: 14rpx 14rpx 14rpx 24rpx;
} }
.u-back-text { .u-back-text {
padding-left: 4rpx; padding-left: 4rpx;
font-size: 30rpx; font-size: 30rpx;
} }
.u-navbar-content-title { .u-navbar-content-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
height: 60rpx; height: 60rpx;
text-align: center; text-align: center;
flex-shrink: 0; flex-shrink: 0;
} }
.u-navbar-centent-slot { .u-navbar-centent-slot {
flex: 1; flex: 1;
} }
.u-title { .u-title {
line-height: 60rpx; line-height: 60rpx;
font-size: 32rpx; font-size: 32rpx;
flex: 1; flex: 1;
} }
.u-navbar-right { .u-navbar-right {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.u-slot-content { .u-slot-content {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
</style> </style>
<template> <template>
<view v-if="visibleSync" :style="[customStyle, { <view v-if="visibleSync" :style="[customStyle, {
zIndex: uZindex - 1 zIndex: uZindex - 1
}]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer"> }]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer" hover-stop-propagation>
<u-mask :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask> <u-mask :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
<view <view
class="u-drawer-content" class="u-drawer-content"
......
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
}, },
methods: { methods: {
onClickLabel() { onClickLabel() {
if (!this.elLabelDisabled) { if (!this.elLabelDisabled && !this.elDisabled) {
this.parent.setValue(this.name); this.parent.setValue(this.name);
this.emitEvent(); this.emitEvent();
} }
......
<template> <template>
<view class="u-section"> <view class="u-section">
<view class="u-section-title" :style="{ <view class="u-section__title" :style="{
fontWeight: bold ? 'bold' : 'normal', fontWeight: bold ? 'bold' : 'normal',
color: color, color: color,
fontSize: fontSize + 'rpx', fontSize: fontSize + 'rpx',
paddingLeft: showLine ? '10rpx' : 0 paddingLeft: showLine ? (fontSize * 0.7) + 'rpx' : 0
}" :class="{ }" :class="{
'u-section--line': showLine 'u-section--line': showLine
}"> }">
{{title}} <view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]">
<u-icon name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
</view>
<text class="u-flex u-section__title__text">{{title}}</text>
</view> </view>
<view class="u-right-info" v-if="right" :style="{ <view class="u-section__right-info" v-if="right" :style="{
color: subColor color: subColor
}" @tap="rightClick"> }" @tap="rightClick">
{{subTitle}} {{subTitle}}
<view class="u-icon-arrow"> <view class="u-section__right-info__icon-arrow u-flex">
<u-icon name="arrow-right" size="24" :color="subColor"></u-icon> <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
</view> </view>
</view> </view>
...@@ -56,7 +59,7 @@ ...@@ -56,7 +59,7 @@
}, },
fontSize: { fontSize: {
type: [Number, String], type: [Number, String],
default: 28 default: 32
}, },
// 主标题是否加粗 // 主标题是否加粗
bold: { bold: {
...@@ -77,11 +80,22 @@ ...@@ -77,11 +80,22 @@
showLine: { showLine: {
type: Boolean, type: Boolean,
default: true default: true
},
// 左边竖线的颜色
lineColor: {
type: String,
default: ''
} }
}, },
data() { computed: {
return { // 左边竖条的样式
lineStyle() {
// 由于安卓和iOS的,需要稍微调整绝对定位的top值,才能让左边的竖线和右边的文字垂直居中
return {
// 由于竖线为字体图标,具有比实际线宽更宽的宽度,所以也需要根据字体打下动态调整
left: -(Number(this.fontSize) * 0.9) + 'rpx',
top: -(Number(this.fontSize) * (this.$u.os == 'ios' ? 0.13 : 0.15)) + 'rpx',
}
} }
}, },
methods: { methods: {
...@@ -100,32 +114,32 @@ ...@@ -100,32 +114,32 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
}
&__title {
.u-section-title { position: relative;
position: relative; font-size: 28rpx;
font-size: 28rpx; padding-left: 20rpx;
line-height: 1; display: flex;
} align-items: center;
.u-section--line:after { &__icon-wrap {
position: absolute; position: absolute;
width: 4px; }
height: 100%;
content: ''; &__text {
left: 0; line-height: 1;
border-radius: 10px; }
background-color: currentColor; }
}
&__right-info {
.u-right-info { color: $u-tips-color;
color: $u-tips-color; font-size: 26rpx;
font-size: 26rpx; display: flex;
display: flex; align-items: center;
align-items: center;
} &__icon-arrow {
margin-left: 6rpx;
.u-icon-arrow { }
margin-left: 6rpx; }
} }
</style> </style>
...@@ -230,7 +230,14 @@ export default { ...@@ -230,7 +230,14 @@ export default {
beforeUpload: { beforeUpload: {
type: Function, type: Function,
default: null default: null
} },
// 允许上传的图片后缀
limitType:{
type: Array,
default() {
return ['png', 'jpg', 'jpeg', 'webp'];
}
},
}, },
mounted() {}, mounted() {},
data() { data() {
...@@ -291,6 +298,9 @@ export default { ...@@ -291,6 +298,9 @@ export default {
let file = null; let file = null;
let listOldLength = this.lists.length; let listOldLength = this.lists.length;
res.tempFiles.map((val, index) => { res.tempFiles.map((val, index) => {
// 检查文件后缀是否允许,如果不在this.limitType内,就会返回false
if(!this.checkFileExt(val)) return ;
// 如果是非多选,index大于等于1或者超出最大限制数量时,不处理 // 如果是非多选,index大于等于1或者超出最大限制数量时,不处理
if (!multiple && index >= 1) return; if (!multiple && index >= 1) return;
if (val.size > maxSize) { if (val.size > maxSize) {
...@@ -466,6 +476,29 @@ export default { ...@@ -466,6 +476,29 @@ export default {
}); });
} }
}); });
},
// 判断文件后缀是否允许
checkFileExt(file) {
// 检查是否在允许的后缀中
let noArrowExt = false;
// 获取后缀名
let fileExt = '';
const reg = /.+\./;
// 如果是H5,需要从name中判断
// #ifdef H5
fileExt = file.name.replace(reg, "").toLowerCase();
// #endif
// 非H5,需要从path中读取后缀
// #ifndef H5
fileExt = file.path.replace(reg, "").toLowerCase();
// #endif
// 使用数组的some方法,只要符合limitType中的一个,就返回true
noArrowExt = this.limitType.some(ext => {
// 转为小写
return ext.toLowerCase() === fileExt;
})
if(!noArrowExt) this.showToast(`不允许选择${fileExt}格式的文件`);
return noArrowExt;
} }
} }
}; };
......
This diff is collapsed.
...@@ -117,6 +117,10 @@ const install = Vue => { ...@@ -117,6 +117,10 @@ const install = Vue => {
Vue.filter('timeFrom', (timestamp, format) => { Vue.filter('timeFrom', (timestamp, format) => {
return timeFrom(timestamp, format) return timeFrom(timestamp, format)
}) })
// 获取设备信息,挂载到$u的sys(system的缩写)属性中,
// 同时把安卓和ios平台的名称"ios"和"android"挂到$u.os中,方便取用
$u.sys = uni.getSystemInfoSync();
$u.os = $u.sys.platform;
Vue.prototype.$u = $u Vue.prototype.$u = $u
} }
......
// 此版本发布于2020-07-21 // 此版本发布于2020-07-23
let version = '1.5.4'; let version = '1.5.5';
export default { export default {
v: version, v: version,
......
{ {
"name": "uview-ui", "name": "uview-ui",
"version": "1.5.4", "version": "1.5.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