Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uview-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李晖
uview-ui
Commits
51377cee
Commit
51377cee
authored
Jul 23, 2020
by
wlxuqu
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'yiruiwen' into dev
parents
6355799f
ddca2043
Changes
15
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
375 additions
and
305 deletions
+375
-305
README.md
README.md
+2
-0
manifest.json
manifest.json
+1
-1
index.vue
pages/componentsA/navbar/index.vue
+1
-1
u-checkbox.vue
uview-ui/components/u-checkbox/u-checkbox.vue
+1
-1
u-col.vue
uview-ui/components/u-col/u-col.vue
+8
-1
u-mask.vue
uview-ui/components/u-mask/u-mask.vue
+1
-1
u-navbar.vue
uview-ui/components/u-navbar/u-navbar.vue
+255
-249
u-popup.vue
uview-ui/components/u-popup/u-popup.vue
+1
-1
u-radio.vue
uview-ui/components/u-radio/u-radio.vue
+1
-1
u-section.vue
uview-ui/components/u-section/u-section.vue
+50
-36
u-upload.vue
uview-ui/components/u-upload/u-upload.vue
+34
-1
iconfont.css
uview-ui/iconfont.css
+13
-9
index.js
uview-ui/index.js
+4
-0
config.js
uview-ui/libs/config/config.js
+2
-2
package.json
uview-ui/package.json
+1
-1
No files found.
README.md
View file @
51377cee
...
@@ -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>
## 链接
## 链接
...
...
manifest.json
View file @
51377cee
...
@@ -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"
:
{
...
...
pages/componentsA/navbar/index.vue
View file @
51377cee
...
@@ -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
,
...
...
uview-ui/components/u-checkbox/u-checkbox.vue
View file @
51377cee
...
@@ -161,7 +161,7 @@
...
@@ -161,7 +161,7 @@
},
},
methods
:
{
methods
:
{
onClickLabel
()
{
onClickLabel
()
{
if
(
!
this
.
isLabelDisabled
)
{
if
(
!
this
.
isLabelDisabled
&&
!
this
.
isDisabled
)
{
this
.
setValue
();
this
.
setValue
();
}
}
},
},
...
...
uview-ui/components/u-col/u-col.vue
View file @
51377cee
...
@@ -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
'
],
...
...
uview-ui/components/u-mask/u-mask.vue
View file @
51377cee
<
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
}">
}">
...
...
uview-ui/components/u-navbar/u-navbar.vue
View file @
51377cee
...
@@ -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
>
uview-ui/components/u-popup/u-popup.vue
View file @
51377cee
<
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"
...
...
uview-ui/components/u-radio/u-radio.vue
View file @
51377cee
...
@@ -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
();
}
}
...
...
uview-ui/components/u-section/u-section.vue
View file @
51377cee
<
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 ?
'10
rpx' : 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
:
28
rpx
;
padding-left
:
20
rpx
;
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
:
26rp
x
;
display
:
fle
x
;
display
:
flex
;
align-items
:
center
;
align-items
:
center
;
}
&
__icon-arrow
{
margin-left
:
6rpx
;
.u-icon-arrow
{
}
margin-left
:
6rpx
;
}
}
}
</
style
>
</
style
>
uview-ui/components/u-upload/u-upload.vue
View file @
51377cee
...
@@ -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
;
}
}
}
}
};
};
...
...
uview-ui/iconfont.css
View file @
51377cee
This diff is collapsed.
Click to expand it.
uview-ui/index.js
View file @
51377cee
...
@@ -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
}
}
...
...
uview-ui/libs/config/config.js
View file @
51377cee
// 此版本发布于2020-07-2
1
// 此版本发布于2020-07-2
3
let
version
=
'
1.5.
4
'
;
let
version
=
'
1.5.
5
'
;
export
default
{
export
default
{
v
:
version
,
v
:
version
,
...
...
uview-ui/package.json
View file @
51377cee
{
{
"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"
],
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment