I am currently working on designing a button with various states like hover, focused, pressed, and disabled. Additionally, I need this button to have two different sizes - default (large) and smaller (small). Despite attempting to pass these attributes using vue props, I'm facing issues where they aren't being applied to the button as expected.
Specifically, my focus right now is on setting basic size attributes for the button such as height and width, but it seems that the changes are not reflecting and no errors are being thrown either.
Displayed below is the button in the template:
<button
class="primaryButton"
:class="[
size + 'large',
type + 'primary',
{
'default-state': !isActive,
hover: isActive && isHovered,
focused: isActive && isFocused,
pressed: isActive && isPressed,
disabled: isDisabled
}
]"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
@focus="isFocused = true"
@mousedown="isPressed = true"
@mouseup="isPressed = false"
@click="handleClick"
:disabled="isDisabled"
>
<slot />
</button>
Shown below is the script section:
export default {
props: {
size: {
default: 'large',
small: 'small'
//default size
},
type: {
default: 'default',
focused: 'focused',
pressed: 'pressed',
disAbled: 'disAbled'
//default type
}
},
data() {
return {
isActive: true,
isHovered: false,
isFocused: false,
isPressed: false,
isDisabled: false
}
},
methods: {
handleClick() {
if (!this.isDisabled) {
this.buttonClick
}
}
}
}
Lastly, presented below is the style section:
.primaryButton {
background-color: #a5042a;
border: none;
color: white;
border-radius: 5px;
}
.primaryButton:hover {
background-color: #ed063d;
cursor: pointer;
}
.large-size {
min-height: 45px;
min-width: 130px;
}