frontend/src/components/Basic/CButton.vue

<template>
  <button class="c-button" :style="style" :class="classList" @click="$emit('click')">
    <c-icon :bold="!noBold" :right="6" :left="-4" v-if="icon" class="icon" :size="20">{{icon}}</c-icon>
    <slot></slot>
  </button>
</template>

<script>
import CIcon from '@/components/Basic/CIcon'

export default {
  components: { CIcon },
  // props: ['icon', 'noClickWarn']
  props: {
    icon: {
      type: String,
      default: null
    },
    noClickWarn: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'normal'
    },
    // 背景透明的按钮
    text: {
      type: Boolean,
      default: false
    },
    // 使用白色字体、深色背景的最显眼按钮，优先级大于 text
    standout: {
      type: Boolean,
      default: false
    },
    // 占满宽度
    block: {
      type: Boolean,
      default: false
    },
    small: {
      type: Boolean,
      default: false
    },
    large: {
      type: Boolean,
      default: false
    },
    // 去掉涟漪效果
    noRipple: {
      type: Boolean,
      default: false
    },
    noBold: {
      type: Boolean,
      default: false
    },
    left: {
      type: Number,
      default: 0
    },
    right: {
      type: Number,
      default: 0
    }
  },
  computed: {
    style () {
      return {
        marginRight: this.right ? this.right + 'px' : null,
        marginLeft: this.left ? this.left + 'px' : null
      }
    },
    classList () {
      return [
        this.standout
          ? (this.theme ? 'c-button-standout--' + this.theme : 'c-button-standout--normal')
          : (
            this.text
              ? (this.theme ? 'c-button-text--' + this.theme : 'c-button-text--normal')
              : (this.theme ? 'c-button--' + this.theme : 'c-button--normal')
          ),
        this.large ? 'c-button--large' : '',
        this.small ? 'c-button--small' : '',
        this.noClickWarn ? 'c-button--disabled' : '',
        this.block ? 'c-button--block' : ''
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';
@import '~@/style/mixin/set-theme.scss';

button {
  border: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;

  background: $theme-background-grey;
  color: $theme-grey;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 16px;
  font-weight: bold;
  box-sizing: border-box;
  transition: .15s;

  &:hover {
    background: darken($theme-background-grey, 5);
  }

  &:active {
    background: darken($theme-background-grey-darker, 10);
  }
}

.c-button--block {
  display: flex;
  width: 100%;
}

@mixin theme($name, $color, $backgroundColor) {
  .c-button--#{$name} {
    color: $color;
    background: $backgroundColor;

    &:hover {
      background: darken($backgroundColor, 5);
    }

    &:active {
      background: darken($backgroundColor, 10);
    }

    .icon {
      color: $color;
    }
  }
  .c-button-text--#{$name} {
    color: $color;
    border-radius: 1000px;
    background: transparent;
    transition: .3s;

    &:hover {
      background: $backgroundColor;
    }

    &:active {
      background: darken($backgroundColor, 5);
    }

    .icon {
      color: $color;
    }
  }
  .c-button-standout--#{$name} {
    color: white;
    background: $color;

    &:hover {
      background: lighten($color, 5);
    }

    &:active {
      background: lighten($color, 10);
    }

    .icon {
      color: white;
    }
  }
}

@include setTheme()

.c-button--disabled {
  background: #daeafa;
  color: white;
  cursor: not-allowed;

  &:hover {
    background: #daeafa;
  }

  &:active {
    background: #daeafa;
  }
}
</style>