You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

53 lines
934 B

  1. <template>
  2. <button
  3. @click="click"
  4. :disabled="disabled ? 'disabled' : null"
  5. :type="disabled && line ? 'default' : null"
  6. :class="[size, round ? 'round' : '', shadow ? 'shadow' : '', buttonColor, buttonBorder, block ? 'block' : '']"
  7. hover-class="button-hover"
  8. class="cu-btn"
  9. >
  10. <slot></slot>
  11. </button>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'l-button',
  16. props: {
  17. size: { default: 'df' },
  18. color: {},
  19. round: {},
  20. shadow: {},
  21. line: {},
  22. blod: {},
  23. icon: {},
  24. disabled: {},
  25. block: {}
  26. },
  27. computed: {
  28. buttonBorder() {
  29. return this.line ? `line${this.blod ? 's' : ''}-${this.line || 'gray'}` : ''
  30. },
  31. buttonColor() {
  32. if (this.color) {
  33. return `bg-${this.color}`
  34. } else if (!this.line) {
  35. return `bg-gray`
  36. }
  37. return ''
  38. }
  39. },
  40. methods: {
  41. click(e) {
  42. this.$emit('click', e)
  43. }
  44. }
  45. }
  46. </script>