btn.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
  3. <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
  4. <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
  5. <span :style="{ 'font-size': fontSize }">{{ txt }}</span>
  6. </div>
  7. </template>
  8. <script setup>
  9. import { defineProps, defineEmits } from 'vue'
  10. defineProps({
  11. txt: {
  12. type: String,
  13. default: ''
  14. },
  15. loading: {
  16. type: Boolean,
  17. default: false
  18. },
  19. fontSize: {
  20. type: String,
  21. default: '20px'
  22. },
  23. icon: {
  24. type: Boolean,
  25. default: true
  26. },
  27. disabled: {
  28. type: Boolean,
  29. default: false
  30. }
  31. })
  32. const emit = defineEmits(['on-click'])
  33. const clickBtn = () => {
  34. emit('on-click')
  35. }
  36. </script>
  37. <style scoped lang="scss">
  38. .btn-submit {
  39. background: #1D9BF0;
  40. border-radius: 100px;
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. height: 53px;
  45. width: 343px;
  46. margin: 0 auto;
  47. cursor: pointer;
  48. margin-top: 16px;
  49. user-select: none;
  50. span {
  51. font-weight: 800;
  52. color: #FFFFFF;
  53. font-size: 20px;
  54. line-height: 24px;
  55. margin-left: 6px;
  56. }
  57. img {
  58. width: 20px;
  59. height: 20px;
  60. }
  61. .loading {
  62. animation: loading 1s infinite linear;
  63. }
  64. }
  65. .no {
  66. cursor: no-drop;
  67. }
  68. .disabled {
  69. cursor: no-drop;
  70. background: #F1F1F1;
  71. span {
  72. color: #AFAFAF;
  73. }
  74. }
  75. @keyframes loading {
  76. from {
  77. transform: rotate(0deg);
  78. }
  79. to {
  80. transform: rotate(360deg);
  81. }
  82. }
  83. </style>