1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <template>
- <div class="el-badge">
- <slot></slot>
- <transition name="el-zoom-in-center">
- <sup
- v-show="!hidden && (content || content === 0 || isDot)"
- v-text="content"
- class="el-badge__content"
- :class="[
- 'el-badge__content--' + type,
- {
- 'is-fixed': $slots.default,
- 'is-dot': isDot
- }
- ]">
- </sup>
- </transition>
- </div>
- </template>
- <script>
- export default {
- name: 'ElBadge',
- props: {
- value: [String, Number],
- max: Number,
- isDot: Boolean,
- hidden: Boolean,
- type: {
- type: String,
- validator(val) {
- return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
- }
- }
- },
- computed: {
- content() {
- if (this.isDot) return;
- const value = this.value;
- const max = this.max;
- if (typeof value === 'number' && typeof max === 'number') {
- return max < value ? `${max}+` : value;
- }
- return value;
- }
- }
- };
- </script>
|