element-plus/es/el-button/index.js

A Component Library for Vue3.0

import { defineComponent, inject, computed, openBlock, createBlock, createCommentVNode, renderSlot } from 'vue';
import { useGlobalConfig } from '../utils/util';
import { isValidComponentSize } from '../utils/validators';
import { elFormKey, elFormItemKey } from '../el-form';

var script = defineComponent({
    name: 'ElButton',
    props: {
        type: {
            type: String,
            default: 'default',
            validator: (val) => {
                return [
                    'default',
                    'primary',
                    'success',
                    'warning',
                    'info',
                    'danger',
                    'text',
                ].includes(val);
            },
        },
        size: {
            type: String,
            validator: isValidComponentSize,
        },
        icon: {
            type: String,
            default: '',
        },
        nativeType: {
            type: String,
            default: 'button',
            validator: (val) => {
                return ['button', 'submit', 'reset'].includes(val);
            },
        },
        loading: Boolean,
        disabled: Boolean,
        plain: Boolean,
        autofocus: Boolean,
        round: Boolean,
        circle: Boolean,
    },
    emits: ['click'],
    setup(props, ctx) {
        const $ELEMENT = useGlobalConfig();
        const elForm = inject(elFormKey, {});
        const elFormItem = inject(elFormItemKey, {});
        const buttonSize = computed(() => {
            return props.size || elFormItem.size || $ELEMENT.size;
        });
        const buttonDisabled = computed(() => {
            return props.disabled || elForm.disabled;
        });
        const handleClick = evt => {
            ctx.emit('click', evt);
        };
        return {
            buttonSize,
            buttonDisabled,
            handleClick,
        };
    },
});

const _hoisted_1 = {
  key: 0,
  class: "el-icon-loading"
};
const _hoisted_2 = { key: 2 };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock("button", {
    class: [
      'el-button',
      _ctx.type ? 'el-button--' + _ctx.type : '',
      _ctx.buttonSize ? 'el-button--' + _ctx.buttonSize : '',
      {
        'is-disabled': _ctx.buttonDisabled,
        'is-loading': _ctx.loading,
        'is-plain': _ctx.plain,
        'is-round': _ctx.round,
        'is-circle': _ctx.circle
      }
    ],
    disabled: _ctx.buttonDisabled || _ctx.loading,
    autofocus: _ctx.autofocus,
    type: _ctx.nativeType,
    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
  }, [
    (_ctx.loading)
      ? (openBlock(), createBlock("i", _hoisted_1))
      : createCommentVNode("v-if", true),
    (_ctx.icon && !_ctx.loading)
      ? (openBlock(), createBlock("i", {
          key: 1,
          class: _ctx.icon
        }, null, 2 /* CLASS */))
      : createCommentVNode("v-if", true),
    (_ctx.$slots.default)
      ? (openBlock(), createBlock("span", _hoisted_2, [
          renderSlot(_ctx.$slots, "default")
        ]))
      : createCommentVNode("v-if", true)
  ], 10 /* CLASS, PROPS */, ["disabled", "autofocus", "type"]))
}

script.render = render;
script.__file = "packages/button/src/button.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _Button = script;

export default _Button;