Tengo un componente vue simple en el que se puede hacer clic, pero quiero que el clic en sí sea condicional, por lo que puedo mostrar el componente, pero evitar que el usuario haga clic en él.
Probé la directiva deshabilitada, pero no funcionó.
Componente
<template> <!-- the listeners make sure the whole component is clickable --> <div class="col hb_click" v-on="$listeners" :class="{disabled:disabled}" :disabled="disabled"> <div class=""> <!-- Display icon with label at bottom --> <div class="row"> <div class="col d-flex align-items-center justify-content-center"> <button type="button" class="btn btn-link px-0" > <i :class="icon"></i> </button> </div> </div> <div class="row"> <div class="col d-flex align-items-center justify-content-center"> <div class="hb_label">{{ label }}</div> </div> </div> </div> </div> </template> <script> export default { name: "HB", props: { label: String, icon: String, disabled:{ type: Boolean, default: false, } }, data() { return {}; }, }; </script> <style scoped> i { font-size: 1.3rem; } .hb_label{ font-size: 1rem; } .hb_click { cursor: pointer; } .hb_click:hover{ background-color: rgb(222, 216, 215); } .disabled{ color: lightgray!important; } </style>vista
<HB label="Templates" icon="fas fa-search" @click="shouldWork()" :disabled="false"></HB> <HB label="Templates" icon="fas fa-search" @click="shouldNotWork()" :disabled="true"></HB>Puede sobrescribir el oyente de clics:
Vue.component('hb', { template: ` <div class="col hb_click" v-on="{ ...$listeners, click: () => {} }" :class="{disabled}" :disabled="disabled" @click="onClick()" > <div class=""> <div class="row"> <div class="col d-flex align-items-center justify-content-center"> <button type="button" class="btn btn-link px-0" :disabled="disabled"> <i :class="icon"></i> </button> </div> </div> <div class="row"> <div class="col d-flex align-items-center justify-content-center"> <div class="hb_label">{{ label }}</div> </div> </div> </div> </div> `, props: { label: String, icon: String, disabled:{ type: Boolean, default: false, } }, methods: { onClick() { !this.disabled && this.$emit("click"); }, } }) new Vue({ el: "#demo", methods: { shouldWork() { console.log('clicked') } }, }) i { font-size: 1.3rem; } .hb_label { font-size: 1rem; } .hb_click { cursor: pointer; } .hb_click:hover{ background-color: rgb(222, 216, 215); } .disabled { color: lightgray!important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div id="demo"> <hb label="Templates" icon="fas fa-search" @click="shouldWork" disabled></hb> <hb label="Templates" icon="fas fa-search" @click="shouldWork"></hb> </div>¿Qué pasa con la aplicación pointer-events: none; por lo que el evento de clic no se activará cuando los usuarios hagan clic. Puedes agregarlo en tu clase disabled