From 261abd69fc8c36ddb3f1ceb8d1027ad61254bae0 Mon Sep 17 00:00:00 2001 From: hetech Date: Tue, 9 Oct 2018 12:14:45 +0800 Subject: [PATCH] Badge: add type attribute (#12991) * badge: add type attribute * Update badge.md --- examples/docs/en-US/badge.md | 17 ++++++++++++----- examples/docs/es/badge.md | 7 +++++++ examples/docs/zh-CN/badge.md | 17 ++++++++++++----- packages/badge/src/main.vue | 16 ++++++++++++++-- packages/theme-chalk/src/badge.scss | 16 ++++++++++++++++ 5 files changed, 61 insertions(+), 12 deletions(-) diff --git a/examples/docs/en-US/badge.md b/examples/docs/en-US/badge.md index 347e2caa6..0636dd0ef 100644 --- a/examples/docs/en-US/badge.md +++ b/examples/docs/en-US/badge.md @@ -15,6 +15,12 @@ Displays the amount of new messages. replies + + comments + + + replies + @@ -130,9 +136,10 @@ Use a red dot to mark content that needs to be noticed. ### Attributes -| Attribute | Description | Type | Accepted Values | Default | +| Attribute | Description | Type | Accepted Values | Default | |------------- |---------------- |---------------- |---------------------- |-------- | -| value | display value | string, number | — | — | -| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — | -| is-dot | if a little dot is displayed | boolean | — | false | -| hidden | hidden badge | boolean | — | false | +| value | display value | string, number | — | — | +| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — | +| is-dot | if a little dot is displayed | boolean | — | false | +| hidden | hidden badge | boolean | — | false | +| type | button type | string | primary / success / warning / danger / info | — | diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md index f61de2e62..7f91c7cbe 100644 --- a/examples/docs/es/badge.md +++ b/examples/docs/es/badge.md @@ -15,6 +15,12 @@ Muestra la cantidad de mensajes nuevos. replies + + comments + + + replies + @@ -136,3 +142,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado. | max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — | | is-dot | si se debe mostrar un pequeño punto | boolean | — | false | | hidden | hidden badge | boolean | — | false | +| type | tipo de botón | string | primary / success / warning / danger / info | — | diff --git a/examples/docs/zh-CN/badge.md b/examples/docs/zh-CN/badge.md index e0a43489f..1d866f182 100644 --- a/examples/docs/zh-CN/badge.md +++ b/examples/docs/zh-CN/badge.md @@ -20,6 +20,12 @@ 回复 + + 评论 + + + 回复 + @@ -133,8 +139,9 @@ ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | -|------------- |---------------- |---------------- |---------------------- |-------- | -| value | 显示值 | string, number | — | — | -| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — | -| is-dot | 小圆点 | boolean | — | false | -| hidden | 隐藏 badge | boolean | — | false | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 显示值 | string, number | — | — | +| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — | +| is-dot | 小圆点 | boolean | — | false | +| hidden | 隐藏 badge | boolean | — | false | +| type | 类型 | string | primary / success / warning / danger / info | — | diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue index e26c3e94b..d89e187ed 100644 --- a/packages/badge/src/main.vue +++ b/packages/badge/src/main.vue @@ -6,7 +6,13 @@ v-show="!hidden && (content || content === 0 || isDot)" v-text="content" class="el-badge__content" - :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }"> + :class="[ + 'el-badge__content--' + type, + { + 'is-fixed': $slots.default, + 'is-dot': isDot + } + ]"> @@ -20,7 +26,13 @@ export default { value: {}, max: Number, isDot: Boolean, - hidden: Boolean + hidden: Boolean, + type: { + type: String, + validator(val) { + return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1; + } + } }, computed: { diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss index 727d45371..1ef8d3897 100644 --- a/packages/theme-chalk/src/badge.scss +++ b/packages/theme-chalk/src/badge.scss @@ -37,5 +37,21 @@ right: 0; border-radius: 50%; } + + @each $type in (primary, success, warning, info, danger) { + @include m($type) { + @if $type == primary { + background-color: $--color-primary; + } @else if $type == success { + background-color: $--color-success; + } @else if $type == warning { + background-color: $--color-warning; + } @else if $type == info { + background-color: $--color-info; + } @else { + background-color: $--color-danger; + } + } + } } }