When el-inputthe component is disabled, its clickevent will still be fired. This is because clickthe event is a browser-level event, not el-inputcontrolled by the component. Even if the component is disabled, its elements still exist in the document and can be clicked by the mouse. If you wish to block click events while in the disabled state, consider using an @clickevent listener to handle the event and return when the component is disabled false. Here is sample code:
<template>
<el-input :disabled="isDisabled" @click="handleClick" />
</template>
<script>
export default {
data() {
return {
isDisabled: true,
};
},
methods: {
handleClick() {
if (this.isDisabled) {
return false;
}
// Handle click event
},
},
};
</script>
In this example :disabled, el-inputthe component is set to the disabled state using the property, and the click event is handled using @clickthe event listener. In handleClickthe method , check isDisabledthat the property is true. If so, returns falseto prevent the event's default behavior. If not, the default behavior for handling events.