Recently, I integrated radio buttons using the Oruga Library with Vue 3. Now, I am looking for a way to check if the radio button is disabled and then apply a specific class based on its state.
Below is the code snippet that I am currently working with:
<template>
<o-radio v-bind="$props" v-model="model">
<slot />
</o-radio>
</template>
<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import Radio from '../mixins/radio-mixins';
export default defineComponent({
name: "BaseRadio",
computed: {
model: {
get() {
return this.$props.nativeValue;
},
set(value: any) {
this.$emit("input", value);
},
},
},
emits: ["input"],
props: {
...Radio.props,
},
});
</script>
<style>
.b-radio.radio .check:before {
background : #A2A9AD;
}
.b-radio.radio .check:checked {
border-color: #A2A9AD;
}
/* Insert custom styles here for when the radio button is disabled */
</style>I am specifically looking for guidance on how to apply changes in the style tags mentioned above when the radio button is disabled. Any suggestions or solutions would be greatly appreciated.
In essence, I aim to dynamically detect the disabled state of the radio button and alter its appearance accordingly using CSS.