bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <button
    @click="click"
    :class="[
      size,
      round ? 'round' : '',
      shadow ? 'shadow' : '',
      buttonColor,
      buttonBorder,
      block ? 'block' : '',
      disabled ? 'disabled' : '',
      className
    ]"
    :disabled="disabled ? 'disabled' : null"
    :type="disabled && line ? 'default' : null"
    :style="style"
    hover-class="button-hover"
    class="cu-btn"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'l-button',

  props: {
    size: { default: 'df' },
    color: {},
    round: {},
    shadow: {},
    line: {},
    blod: {},
    icon: {},
    disabled: {},
    block: {}
  },

  computed: {
    buttonBorder() {
      return this.line ? `line${this.blod ? 's' : ''}-${this.line || 'gray'}` : ''
    },

    buttonColor() {
      if (this.color) {
        return `bg-${this.color}`
      } else if (!this.line) {
        return `bg-gray`
      }

      return ''
    }
  },

  methods: {
    click(e) {
      this.$emit('click', e)
    }
  }
}
</script>