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
279115b4
Commit
279115b4
authored
Sep 20, 2020
by
TtTao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
新增:图标ICON进度/半星显示,为评分半星做支持
parent
a25e0475
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
96 additions
and
30 deletions
+96
-30
u-icon.vue
uview-ui/components/u-icon/u-icon.vue
+96
-30
No files found.
uview-ui/components/u-icon/u-icon.vue
View file @
279115b4
<
template
>
<
template
>
<view
:style=
"[customStyle]"
class=
"u-icon"
@
tap=
"click"
:class=
"['u-icon--' + labelPos]"
>
<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>
<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-else
class=
"u-icon__icon"
:class=
"customClass"
:style=
"[iconStyle]"
:hover-class=
"hoverClass"
@
touchstart=
"touchstart"
>
<text
v-if=
"showDecimalIcon"
:style=
"[decimalIconStyle]"
:class=
"decimalIconClass"
:hover-class=
"hoverClass"
class=
"u-icon__decimal"
>
</text>
</text>
<!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
<!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
<text
v-if=
"label !== ''"
class=
"u-icon__label"
:style=
"
{
<text
v-if=
"label !== ''"
class=
"u-icon__label"
:style=
"
{
color: labelColor,
color: labelColor,
...
@@ -10,7 +15,8 @@
...
@@ -10,7 +15,8 @@
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
}">
{{
label
}}
</text>
}">
{{
label
}}
</text>
</view>
</view>
</
template
>
</
template
>
...
@@ -38,6 +44,11 @@
...
@@ -38,6 +44,11 @@
* @property {String} width 显示图片小图标时的宽度
* @property {String} width 显示图片小图标时的宽度
* @property {String} height 显示图片小图标时的高度
* @property {String} height 显示图片小图标时的高度
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {Boolean} show-decimal-icon 是否为DecimalIcon
* @property {String} inactive-color 背景颜色,可接受主题色,仅Decimal时有效
* @property {String | Number} percent 显示的百分比,仅Decimal时有效
* @event {Function} click 点击图标时触发
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
*/
...
@@ -145,71 +156,120 @@ export default {
...
@@ -145,71 +156,120 @@ export default {
top
:
{
top
:
{
type
:
[
String
,
Number
],
type
:
[
String
,
Number
],
default
:
0
default
:
0
},
// 是否为DecimalIcon
showDecimalIcon
:
{
type
:
Boolean
,
default
:
false
},
// 背景颜色,可接受主题色,仅Decimal时有效
inactiveColor
:
{
type
:
String
,
default
:
'
#ececec
'
},
// 显示的百分比,仅Decimal时有效
percent
:
{
type
:
[
Number
,
String
],
default
:
'
50
'
}
}
},
},
computed
:
{
computed
:
{
customClass
()
{
customClass
()
{
let
classes
=
[]
;
let
classes
=
[]
classes
.
push
(
this
.
customPrefix
+
'
-
'
+
this
.
name
)
;
classes
.
push
(
this
.
customPrefix
+
'
-
'
+
this
.
name
)
// uView的自定义图标类名为u-iconfont
// uView的自定义图标类名为u-iconfont
if
(
this
.
customPrefix
==
'
uicon
'
)
classes
.
push
(
'
u-iconfont
'
);
if
(
this
.
customPrefix
==
'
uicon
'
)
{
else
classes
.
push
(
this
.
customPrefix
);
classes
.
push
(
'
u-iconfont
'
)
}
else
{
classes
.
push
(
this
.
customPrefix
)
}
// 主题色,通过类配置
// 主题色,通过类配置
if
(
this
.
color
&&
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
classes
.
push
(
'
u-icon__icon--
'
+
this
.
color
);
if
(
this
.
showDecimalIcon
&&
this
.
inactiveColor
&&
this
.
$u
.
config
.
type
.
includes
(
this
.
inactiveColor
))
{
classes
.
push
(
'
u-icon__icon--
'
+
this
.
inactiveColor
)
}
else
if
(
this
.
color
&&
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
classes
.
push
(
'
u-icon__icon--
'
+
this
.
color
)
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes
=
classes
.
join
(
'
'
)
;
classes
=
classes
.
join
(
'
'
)
//#endif
//#endif
return
classes
;
return
classes
},
},
iconStyle
()
{
iconStyle
()
{
let
style
=
{}
;
let
style
=
{}
style
=
{
style
=
{
fontSize
:
this
.
size
==
'
inherit
'
?
'
inherit
'
:
this
.
$u
.
addUnit
(
this
.
size
),
fontSize
:
this
.
size
==
'
inherit
'
?
'
inherit
'
:
this
.
$u
.
addUnit
(
this
.
size
),
fontWeight
:
this
.
bold
?
'
bold
'
:
'
normal
'
,
fontWeight
:
this
.
bold
?
'
bold
'
:
'
normal
'
,
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
top
:
this
.
$u
.
addUnit
(
this
.
top
)
top
:
this
.
$u
.
addUnit
(
this
.
top
)
}
;
}
// 非主题色值时,才当作颜色值
// 非主题色值时,才当作颜色值
if
(
this
.
color
&&
!
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
style
.
color
=
this
.
color
;
if
(
this
.
showDecimalIcon
&&
this
.
inactiveColor
&&
!
this
.
$u
.
config
.
type
.
includes
(
this
.
inactiveColor
))
{
return
style
;
style
.
color
=
this
.
inactiveColor
}
else
if
(
this
.
color
&&
!
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
style
.
color
=
this
.
color
return
style
},
},
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
isImg
()
{
isImg
()
{
return
this
.
name
.
indexOf
(
'
/
'
)
!==
-
1
;
return
this
.
name
.
indexOf
(
'
/
'
)
!==
-
1
},
},
imgStyle
()
{
imgStyle
()
{
let
style
=
{}
;
let
style
=
{}
// 如果设置width和height属性,则优先使用,否则使用size属性
// 如果设置width和height属性,则优先使用,否则使用size属性
style
.
width
=
this
.
width
?
this
.
$u
.
addUnit
(
this
.
width
)
:
this
.
$u
.
addUnit
(
this
.
size
);
style
.
width
=
this
.
width
?
this
.
$u
.
addUnit
(
this
.
width
)
:
this
.
$u
.
addUnit
(
this
.
size
)
style
.
height
=
this
.
height
?
this
.
$u
.
addUnit
(
this
.
height
)
:
this
.
$u
.
addUnit
(
this
.
size
);
style
.
height
=
this
.
height
?
this
.
$u
.
addUnit
(
this
.
height
)
:
this
.
$u
.
addUnit
(
this
.
size
)
return
style
;
return
style
},
decimalIconStyle
()
{
let
style
=
{}
style
=
{
fontSize
:
this
.
size
==
'
inherit
'
?
'
inherit
'
:
this
.
$u
.
addUnit
(
this
.
size
),
fontWeight
:
this
.
bold
?
'
bold
'
:
'
normal
'
,
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
top
:
this
.
$u
.
addUnit
(
this
.
top
),
width
:
this
.
percent
+
'
%
'
}
// 非主题色值时,才当作颜色值
if
(
this
.
color
&&
!
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
style
.
color
=
this
.
color
return
style
},
decimalIconClass
()
{
let
classes
=
[]
classes
.
push
(
this
.
customPrefix
+
'
-
'
+
this
.
name
)
// uView的自定义图标类名为u-iconfont
if
(
this
.
customPrefix
==
'
uicon
'
)
{
classes
.
push
(
'
u-iconfont
'
)
}
else
{
classes
.
push
(
this
.
customPrefix
)
}
// 主题色,通过类配置
if
(
this
.
color
&&
this
.
$u
.
config
.
type
.
includes
(
this
.
color
))
classes
.
push
(
'
u-icon__icon--
'
+
this
.
color
)
else
classes
.
push
(
'
u-icon__icon--primary
'
)
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes
=
classes
.
join
(
'
'
)
//#endif
return
classes
}
}
},
},
methods
:
{
methods
:
{
click
()
{
click
()
{
this
.
$emit
(
'
click
'
,
this
.
index
)
;
this
.
$emit
(
'
click
'
,
this
.
index
)
},
},
touchstart
()
{
touchstart
()
{
this
.
$emit
(
'
touchstart
'
,
this
.
index
)
;
this
.
$emit
(
'
touchstart
'
,
this
.
index
)
}
}
}
}
}
;
}
</
script
>
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
scoped
lang=
"scss"
>
@import
"../../libs/css/style.components.scss"
;
@import
"../../libs/css/style.components.scss"
;
/* #ifndef APP-NVUE */
// 目前由于nvue对定义字体时的content属性报错,所以nvue先不引入
@import
'../../iconfont.css'
;
@import
'../../iconfont.css'
;
/* #endif */
.u-icon
{
.u-icon
{
/* #ifndef APP-NVUE */
display
:
inline-flex
;
display
:
inline-flex
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
align-items
:
center
;
&
--left
{
&
--left
{
...
@@ -234,7 +294,7 @@ export default {
...
@@ -234,7 +294,7 @@ export default {
&
__icon
{
&
__icon
{
position
:
relative
;
position
:
relative
;
&
--primary
{
&
--primary
{
color
:
$u-type-primary
;
color
:
$u-type-primary
;
}
}
...
@@ -256,11 +316,17 @@ export default {
...
@@ -256,11 +316,17 @@ export default {
}
}
}
}
&
__decimal
{
position
:
absolute
;
top
:
0
;
left
:
0
;
display
:
inline-block
;
overflow
:
hidden
;
}
&
__img
{
&
__img
{
/* #ifndef APP-PLUS */
height
:
auto
;
height
:
auto
;
will-change
:
transform
;
will-change
:
transform
;
/* #endif */
}
}
&
__label
{
&
__label
{
...
...
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