Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoderSmallfan
uni-app
提交
bc369b57
U
uni-app
项目概览
CoderSmallfan
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bc369b57
编写于
11月 11, 2018
作者:
H
hulinneil
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修复 uni-badge 组件 样式偶发不对的问题
上级
eaaabc4c
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
36 addition
and
19 deletion
+36
-19
examples/hello-uniapp/components/uni-badge.vue
examples/hello-uniapp/components/uni-badge.vue
+36
-19
未找到文件。
examples/hello-uniapp/components/uni-badge.vue
浏览文件 @
bc369b57
<
template
>
<
template
>
<text
class=
"uni-badge"
v-if=
"text"
:class=
"
[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]
"
@
click=
"onClick()"
>
{{
text
}}
</text>
<text
class=
"uni-badge"
v-if=
"text"
:class=
"
setClass
"
@
click=
"onClick()"
>
{{
text
}}
</text>
</
template
>
</
template
>
<
script
>
<
script
>
export
default
{
export
default
{
props
:
{
props
:
{
type
:
String
,
type
:
{
inverted
:{
type
:
String
,
type
:
Boolean
,
default
:
'
default
'
default
:
false
},
},
inverted
:
{
text
:
String
type
:
Boolean
,
default
:
false
},
text
:
{
type
:
String
,
default
:
''
}
},
computed
:
{
setClass
()
{
let
classList
=
[
'
uni-badge-
'
+
this
.
type
];
if
(
this
.
inverted
===
true
)
{
classList
.
push
(
'
uni-badge-inverted
'
)
}
return
classList
.
join
(
"
"
)
}
},
},
methods
:
{
methods
:
{
onClick
()
{
onClick
()
{
...
@@ -21,8 +36,9 @@
...
@@ -21,8 +36,9 @@
</
script
>
</
script
>
<
style
>
<
style
>
.uni-badge
,
.uni-badge-default
{
.uni-badge
,
font-family
:
'Helvetica Neue'
,
Helvetica
,
sans-serif
;
.uni-badge-default
{
font-family
:
'Helvetica Neue'
,
Helvetica
,
sans-serif
;
box-sizing
:
border-box
;
box-sizing
:
border-box
;
font-size
:
12px
;
font-size
:
12px
;
line-height
:
1
;
line-height
:
1
;
...
@@ -31,65 +47,66 @@
...
@@ -31,65 +47,66 @@
color
:
#333
;
color
:
#333
;
border-radius
:
100px
;
border-radius
:
100px
;
}
}
.uni-badge.uni-badge-inverted
{
.uni-badge.uni-badge-inverted
{
padding
:
0
5px
0
0
;
padding
:
0
5px
0
0
;
color
:
#929292
;
color
:
#929292
;
background-color
:
transparent
background-color
:
transparent
}
}
.uni-badge-primary
{
.uni-badge-primary
{
color
:
#fff
;
color
:
#fff
;
background-color
:
#007aff
background-color
:
#007aff
}
}
.uni-badge-blue.uni-badge-inverted
,
.uni-badge-blue.uni-badge-inverted
,
.uni-badge-primary.uni-badge-inverted
{
.uni-badge-primary.uni-badge-inverted
{
color
:
#007aff
;
color
:
#007aff
;
background-color
:
transparent
background-color
:
transparent
}
}
.uni-badge-green
,
.uni-badge-green
,
.uni-badge-success
{
.uni-badge-success
{
color
:
#fff
;
color
:
#fff
;
background-color
:
#4cd964
;
background-color
:
#4cd964
;
}
}
.uni-badge-green.uni-badge-inverted
,
.uni-badge-green.uni-badge-inverted
,
.uni-badge-success.uni-badge-inverted
{
.uni-badge-success.uni-badge-inverted
{
color
:
#4cd964
;
color
:
#4cd964
;
background-color
:
transparent
background-color
:
transparent
}
}
.uni-badge-warning
,
.uni-badge-warning
,
.uni-badge-yellow
{
.uni-badge-yellow
{
color
:
#fff
;
color
:
#fff
;
background-color
:
#f0ad4e
background-color
:
#f0ad4e
}
}
.uni-badge-warning.uni-badge-inverted
,
.uni-badge-warning.uni-badge-inverted
,
.uni-badge-yellow.uni-badge-inverted
{
.uni-badge-yellow.uni-badge-inverted
{
color
:
#f0ad4e
;
color
:
#f0ad4e
;
background-color
:
transparent
background-color
:
transparent
}
}
.uni-badge-danger
,
.uni-badge-danger
,
.uni-badge-red
{
.uni-badge-red
{
color
:
#fff
;
color
:
#fff
;
background-color
:
#dd524d
background-color
:
#dd524d
}
}
.uni-badge-danger.uni-badge-inverted
,
.uni-badge-danger.uni-badge-inverted
,
.uni-badge-red.uni-badge-inverted
{
.uni-badge-red.uni-badge-inverted
{
color
:
#dd524d
;
color
:
#dd524d
;
background-color
:
transparent
background-color
:
transparent
}
}
.uni-badge-purple
,
.uni-badge-purple
,
.uni-badge-royal
{
.uni-badge-royal
{
color
:
#fff
;
color
:
#fff
;
background-color
:
#8a6de9
background-color
:
#8a6de9
}
}
.uni-badge-purple.uni-badge-inverted
,
.uni-badge-purple.uni-badge-inverted
,
.uni-badge-royal.uni-badge-inverted
{
.uni-badge-royal.uni-badge-inverted
{
color
:
#8a6de9
;
color
:
#8a6de9
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录