@fesjs/fes-design/es/button/button.js

fes-design for PC

import { defineComponent, ref, computed, createVNode } from 'vue';
import { isNil } from 'lodash-es';
import LoadingOutlined from '../icon/LoadingOutlined';
import getPrefixCls from '../_util/getPrefixCls';
import { useAnimate } from '../_util/use/useAnimate';
import { useTheme } from '../_theme/useTheme';
import useFormAdaptor from '../_util/use/useFormAdaptor';

const prefixCls = getPrefixCls('btn');
const loadingIconClassName = `${prefixCls}-loading-icon`;
const buttonProps = {
  disabled: {
    type: Boolean,
    default: () => undefined
  },
  htmlType: {
    type: String,
    default: 'button'
  },
  size: {
    type: String,
    default: 'middle'
  },
  loading: {
    type: Boolean,
    default: false
  },
  long: {
    type: Boolean,
    default: false
  },
  throttle: {
    type: Number,
    default: 300
  },
  type: {
    type: String,
    default: 'default'
  },
  iconPlacement: {
    type: String,
    default: 'left'
  }
};
var button = defineComponent({
  name: 'FButton',
  props: buttonProps,
  emits: ['click'],
  setup(props, _ref) {
    let {
      slots,
      emit
    } = _ref;
    const {
      animateClassName,
      handelAnimate
    } = useAnimate(400);
    const {
      isFormDisabled
    } = useFormAdaptor();
    useTheme();
    const notAllowed = ref(false);
    const buttonDisabled = computed(() => {
      if (!isNil(props.disabled)) {
        return props.disabled;
      }
      return isFormDisabled.value;
    });
    const handleClick = event => {
      if (notAllowed.value || buttonDisabled.value || props.loading) {
        return;
      }
      handelAnimate();
      notAllowed.value = true;
      setTimeout(() => {
        notAllowed.value = false;
      }, props.throttle);
      emit('click', event);
    };
    const classes = computed(() => [prefixCls, animateClassName.value, `${prefixCls}-type-${props.type}`, props.long && `${prefixCls}-long`, props.size !== 'middle' && `${prefixCls}-${props.size}`, props.loading && 'is-loading']);
    return () => {
      var _slots$icon, _slots$default, _slots$icon2;
      return createVNode("button", {
        "type": props.htmlType,
        "disabled": buttonDisabled.value,
        "class": classes.value,
        "onClick": handleClick
      }, [props.loading ? createVNode(LoadingOutlined, {
        "class": loadingIconClassName
      }, null) : props.iconPlacement !== 'right' && slots.icon && createVNode("span", {
        "class": `${prefixCls}-icon`
      }, [(_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots)]), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), props.iconPlacement === 'right' && slots.icon && createVNode("span", {
        "class": [`${prefixCls}-icon`, 'is-right']
      }, [(_slots$icon2 = slots.icon) === null || _slots$icon2 === void 0 ? void 0 : _slots$icon2.call(slots)])]);
    };
  }
});

export { buttonProps, button as default };