element-plus
Version:
A Component Library for Vue 3
1 lines • 2.63 kB
Source Map (JSON)
{"version":3,"file":"button2.mjs","names":[],"sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n <component\n :is=\"tag\"\n ref=\"_ref\"\n v-bind=\"_props\"\n :class=\"buttonKls\"\n :style=\"buttonStyle\"\n @click=\"handleClick\"\n >\n <template v-if=\"loading\">\n <slot v-if=\"$slots.loading\" name=\"loading\" />\n <el-icon v-else :class=\"ns.is('loading')\">\n <component :is=\"loadingIcon\" />\n </el-icon>\n </template>\n <el-icon v-else-if=\"icon || $slots.icon\">\n <component :is=\"icon\" v-if=\"icon\" />\n <slot v-else name=\"icon\" />\n </el-icon>\n <span\n v-if=\"$slots.default\"\n :class=\"{ [ns.em('text', 'expand')]: shouldAddSpace }\"\n >\n <slot />\n </span>\n </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, markRaw } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useButton } from './use-button'\nimport { buttonEmits } from './button'\nimport { useButtonCustomStyle } from './button-custom'\n\nimport type { ButtonProps } from './button'\n\ndefineOptions({\n name: 'ElButton',\n})\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n disabled: undefined,\n type: '',\n nativeType: 'button',\n loadingIcon: markRaw(Loading),\n plain: undefined,\n text: undefined,\n round: undefined,\n dashed: undefined,\n autoInsertSpace: undefined,\n tag: 'button',\n})\n\nconst emit = defineEmits(buttonEmits)\n\nconst buttonStyle = useButtonCustomStyle(props)\nconst ns = useNamespace('button')\nconst {\n _ref,\n _size,\n _type,\n _disabled,\n _props,\n _plain,\n _round,\n _text,\n _dashed,\n shouldAddSpace,\n handleClick,\n} = useButton(props, emit)\nconst buttonKls = computed(() => [\n ns.b(),\n ns.m(_type.value),\n ns.m(_size.value),\n ns.is('disabled', _disabled.value),\n ns.is('loading', props.loading),\n ns.is('plain', _plain.value),\n ns.is('round', _round.value),\n ns.is('circle', props.circle),\n ns.is('text', _text.value),\n ns.is('dashed', _dashed.value),\n ns.is('link', props.link),\n ns.is('has-bg', props.bg),\n])\n\ndefineExpose({\n /** @description button html element */\n ref: _ref,\n /** @description button size */\n size: _size,\n /** @description button type */\n type: _type,\n /** @description button disabled */\n disabled: _disabled,\n /** @description whether adding space */\n shouldAddSpace,\n})\n</script>\n"],"mappings":""}