1 | <template>
|
2 | <button :class="buttonClass" type="button" v-ripple :disabled="disabled">
|
3 | <slot>
|
4 | <span v-if="loading && !icon" :class="iconClass"></span>
|
5 | <span v-if="icon" :class="iconClass"></span>
|
6 | <span class="p-button-label">{{label||' '}}</span>
|
7 | <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
|
8 | </slot>
|
9 | </button>
|
10 | </template>
|
11 |
|
12 | <script>
|
13 | import Ripple from 'primevue/ripple';
|
14 |
|
15 | export default {
|
16 | props: {
|
17 | label: {
|
18 | type: String
|
19 | },
|
20 | icon: {
|
21 | type: String
|
22 | },
|
23 | iconPos: {
|
24 | type: String,
|
25 | default: 'left'
|
26 | },
|
27 | badge: {
|
28 | type: String
|
29 | },
|
30 | badgeClass: {
|
31 | type: String,
|
32 | default: null
|
33 | },
|
34 | loading: {
|
35 | type: Boolean,
|
36 | default: false
|
37 | },
|
38 | loadingIcon: {
|
39 | type: String,
|
40 | default: 'pi pi-spinner pi-spin'
|
41 | }
|
42 | },
|
43 | computed: {
|
44 | buttonClass() {
|
45 | return {
|
46 | 'p-button p-component': true,
|
47 | 'p-button-icon-only': this.icon && !this.label,
|
48 | 'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
|
49 | 'p-disabled': this.$attrs.disabled || this.loading,
|
50 | 'p-button-loading': this.loading,
|
51 | 'p-button-loading-label-only': this.loading && !this.icon && this.label
|
52 | }
|
53 | },
|
54 | iconClass() {
|
55 | return [
|
56 | this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
|
57 | 'p-button-icon',
|
58 | {
|
59 | 'p-button-icon-left': this.iconPos === 'left' && this.label,
|
60 | 'p-button-icon-right': this.iconPos === 'right' && this.label,
|
61 | 'p-button-icon-top': this.iconPos === 'top' && this.label,
|
62 | 'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
|
63 | }
|
64 | ]
|
65 | },
|
66 | badgeStyleClass() {
|
67 | return [
|
68 | 'p-badge p-component', this.badgeClass, {
|
69 | 'p-badge-no-gutter': this.badge && String(this.badge).length === 1
|
70 | }]
|
71 | },
|
72 | disabled() {
|
73 | return this.$attrs.disabled || this.loading;
|
74 | }
|
75 | },
|
76 | directives: {
|
77 | 'ripple': Ripple
|
78 | }
|
79 | }
|
80 | </script>
|