fal-pasa / quasar-vue-styleguidist Goto Github PK

<template>
  <button :style="styles" @click="handleClick">
    <!-- @slot Use this slot to place the button content -->
    <slot></slot>
  </button>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class AppButton extends Vue {
  @Prop(Number)
  size?: number;

  /**
   * Sets the button font color
   */
  @Prop(String)
  color?: string;

  @Prop(String)
  /** Sets background color of the button
   * @since 1.2.0
   */
  background?: string;

  /** @deprecated Use color instead */
  @Prop(String)
  oldColor?: string;

  get styles () {
    return {
      'font-size': this.size,
      color: this.color,
      background: this.background
    }
  }

  handleClick (e: Event) {
    /** Triggered when button is clicked
     * @event click
     * @type {Event}
     */
    this.$emit('click', e)
    /** Event for Alligator's example
     * @event gator
     * @type {Event}
     */
    this.$emit('gator', e)
  }
}
</script>