vant/packages/button/index.js

import { use } from '../utils';
import Loading from '../loading';

const [sfc, bem] = use('button');

export default sfc(
  {
    props: {
      text: String,
      block: Boolean,
      plain: Boolean,
      round: Boolean,
      square: Boolean,
      loading: Boolean,
      disabled: Boolean,
      nativeType: String,
      bottomAction: Boolean,
      tag: {
        type: String,
        default: 'button'
      },
      type: {
        type: String,
        default: 'default'
      },
      size: {
        type: String,
        default: 'normal'
      }
    },

    render(h, context, inherit) {
      const { props, listeners } = context;
      const { type, disabled, loading } = props;

      const onClick = event => {
        if (!loading && !disabled && listeners.click) {
          listeners.click(event);
        }
      };

      return (
        <props.tag
          type={props.nativeType}
          disabled={disabled}
          class={bem([
            type,
            props.size,
            {
              loading,
              disabled,
              block: props.block,
              plain: props.plain,
              round: props.round,
              square: props.square,
              'bottom-action': props.bottomAction
            }
          ])}
          onClick={onClick}
          {...inherit}
        >
          {loading ? (
            <Loading size="20px" color={type === 'default' ? undefined : ''} />
          ) : (
            <span class={bem('text')}>{context.children || props.text}</span>
          )}
        </props.tag>
      );
    }
  },
  true
);