KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Able to disable button component with prop.

Browse Source
This commit is contained in:
Kevin
2020-07-26 21:18:31 +02:00
parent 57dae22591
commit 43cc5e59cb
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/components/ui/Button.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<button :class="computedClass" @click="$emit('click')"><slot></slot></button> <button :class="computedClass" @click="$emit('click')" :disabled="disabled"><slot></slot></button>
</template> </template>
<script> <script>
@@ -23,13 +23,18 @@ export default {
scaleRotate: { scaleRotate: {
type: Boolean, type: Boolean,
default: false default: false
},
disabled: {
type: Boolean,
required: false,
default: false
} }
}, },
computed: { computed: {
computedClass() { computedClass() {
let classNames= []; let classNames= [];
if (this.scaleRotate) if (this.scaleRotate && !this.disabled)
classNames.push('scale-rotate') classNames.push('scale-rotate')
if (this.small) if (this.small)
classNames.push('small'); classNames.push('small');
@@ -94,9 +99,13 @@ button {
} }
button .icon { button .icon {
position: relative; vertical-align: middle;
top: 2.5px; margin-left: 0.3rem;
right: -8px; font-size: 1.4em;
}
button[disabled], button:disabled {
cursor: not-allowed;
} }
</style> </style>