<template>
  <button
    :class="[{ button: true, plain: plain }, type, classObj]"
    :type="nativeType"
  >
    <i :class="icon" v-if="icon != ''"></i>
    <span>
      <slot></slot>
    </span>
  </button>
</template>
<style lang="scss" scoped>
.button {
  font-size: 14px;
  padding: 6px 20px;
  border: 0;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.default {
  color: #606266;
  border: 1px solid #606266;
}
.default:hover,
.default:focus {
  color: #4ec79f;
  background-color: #f0f9eb;
}
.default.plain {
  color: #4ec79f;
  border: 1px solid #4ec79f;
  background-color: #fff;
}
.success {
  color: #fff;
  background-color: #38b48b;
  border: 1px solid transparent;
}
.success:hover,
.success:focus {
  color: #fff;
  background-color: #4ec79f;
}
.success.plain {
  color: #38b48b;
  background-color: #ebf7f3;
}
.success.plain:hover,
.success.plain:focus {
  color: #fff;
  background-color: #38b48b;
}
</style>
<script>
export default {
  name: 'MButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    classObj: {
      type: Object,
      default: function () {
        return {}
      }
    }
  }
}
</script>
