frontend/src/components/Basic/IconButton.vue

<template>
  <div class="icon-button" :class="classList" :title="title ? title : ''" @click="$emit('click')" :style="style">
    <c-icon :theme="theme" :bold="!noBold" :size="size ? size / 1.4 - 4 : 26">
      <slot></slot>
    </c-icon>
    <ripple></ripple>
  </div>
</template>

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

export default {
  components: { Ripple, CIcon },
  // props: ['title', 'ripple', 'small']
  props: {
    title: {
      type: String,
      default: '按钮'
    },

    // 可以直接传入 6 位颜色值，将覆盖 theme 设置的颜色
    color: {
      type: String,
      default: ''
    },

    // 这个值需要在下方 scss 中有相应的定义，否则无效
    theme: {
      type: String,
      default: 'normal'
    },

    noBold: {
      type: Boolean,
      default: false
    },

    // icon button 大小
    size: Number
  },
  computed: {
    classList () {
      return [this.theme ? 'icon-button--' + this.theme : '']
    },
    style () {
      return {
        color: this.color.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/) ? this.color : '',
        width: this.size ? this.size + 'px' : null,
        height: this.size ? this.size + 'px' : null
      }
    }
  }
}
</script>

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

.icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 100px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
  text-align: center;
  color: $icon-normal-color;
  transition: 0.2s;
  overflow: hidden;

  &:hover {
    background: $theme-background-grey;
  }

  &:active {
    color: darken($icon-hover-color, 10);
  }
}

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

    &:hover {
      background: $backgroundColor;
    }

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

@include setTheme()
</style>