temporary-parking-frontend/src/kui/components/k-button/k-button.vue

<template>
  <button
    :class="[
      'k-btn',
      { 'k-btn--disabled': disabled || loading },
      { 'k-btn--outline': type === 'outline' },
      { 'k-btn--text': type === 'plain' || type === 'text' || type === 'icon' },
    ]"
    :open-type="openType"
    :style="[
      {
        borderColor: borderColor
          ? borderColor
          : type === 'default'
          ? bgColor
          : type === 'plain' || type === 'text' || type === 'icon'
          ? 'transparent'
          : '',
        color: color
          ? color
          : type !== 'text' && type !== 'outline'
          ? '#ffffff'
          : '',
        backgroundColor: bgColor
          ? bgColor
          : type === 'outline' ||
            type === 'plain' ||
            type === 'text' ||
            type === 'icon'
          ? 'transparent'
          : '',
        height:
          height ||
          (size === 'auto' || type === 'text' || type === 'icon'
            ? 'auto'
            : '90px'),
        fontSize: fontSize ? fontSize : type === 'text' ? '30px' : '34px',
        width:
          width ||
          (size === 'auto' || type === 'text' || type === 'icon'
            ? 'auto'
            : size === 'large'
            ? '420px'
            : size === 'middle'
            ? '380px'
            : size === 'small'
            ? '330px'
            : '690px'),
        padding: padding ? padding : 'auto',
      },
      activeColor ? { '--k-color-primary-active': activeColor } : {},
      disabledColor ? { '--k-color-primary-disabled': disabledColor } : {},
    ]"
    :disabled="disabled || loading"
    @click.stop="onClick"
    :loading="loading"
    @getuserinfo="onGetuserinfo"
    @getphonenumber="onGetphonenumber"
  >
    <slot name="left"/>
    <k-icon
      v-if="type == 'icon'"
      :name="icon"
      :size="31"
      :color="color"
      style="margin-right: 8px;"
    />
    {{ title }}
    <slot />
  </button>
</template>

<script>
export default {
  name: 'k-button',
  props: {
    title: String,
    openType: String,
    icon: String,
    opacity: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    loading: Boolean,
    type: {
      type: String,
      default: 'default', // 'default' | 'outline' | 'plain' | 'text'
    },
    size: {
      type: String,
      default: 'normal', // 'normal' | 'large' | 'middle' | 'small' | 'auto'
    },
    width: {
      type: String,
      default: '', // 'auto' | '100px'
    },
    height: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
    fontSize: {
      type: String,
      default: '',
    },
    bgColor: {
      type: String,
      default: '',
    },
    borderColor: {
      type: String,
      default: '',
    },
    padding: String,
    status: String, // active | disabled | loading
    activeColor: String,
    disabledColor: String,
  },
  methods: {
    onClick() {
      this.$emit('click');
    },
    onGetuserinfo(e) {
      this.$emit('getuserinfo', e);
    },
    onGetphonenumber(e) {
      this.$emit('getphonenumber', e);
    },
  },
};
</script>

<style scoped lang="less">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
.k-btn {
  width: 200px;
  height: 50px;
  border-radius: 60px;
  border: 1px solid var(--k-color-primary, #000);
  outline: none;
  line-height: 1.5;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  background: var(--k-color-primary, #000);
  color: var(--k-color-primary, #000);

  &::after {
    display: none;
  }

  &:not(.k-btn--disabled):not(.k-btn--outline):not(.k-btn--text):active {
    background: var(--k-color-primary-active, #000) !important;
    border: 1px solid var(--k-color-primary-active, #000) !important;
  }
}

.k-btn--disabled {
  background: var(--k-color-primary-disabled, #000) !important;
  border: 1px solid var(--k-color-primary-disabled, #000) !important;
}

.k-btn--text {
  background: transparent !important;
  border: none !important;

  &:active {
    color: var(--k-color-primary-active, #000) !important;
  }
}

.k-btn--outline {
  &:active {
    background: transparent;
    border: 1px solid var(--k-color-primary-active, #000) !important;
    color: var(--k-color-primary-active, #000) !important;
  }
}
</style>