Button 按钮

按钮组件，默认跟随父组件宽度，支持同时设置type、status、disabled。

组件源码

<script lang="ts" setup>
defineProps<{
  type?: 'primary' | 'outline';
  status?: 'default' | 'danger';
  disabled?: boolean;
}>();
</script>

<template>
  <button
    name="button"
    type="button"
    autocomplete="off"
    class="base-button"
    :class="{
      'base-button--primary': type === 'primary' || !type,
      'base-button--outline': type === 'outline',
      'base-button--danger': status === 'danger',
      'base-button--disabled': disabled
    }">
    <slot />
  </button>
</template>

<style lang="scss" scoped>
$primary-color: #2f54eb;
$primary-color-hover: #597ef7;
$primary-color-disabled: #9dbefa;
$danger-color: #f5222d;
$danger-color-hover: #d4380d;
$danger-color-disabled: #fa8c96;

.base-button {
  all: unset;
  box-sizing: border-box;
  padding: 8px 12px;
  width: 100%;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
}

.base-button--primary {
  background: $primary-color;
  color: #fff;

  &:hover, &:focus {
    background-color: $primary-color-hover;
  }

  &.base-button--disabled {
    background-color: $primary-color-disabled;
  }

  &.base-button--danger {
    background-color: $danger-color;

    &:hover, &:focus {
      background-color: $danger-color-hover;
    }

    &.base-button--disabled {
      background-color: $danger-color-disabled;
    }
  }
}

.base-button--outline {
  color: $primary-color;
  background: #fff;
  border: 1px solid $primary-color;

  &:hover, &:focus {
    border-color: $primary-color-hover;
    color: $primary-color-hover;
    background-color: transparent;
  }

  &.base-button--disabled {
    border-color: $primary-color-disabled;
    color: $primary-color-disabled;
  }

  &.base-button--danger {
    border-color: $danger-color;
    color: $danger-color;

    &:hover, &:focus {
      border-color: $danger-color-hover;
      color: $danger-color-hover;
    }

    &.base-button--disabled {
      border-color: $danger-color-disabled;
      color: $danger-color-disabled;
    }
  }
}

.base-button--disabled {
  cursor: not-allowed;
}
</style>

基本用法

示例代码

<template>
  <div class="container">
    <BaseButton>默认按钮</BaseButton>
    <div class="pl-20">
      <BaseButton status="danger">危险按钮</BaseButton>
    </div>

    <div class="pl-20"><BaseButton disabled>禁用按钮</BaseButton></div>
    <div class="pl-20">
      <BaseButton status="danger" disabled>禁用按钮</BaseButton>
    </div>
  </div>

  <div class="pt-20 container">
    <BaseButton type="outline">线框按钮</BaseButton>
    <div class="pl-20">
      <BaseButton type="outline" status="danger">危险按钮</BaseButton>
    </div>

    <div class="pl-20">
      <BaseButton type="outline" disabled>禁用按钮</BaseButton>
    </div>
    <div class="pl-20">
      <BaseButton type="outline" status="danger" disabled>禁用按钮</BaseButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import BaseButton from '@/BaseButton/BaseButton.vue';
</script>


<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.pl-20 {
  padding-left: 20px;
  width: 100%;
}

.pt-20 {
  padding-top: 20px;
}
</style>

API

Props

参数名	说明	类型	默认值
type	类型	'primary' | 'outline'	primary
status	状态	'default' | 'danger'	default
disabled	是否禁用	boolean	false

Events

事件名	说明	参数
click	点击按钮时触发(禁用时也会触发)	event: MouseEvent

Slots

插槽名	说明	参数
default	需要显示的内容	-