<template>
  <div @click="handleClick" class="button text-center mb-4 mx-auto last:mb-0" :class="{ disable: disable }" :style="options.style">
    {{ options.text }}
  </div>
</template>
<script>
import Base from './base';

export default {
  name: 'v-button',
  extends: Base,
  props: {
    disable: Boolean,
  },
  methods: {
    handleClick($event){
      if(this.disable) return;
      this.$emit('click', $event)
    }
  }
}
</script>
<style lang="less" scoped>
.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: 1rem;
  background: #fe441f;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;

  &.disable {
    background: rgb(190, 190, 190);
  }
}
</style>
