浏览代码

Badge: add hidden prop, close #2042 (#2050)

cinwell.li 8 年之前
父节点
当前提交
c639474fcc
共有 3 个文件被更改,包括 13 次插入7 次删除
  1. 2 1
      examples/docs/en-US/badge.md
  2. 1 0
      examples/docs/zh-CN/badge.md
  3. 10 6
      packages/badge/src/main.vue

+ 2 - 1
examples/docs/en-US/badge.md

@@ -134,4 +134,5 @@ Use a red dot to mark content that needs to be noticed.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | value          | display value      | string, number          |          —             |    —     |
 | value          | display value      | string, number          |          —             |    —     |
 | max          |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | 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 |
+| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
+| hidden | hidden badge | boolean | - | false |

+ 1 - 0
examples/docs/zh-CN/badge.md

@@ -137,3 +137,4 @@
 | value          | 显示值      | string, number          |          —             |    —     |
 | value          | 显示值      | string, number          |          —             |    —     |
 | max          |  最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型    | number  |         —              |     —    |
 | max          |  最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型    | number  |         —              |     —    |
 | is-dot       | 小圆点    | boolean  |  —  |  false |
 | is-dot       | 小圆点    | boolean  |  —  |  false |
+| hidden | 隐藏 badge | boolean | - | false |

+ 10 - 6
packages/badge/src/main.vue

@@ -1,11 +1,14 @@
 <template>
 <template>
   <div class="el-badge">
   <div class="el-badge">
     <slot></slot>
     <slot></slot>
-    <sup
-      v-text="content"
-      class="el-badge__content"
-      :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
-    </sup>
+    <transition name="el-zoom-in-center">
+      <sup
+        v-show="!hidden"
+        v-text="content"
+        class="el-badge__content"
+        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
+      </sup>
+    </transition>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -16,7 +19,8 @@ export default {
   props: {
   props: {
     value: {},
     value: {},
     max: Number,
     max: Number,
-    isDot: Boolean
+    isDot: Boolean,
+    hidden: Boolean
   },
   },
 
 
   computed: {
   computed: {