1- <template >
2- <text v-if =" text" :class =" inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" class =" uni-badge" @click =" onClick()" >{{ text }}</text >
3- </template >
4-
5- <script >
6- export default {
7- name: ' UniBadge' ,
8- props: {
9- type: {
10- type: String ,
11- default: ' default'
12- },
13- inverted: {
14- type: Boolean ,
15- default: false
16- },
17- text: {
18- type: String ,
19- default: ' '
20- },
21- size: { // small.normal
22- type: String ,
23- default: ' normal'
24- }
25- },
26- methods: {
27- onClick () {
28- this .$emit (' click' )
29- }
30- }
31- }
32- </script >
33-
34- <style >
35- @charset "UTF-8";
36-
37- .uni-badge {
38- font-family : ' Helvetica Neue' , Helvetica , sans-serif ;
39- box-sizing : border-box ;
40- font-size : 12px ;
41- line-height : 1 ;
42- display : inline-block ;
43- padding : 3px 6px ;
44- color : #333 ;
45- border-radius : 100px ;
46- background-color : #f1f1f1
47- }
48-
49- .uni-badge.uni-badge-inverted {
50- padding : 0 5px 0 0 ;
51- color : #999 ;
52- background-color : transparent
53- }
54-
55- .uni-badge-primary {
56- color : #fff ;
57- background-color : #007aff
58- }
59-
60- .uni-badge-primary.uni-badge-inverted {
61- color : #007aff ;
62- background-color : transparent
63- }
64-
65- .uni-badge-success {
66- color : #fff ;
67- background-color : #4cd964
68- }
69-
70- .uni-badge-success.uni-badge-inverted {
71- color : #4cd964 ;
72- background-color : transparent
73- }
74-
75- .uni-badge-warning {
76- color : #fff ;
77- background-color : #f0ad4e
78- }
79-
80- .uni-badge-warning.uni-badge-inverted {
81- color : #f0ad4e ;
82- background-color : transparent
83- }
84-
85- .uni-badge-error {
86- color : #fff ;
87- background-color : #dd524d
88- }
89-
90- .uni-badge-error.uni-badge-inverted {
91- color : #dd524d ;
92- background-color : transparent
93- }
94-
95- .uni-badge--small {
96- transform : scale (.8 );
97- transform-origin : center center
98- }
1+ <template >
2+ <text v-if =" text" :class =" inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" class =" uni-badge" @click =" onClick()" >{{ text }}</text >
3+ </template >
4+
5+ <script >
6+ export default {
7+ name: ' UniBadge' ,
8+ props: {
9+ type: {
10+ type: String ,
11+ default: ' default'
12+ },
13+ inverted: {
14+ type: Boolean ,
15+ default: false
16+ },
17+ text: {
18+ type: String ,
19+ default: ' '
20+ },
21+ size: { // small.normal
22+ type: String ,
23+ default: ' normal'
24+ }
25+ },
26+ methods: {
27+ onClick () {
28+ this .$emit (' click' )
29+ }
30+ }
31+ }
32+ </script >
33+
34+ <style >
35+ @charset "UTF-8";
36+
37+ .uni-badge {
38+ font-family : ' Helvetica Neue' , Helvetica , sans-serif ;
39+ box-sizing : border-box ;
40+ font-size : 12px ;
41+ line-height : 1 ;
42+ display : inline-block ;
43+ padding : 3px 6px ;
44+ color : #333 ;
45+ border-radius : 100px ;
46+ background-color : #f1f1f1
47+ }
48+
49+ .uni-badge.uni-badge-inverted {
50+ padding : 0 5px 0 0 ;
51+ color : #999 ;
52+ background-color : transparent
53+ }
54+
55+ .uni-badge-primary {
56+ color : #fff ;
57+ background-color : #007aff
58+ }
59+
60+ .uni-badge-primary.uni-badge-inverted {
61+ color : #007aff ;
62+ background-color : transparent
63+ }
64+
65+ .uni-badge-success {
66+ color : #fff ;
67+ background-color : #4cd964
68+ }
69+
70+ .uni-badge-success.uni-badge-inverted {
71+ color : #4cd964 ;
72+ background-color : transparent
73+ }
74+
75+ .uni-badge-warning {
76+ color : #fff ;
77+ background-color : #f0ad4e
78+ }
79+
80+ .uni-badge-warning.uni-badge-inverted {
81+ color : #f0ad4e ;
82+ background-color : transparent
83+ }
84+
85+ .uni-badge-error {
86+ color : #fff ;
87+ background-color : #dd524d
88+ }
89+
90+ .uni-badge-error.uni-badge-inverted {
91+ color : #dd524d ;
92+ background-color : transparent
93+ }
94+
95+ .uni-badge--small {
96+ transform : scale (.8 );
97+ transform-origin : center center
98+ }
9999 </style >
0 commit comments