123456789101112131415161718192021222324252627282930313233343536 |
- <template>
- <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
- <span
- class="el-tag"
- :class="[
- type ? 'el-tag--' + type : '',
- size && `el-tag--${size}`,
- {'is-hit': hit}
- ]"
- :style="{backgroundColor: color}">
- <slot></slot>
- <i class="el-tag__close el-icon-close"
- v-if="closable"
- @click="handleClose"></i>
- </span>
- </transition>
- </template>
- <script>
- export default {
- name: 'ElTag',
- props: {
- text: String,
- closable: Boolean,
- type: String,
- hit: Boolean,
- disableTransitions: Boolean,
- color: String,
- size: String
- },
- methods: {
- handleClose(event) {
- this.$emit('close', event);
- }
- }
- };
- </script>
|