
<template>
    <button @click="handleClick"  :disabled="disabled" :type="type" :kind="kind" :class="classNames">
      <slot v-if="$slots.default"></slot>
    </button>
</template>

<script>
  import './button.less'
  import mixin from '../mixin'
  const prefixCls = mixin.prefix+'button';
  export default {
    name: mixin.prefix+'button',
    props:{
      disabled:{
        type:Boolean,
        default:false
      },
      type:{
        type:String,
        default:'primary' //primary、default
      },
      kind:{
        type:String,
        default:'background'//background、line、simple
      }
    },
    data() {
      return {
        classNames: {
          [prefixCls]: true,
          [`${prefixCls}-${this.type}`]: this.type,
          [`${prefixCls}-${this.kind}`]: this.kind,
          [`${prefixCls}-disabled`]: Boolean(this.disabled),
        }
      }
    },
    methods: {
      handleClick(event) {
        this.$emit('click', event)
      }
    },
  }
  </script>

