12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
- <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
- <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
- <span :style="{ 'font-size': fontSize }">{{ txt }}</span>
- </div>
- </template>
- <script setup>
- import { defineProps, defineEmits } from 'vue'
- defineProps({
- txt: {
- type: String,
- default: ''
- },
- loading: {
- type: Boolean,
- default: false
- },
- fontSize: {
- type: String,
- default: '20px'
- },
- icon: {
- type: Boolean,
- default: true
- },
- disabled: {
- type: Boolean,
- default: false
- }
- })
- const emit = defineEmits(['on-click'])
- const clickBtn = () => {
- emit('on-click')
- }
- </script>
- <style scoped lang="scss">
- .btn-submit {
- background: #1D9BF0;
- border-radius: 100px;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 53px;
- width: 343px;
- margin: 0 auto;
- cursor: pointer;
- margin-top: 16px;
- user-select: none;
- span {
- font-weight: 800;
- color: #FFFFFF;
- font-size: 20px;
- line-height: 24px;
- margin-left: 6px;
- }
- img {
- width: 20px;
- height: 20px;
- }
- .loading {
- animation: loading 1s infinite linear;
- }
- }
- .no {
- cursor: no-drop;
- }
- .disabled {
- cursor: no-drop;
- background: #F1F1F1;
- span {
- color: #AFAFAF;
- }
- }
- @keyframes loading {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
- </style>
|