| 1 | <script>
|
| 2 | export default {
|
| 3 | functional: true,
|
| 4 | props: {
|
| 5 | type: {
|
| 6 | type: String,
|
| 7 | default: 'tip'
|
| 8 | },
|
| 9 | text: String,
|
| 10 | vertical: {
|
| 11 | type: String,
|
| 12 | default: 'top'
|
| 13 | }
|
| 14 | },
|
| 15 | render (h, { props, slots }) {
|
| 16 | return h('span', {
|
| 17 | class: ['badge', props.type],
|
| 18 | style: {
|
| 19 | verticalAlign: props.vertical
|
| 20 | }
|
| 21 | }, props.text || slots().default)
|
| 22 | }
|
| 23 | }
|
| 24 | </script>
|
| 25 |
|
| 26 | <style lang="stylus" scoped>
|
| 27 | .badge
|
| 28 | display inline-block
|
| 29 | font-size 14px
|
| 30 | height 18px
|
| 31 | line-height 18px
|
| 32 | border-radius 3px
|
| 33 | padding 0 6px
|
| 34 | color white
|
| 35 | background-color #42b983
|
| 36 | &.tip, &.green
|
| 37 | background-color $badgeTipColor
|
| 38 | &.error
|
| 39 | background-color $badgeErrorColor
|
| 40 | &.warning, &.warn, &.yellow
|
| 41 | background-color $badgeWarningColor
|
| 42 | & + &
|
| 43 | margin-left 5px
|
| 44 | </style>
|