element-plus
Version:
A Component Library for Vue 3
1 lines • 2.6 kB
Source Map (JSON)
{"version":3,"file":"tag2.mjs","names":[],"sources":["../../../../../../packages/components/tag/src/tag.vue"],"sourcesContent":["<template>\n <span\n v-if=\"disableTransitions\"\n :class=\"containerKls\"\n :style=\"{ backgroundColor: color }\"\n @click=\"handleClick\"\n >\n <span :class=\"ns.e('content')\">\n <slot />\n </span>\n <button\n v-if=\"closable\"\n :aria-label=\"t('el.tag.close')\"\n :class=\"ns.e('close')\"\n type=\"button\"\n @click.stop=\"handleClose\"\n >\n <el-icon>\n <Close />\n </el-icon>\n </button>\n </span>\n <transition\n v-else\n :name=\"`${ns.namespace.value}-zoom-in-center`\"\n appear\n @vue:mounted=\"handleVNodeMounted\"\n >\n <span\n :class=\"containerKls\"\n :style=\"{ backgroundColor: color }\"\n @click=\"handleClick\"\n >\n <span :class=\"ns.e('content')\">\n <slot />\n </span>\n <button\n v-if=\"closable\"\n :aria-label=\"t('el.tag.close')\"\n :class=\"ns.e('close')\"\n type=\"button\"\n @click.stop=\"handleClose\"\n >\n <el-icon>\n <Close />\n </el-icon>\n </button>\n </span>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { Close } from '@element-plus/icons-vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { useFormSize } from '@element-plus/components/form'\nimport { tagEmits } from './tag'\n\nimport type { VNode } from 'vue'\nimport type { TagProps } from './tag'\n\ndefineOptions({\n name: 'ElTag',\n})\nconst props = withDefaults(defineProps<TagProps>(), {\n type: 'primary',\n effect: 'light',\n})\nconst emit = defineEmits(tagEmits)\n\nconst tagSize = useFormSize()\nconst { t } = useLocale()\nconst ns = useNamespace('tag')\nconst containerKls = computed(() => {\n const { type, hit, effect, closable, round } = props\n return [\n ns.b(),\n ns.is('closable', closable),\n ns.m(type || 'primary'),\n ns.m(tagSize.value),\n ns.m(effect),\n ns.is('hit', hit),\n ns.is('round', round),\n ]\n})\n\n// methods\nconst handleClose = (event: MouseEvent) => {\n emit('close', event)\n}\n\nconst handleClick = (event: MouseEvent) => {\n emit('click', event)\n}\n\nconst handleVNodeMounted = (vnode: VNode) => {\n // @ts-ignore\n if (vnode?.component?.subTree?.component?.bum) {\n // @ts-ignore\n vnode.component.subTree.component.bum = null\n }\n}\n</script>\n"],"mappings":""}